《JavaScript總結》js模塊化

模塊化開發，能夠讓代碼易於擴展、便於往後維護。

ES6中的模塊化

咱們先了解一下 export(導出) 和 import(導入) 這兩個關鍵字。

新建一個文件a.js 而且導出變量test

export var test = "測試";

 

導入變量test  來源是a.js   而後輸出test

import {test} from './a.js'; console.log(test);

 

若是想導出多個變量:

var test = "測試1"; var test2 = "測試2"; export { test, test2 }

import {test,test2} from './a.js';

 

若是你不想暴露模塊當中的變量名字，能夠經過as來進行操做:

var test = "測試1"; var test2 = "測試2"; export { test as asTest, test2 as asTest2 }

import {asTest,asTest2} from './a.js';

 

默認導出 (export default)

一個模塊文件只能有一個默認導出，而且它的導入名稱能夠喝導出名稱不同。

export default test = "哈哈";

import test from './a.js'; import noTest from './a.js';//名字不同也行

 

混合導入導出

/*導出文件 a.js*/ export var test = "Hello"; export default yuki = "Yuki"; /*導入*/ import yuki,{test} from './a.js';

 

CommonJS

commonJs是Node獨有的規範，通常是用於服務端。module.exports(導出) 、require(導入)。具體看示例

module.exports = { test:'哈哈', yuki:'Yuki' } //下面這種方式也能夠導出 exports不能直接賦值一個對象 也就說exports=對象aaa 這種寫法是無效的
exports.test = "哈哈"; exports.yuki = "Yuki";

var obj = require('./a.js'); console.log(obj.test); console.log(obj.yuki);

 

CommonJS與ES6中模塊化的區別

1.commonJs支持動態導入，也就說require(${path}/xx.js) ，但ES6不支持。

2.commonJs是同步的，而且通常用於服務端，後者是異步的，通常用於客戶端(瀏覽器)。

 

AMD

// AMD
define(['./a', './b'], function(a, b) { a.do() b.do() }) define(function(require, exports, module) { var a = require('./a') a.doSomething() var b = require('./b') b.doSomething() })