Module语法 export和import命令 JS导入导出

JS中 Module语法导入导出,为什么要去导入导出js?  

模块化。  为什么要代码模块化,为了我们的代码后期更好维护

一个功能性函数,你很多页面都需要使用。

很多页面都有写死的固定数据。

用的时候你要每个页面都把函数代码复制过去吗?

改页面固定数据的时候,你每个页面都要去改吗?

太过于繁琐,不利于自己或者后来的人员维护

所以我们就来讲 模块化  中 export和import

 export  导出

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

导出分为两种  多个导出,单个导出

多个导出  export

// 你可以这样导出
export let a1 = () => 123
export let a2 = () => 123
export let a3 = () => 123
export let a4 = () => 123


// 也支持这样导出

let a5 = () => 123
let a6 = () => 123
let a7 = () => 123
let a8 = () => 123

export {a5,a6,a7,a8}

多个导出两种方式都可以,但我更加推荐使用第一种 

因为第二种形式的,你定义之后,还要去导出,然后使用,有的时候,你会定义之后忘记导出

单个导出  export default

export default function () {
  console.log('foo');
}

 import  导入

两种导入方式都可以,我更推荐第二种

注意看 export default 导出和export导出    当年导入的时候,方式不同

import { a1, a2, a3, a4 } from '../xx.js'

// 使用
a1()
a2()
a3()
a4()


import aObj from '../xx.js'
// 使用
aObj.a5()
aObj.a6()
aObj.a7()
aObj.a8()




// 如果是使用 export default导出的
// 就这样导入

import foo from '../xx.js'; // 输入

猜你喜欢

转载自blog.csdn.net/m0_55258023/article/details/127514987