1.什么是模块化
模块化是指把一个复杂的系统分解到一个一个的模块,再用一定的方式拼装起来。
2.模块化开发的优点
(1)一个单独的文件就是一个模块,是一个单独的作用域,只向外暴露特定的变量和函数。这样可以避免污染全局变量,减少变量命名冲突。
(2)代码复用,让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。
3.js模块化规范
Js模块化规范有:CommonJS、AMD、CMD、以及本文要总结的ES6的模块系统。
其中,CommonJS是服务端的模块规范,AMD和CMD是浏览器端的模块规范。
CommonJS加载模块是“运行时加载”:CommonJS的模块就是对象,导入时,实际是整体加载模块的所有方法,生成一个对象,然后再从这个对象读取对应的方法。因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。
ES6加载模块是“编译时加载”。ES6模块不是对象,导入时只加载指定的方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高,并使得静态分析成为可能。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。
关于模块化的更多内容,可以看下之前我总结的一览js模块化:从CommonJS到ES6
导出的语法
(1) 导出的基本语法、导出时重命名
export关键字,可以导出变量、函数、类给其他模块。
as关键字,可以指定变量、函数、类在模块外应该被称为什么名称。
// 导出变量–写法1
export let name = “Peter”;
// 导出变量–写法2:先定义,再导出
let name = “Peter”;
export { name }
// 导出变量–写法3:重命名
let name = “Peter”;
export { name as PersonName}
这里export时记得加花括号,不加则会报错。
// 导出函数–写法1
export function sum(a, b) {
return a + b;
}
// 导出函数–写法2:先定义、再导出
function sum(a, b) {
return a + b;
}
export { sum };
// 导出函数–写法3:重命名
function sum(a, b) {
return a + b;
}
export { sum as add };
(1)模块是自动运行在严格模式下、并且无法退出运行的js代码。
即ES6 的模块是自动采用严格模式,不管有没有在模块头部加上"use strict";
(2)在ES6的模块中,在模块顶层创建的变量只在模块的顶层作用域中存在,不会自动被添加到全局作用域中。
(3)在模块顶层,this的值是undefined,即不要在顶层代码使用this。
(4)模块不支持HTML风格的代码注释。
type=“module”