一、CommonJs规范
- 允许模块通过require方法来同步加载(同步阻塞)所要依赖的其他模块,然后通过module.exports来导出需要暴露的接口。
-
如何导出变量、方法、对象。
//创建math1.js文件,module表示当前模块(即:当前文件math1.js),exports是module上的属性 module.exports = function add(a, b) { return a + b; }
-
如何引用其他文件的变量、方法 、对象。
//创建main2.js,并在其中引用模块中的add方法 var {add} = require(“./math1.js”); console.log(add(1, 2)); //调用add必须得等待main1.js请求加载成功。
二、ES6模块化
-
导出唯一的对象,使用:export default。
-
导出一个对象,创建main1.js,内容如下:
export default { //导出的对象没有名字 a: 100 } // 相当于: var data = { a: 100}; export { data as default }; //给导出的对象命名data
-
创建mian2.js文件,并引用main1.js中的对象
import obj from “./mian1.js”; //由于用default导出,所以可以用任意变量名接收 console.log(obj.a) // 相当于: import { default as obj } from “./mian1.js”; //给导入的无名对象命名为obj
-
-
当要输出多个对象时,不能用default了,且import时候要加{…}
- 导出多个对象,创建mian1.js,内容如下:
var a = 100; var b = 10; var c = function() { } export {a, b, c}; //注:可以使用as关键词对导出变量进行重命名 export { a as newA, b as newB, c as newC };
-
导入内容,创建mian2.js, 并引用main1.js导出的变量
import {a, b, c} from “./mian1.js”; import {newA, newB, newC} form ”./mian1.js”; //注:可以使用as关键词对导入的变量重命名,可以只导入对象中的一个属性 import {a as renameA} form “./mian1.js”;
-
注意事项:
- export语句输出的接口是对应值的引用,是一种动态绑定关系,通过该接口可以获取模块内部实时的值,不可对引入变量重新赋值。 对比CommomJs规范: CommonJs模块输出的是值的缓存,不存在动态更新,可以对引入变量重新赋值。
- export可以放在模块顶层的任何位置(即:跟全局变量同层),若出现在函数中、if(){ }大括号中,就会报错,import同理。
- import命令输入的变量都是只读的,因为它的本身就输入接口,也就是说,通过导入变量去改写变量的值,会报错。 但是如果是一个对象,改写对象的属性是允许的。(对象只能改变值但不能改变引用地址)。