一.區別
語法 | 支持靜態編譯 | 同步加載 | 值拷貝 |
---|---|---|---|
es6模塊 | 是(在編譯時就完成模塊加載) | 否(異步) | 否(導出值和導入值都指向同一塊內存,存在動態更新);例如:export var foo = 'bar'; setTimeout(() => foo = 'baz', 500);在另一個文件引用的foo500毫秒后會發生變化 |
node(采用common.js規范) | 否(支持動態導入require(${path}/xx.js))) | 是 | 是,比如上面的例子,foo到了時間是不會改變,如要改變,重新導入 |
二.es6模塊使用
//第一種方式需要定義接口名
a.js
//es6的export需要定義對外的接口,屬性名m就是接口名
let m=1;
export {m:m}//一般簡寫成export{m}
export function n(){};//通常情況下,export輸出的變量就是本來的名字,輸出接口名n
b.js
import {m}from "./a.js"//a.js可以是相對路徑,也可以是絕對路徑
import {n}from "./a.js"
或者
import * as all from "./a.js"//all是自定義名,all代表了一個對象,可以all.m,all.n這樣使用
//第二種方式export default解決import時要知道接口名的問題
a.js
let m=1;
export default m;//注意:a.js只能有一個export default
b.js
import xx from "./a.js"//xx自定義名
三.node.js模塊的使用
//第一種方式將對象賦值給 module.exports(這是模塊系統提供的對象),這會使文件只導出該對象;
//定義一個輸出模塊
a.js
const obj={m:1,n:2};
module.exports=obj;
//定義一個輸入模塊
b.js
const res=require("./a.js");//相對和絕對路徑都可以
console.log(res.m);
//第二種方式是將要導出的對象添加為 exports 的屬性。這種方式可以導出多個對象、函數或數據:
//定義一個輸出模塊
a.js
const obj={m:1,n:2};
const fn=function(){};
exports.x=obj;
exports.y=fn;
//定義一個輸入模塊
b.js
const res=require("./a.js");//相對和絕對路徑都可以
console.log(res.x,res.y);
注意:module.exports
和 export
之間有什么區別?
實際上
// module 基本實現
var module = {
exports: {} // exports 就是個空對象
}
//這表示module.exports` 和 `exports`的關系 ,都是指向同一塊內存
var exports = module.exports ;//注意:不能把exports直接指向一個值,這樣就相當於切斷了 exports 和module.exports 的關系。例如 exports=function(x){console.log(x)},只能使用exports.屬性名=xx;