在之前對(duì)于js的模塊總是一知半解，今天正好完全整理一下。是根據(jù)github上的電子書進(jìn)行的整理 纠永。
Learning JavaScript Design Patterns
和阮一峰的es6module進(jìn)行整理
es6模塊
CommonJS以及es6的module
CommonJs主要有一個(gè)函數(shù)require和一個(gè)變量exports組成亿鲜。
// package/lib is a dependency we require
var lib = require( "package/lib" );
// behaviour for our module
function foo(){
lib.log( "hello world!" );
}
// export (expose) foo to other modules
exports.foo = foo;
值得注意的是CommonJS的引入方式是運(yùn)行時(shí)引入。
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
es6 module
而在es6的模塊中有兩個(gè)變量一個(gè)是import 一個(gè)是export非常方便鳍怨。
在es6的模塊中，有幾個(gè)需要注意的點(diǎn)：
編譯時(shí)引入模塊跪妥。
import { stat, exists, readFile } from 'fs';
上面代碼的實(shí)質(zhì)是從fs模塊加載3個(gè)方法鞋喇，其他方法不加載。這種加載稱為“編譯時(shí)加載”或者靜態(tài)加載眉撵，即 ES6 可以在編譯時(shí)就完成模塊加載侦香，效率要比 CommonJS 模塊的加載方式高落塑。當(dāng)然，這也導(dǎo)致了沒法引用 ES6 模塊本身罐韩，因?yàn)樗皇菍?duì)象憾赁。
因?yàn)檫@個(gè)屬性，在react或者vue的服務(wù)端渲染方式下散吵，某些模塊可能會(huì)報(bào)錯(cuò)龙考，因?yàn)槠錈o法在運(yùn)行時(shí)加載，所以當(dāng)某些模塊帶有document或者window等node不存在的對(duì)象時(shí)错蝴，就會(huì)報(bào)錯(cuò)洲愤。
if(document) {
import react from 'react'
}
//這種寫法會(huì)直接報(bào)錯(cuò) error: 'import' and 'export' may only appear at the top level (10:6)
//運(yùn)行時(shí)引入例子。
if(document) {
const react = require('react') //ok
import('react').then(react => {}) //ok
}
理解運(yùn)行時(shí)引入顷锰，還是編譯時(shí)引入真的很重要柬赐。
AMD: Asynchronous Module Definition
在瀏覽器端異步加載模塊的模塊定義格式菇篡。
有兩個(gè)方法值得學(xué)習(xí)define和require
define
首先define是具體定義一個(gè)amd模塊的方式拔创。他的大體格式就像這樣：
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for instantiating the module or object*/
);
//舉個(gè)例子：
define( "myModule",
["foo", "bar"],
// module definition function
// dependencies (foo and bar) are mapped to function parameters
function ( foo, bar ) {
// return a value that defines the module export
// (i.e the functionality we want to expose for consumption)
// create your module here
var myModule = {
doStuff: function () {
console.log( "Yay! Stuff" );
}
};
return myModule;
});
require
require是一個(gè)js文件動(dòng)態(tài)加載模塊或依賴項(xiàng)的方法慎璧。
require(["foo", "bar"], function ( foo, bar ) {
// rest of your code here
foo.doSomething();
});
