需要掌握：JavaScript模块化

介绍

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 的模块化分为：导出（export） 与 导入（import）

应用场景

开发项目时，不可能将所有的代码都编写到一个 .js 文件中，需要根据功能模块拆分成不同的 .js文件，如：

a.js 文件有变量 name、函数 add()、函数mianji()
b.js 文件需要用 a.js 文件中的变量 name、函数 test()，和函数 mianji()

关键：两个文件中，有同名 name、mainji()，b.js中的 test() 函数需要调用 a.js 中的 add() 函数

使用步骤

编写js文件：

在 a.js 文件中 export 变量、函数
在 b.js 文件中 import 该变量、函数，然后才能使用

html引入js文件：

在 <script> 标签中增加 type="module"，如：<script src="js/b.js" type="module">
使用 babel 转换为 ES5 规范的代码

export

先导出再导入，不能像java那样，直接导入

语法

export {变量名1,变量名2,函数名1}

例子

创建 a.js ，内容如下：

let name = '李雷'

function add(i,j){
    return i + j
}
// 求圆面积
function mianji(r){
    return Math.PI * r * r
}

// 允许其他文件调用 add()、mianji()
// 建议在文档尾部指定导出的变量、函数
export{name,add,mianji}

import

对于java程序员来说，相当于 import 导入一个类

语法

import {变量名1,变量名2,函数名1} from 'js文件名'

注意：

import 后面要有 {}
变量名、函数名， 与 export 的名字必须相同

例子

接上面例子，创建 b.js，内容如下：

//import的变量名、函数名，必须和 export 的名称相同，顺序可以不一致
// 表示导入 a.js 文件中的 add() 函数，所以不会与 name、test() 同名冲突
import {add} from './a.js'

let name = '韩梅梅'

function test(){

    const res = add(5,11)
    console.log("res:",res)


}
// 求正方形面积
function mianji(len){
    return len * len
}

console.log("name:",name)

//  允许其他文件调用 test()、mianji()
export {name,test,mianji}

html 引入js文件并使用

方式一

由于 a.js 文件 使用模块化，所以不能像传统方式使用，如要加上 type="module"：

<script src="js/b.js" type="module"></script>

注意：必须加上 type="module"

浏览器访问该 html 页面，控制台显示如下：

name: 韩梅梅

方式二：html中调用 js 中的函数、访问 js 中的变量

由于 a.js 文件 使用模块化，所以不能像传统方式使用，在 html 文件中增加下面代码：

<script type="module">
    // 从js文件中导入要用的变量、函数
    // 注意：必须有 ./ ，否则报错。.js 不能省略
    import {name,mianji} from './js/a.js'
    console.log("html name:",name)
    console.log("半径是5的圆面积：",mianji(5))
</script>

注意1：必须加上 type="module"
注意2：浏览器中只支持相对路径或者绝对路径下的 ES 模块 ( ./, ../, /, http://, https://) ，同时也受服务器跨域请求策略、 HTTPS 策略的约束。

浏览器访问该 html 页面，显示如下：

html name: 李雷
边长是5的正方形面积： 78.53981633974483

要计算正方形面积

由于正方形面积函数在 b.js 文件中，需要引入 b.js：

<script  type="module">
    import {name,mianji as mianji_yuan} from './js/a.js'
    import {name as name2,test,mianji} from './js/b.js'
    console.log("html name:",name)
    test()
    console.log("边长是5的正方形面积：",mianji(5))
    console.log("半径是5的圆面积：",mianji_yuan(5))
</script>

import 特点

特点1：不能改变量值

不允许在 b.js 或 .html 文件中，改写 import 变量的值

在 b.js 或 .html 文件中，执行下面代码会报错：

import {name} from './a.js'

name='韩梅梅'

特点2：可以修改属性值

import 变量为 对象类型时，可以 添加、修改其属性值

在 a.js 中增加下面代码：

const person = {
    name:'lucy',
    age:20,
    sex:'女',
}

在 b.js 或 .html 文件中，可以执行下面代码：

import {person} from './a.js'

person.age=22

特点3：仅加载一次导入的模块

多次执行同一 import 语句，那么只会执行一次

在 a.js 文件中增加下面代码：

console.log("a.js-------------")

在 b.js 或 .html 文件中，多次导入 a.js，如下：

import {add} from './a.js'
import {add} from './a.js'

也只打印一次，如下：

a.js-------------

export 其他写法

as 起别名

a.js：

let url = "http://www.baidu.com"
let person = { 
    name:'李雷',
    age:20
}
let add = function(a,b){
    return a+b
}

export {url as u,person as p ,add} //导出时起别名

b.js：

// 必须有 ./ ，否则报错
import {u,p,add} from './a.js' //导入时也要写别名

console.log(u)
console.log(p)

var res=add(1,2)
console.log(res)

多个export

方式一：

export let url = "http://www.baidu.com"
export let person = { 
    name:'李雷',
    age:20
}
export let add = function(a,b){
    return a+b
}

方式二：

let url = "http://www.baidu.com"
let person = { 
    name:'李雷',
    age:20
}
let add = function(a,b){
    return a+b
}

// export { url, person, add } //建议在文档尾部指定导出的变量、函数
export {url,person as p }
export {add}

注意： export 的变量名不能同名

下面正确（导出2个url，但名字不同）：

export {url as u,person as p }
export {url}

下面错误（导出2个url）：

export {url,person as p }
export {url}

import 其他写法

多次import一个模块

import {add,person} from './a.js'
import {url} from './a.js'


console.log(person)
console.log(url)

var res=add(1,2)
console.log(res)

as 整体起别名

import * as test from "./a"
console.log(test.person)
console.log(test.url)

var res=test.add(1,2)
console.log(res)

as 针对每个变量起别名

import {add as a,person as p} from './a.js'

console.log(p)
var res=a(1,2)
console.log(res)

export default

一般用于 导出一个匿名函数

特点：

export default 只能有一个
import 的名字不必与 export default 相同

例子