JS----模塊化

ES6:export /import /export default
AMD:require / export / define
CMD:require / require.async / exports / module.exports / define
common.js: require / exports / module.exports

1.Node.js webpack都是common.js模塊化規範的實現
2.AMD是require.js模塊化推廣的規範（預執行）
AMD規範只定義了一個函數「define」 define(id, dependencies,factory)
3.CMD是sea.js模塊化推廣的規範（懶執行）
define(factory) define(function（require,exports,module）)
4.ES6
import/ export/export default
common.js與ES6的區別
前者是動態的同步導入，後者是異步導入；
前者是導出時值拷貝，後者是實時綁定；

sea.js
快速簡要知識點：

1,seajs.config({...});   //用來對 Sea.js 進行配置。
2,seajs.use(['a','b'],function(a,b){...});   //用來在頁面中加載一個或多個模塊。
3,define(function(require, exports, module){...});   //用來定義模塊。Sea.js 推崇一個模塊一個文件，遵循統一的寫法：
4,require(function(require){var a = require("xModule"); ... });   //require 用來獲取指定模塊的接口。
5,require.async,  //用來在模塊內部異步加載一個或多個模塊。 例如：
define(function(require){
    require.async(['aModule','bModule'],function(a,b){  // 異步加載多個模塊，在加載完成時，執行回調
    a.func();
    b.func();
    })    
});
6,exports, //用來在模塊內部對外提供接口。 例如：
define(function(require, exports){
    exports.varName01 = 'varValue';  // 對外提供 varName01 屬性 
    exports.funName01 = function(p1,p2){  // 對外提供 funName01 方法
    ....
    }       
});
7,module.exports, 與 exports 相似，用來在模塊內部對外提供接口。例如：
define(function(require, exports, module) {  
  module.exports = {  // 對外提供接口
    name: 'a',
    doSomething: function() {...};
  };
});
參考學習：https://blog.csdn.net/shenzhennba/article/details/51661544

參考學習：https://www.jianshu.com/p/3832c00a44a7
1.模塊化開發怎麼作？

1.當即執行函數,不暴露私有成員
2.經過函數做用域解決了命名衝突、污染全局做用域的問題

var module1 = (function(){
    　　　　var _count = 0;
    　　　　var m1 = function(){
    　　　　　　//...
    　　　　};
    　　　　var m2 = function(){
    　　　　　　//...
    　　　　};
    　　　　return {
    　　　　　　m1 : m1,
    　　　　　　m2 : m2
    　　　　};
    })();

2.模塊化能夠給咱們帶來如下好處

解決命名衝突
提供複用性
提升代碼可維護性

Es6的模塊化·
在有 Babel 的狀況下，咱們能夠直接使用 ES6的模塊化
// file a.js
export function a() {}
export function b() {}
// file b.js
export default function() {}

import {a, b} from './a.js'
import XXX from './b.js'

CommonJS
CommonJs 是 Node 獨有的規範，瀏覽器中使用就須要用到 Browserify解析了。

// a.js
module.exports = {
    a: 1
}
// or
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1

在上述代碼中，module.exports 和 exports 很容易混淆，讓咱們來看看大體內部實現

var module = require('./a.js')
module.a
// 這裏其實就是包裝了一層當即執行函數，這樣就不會污染全局變量了，
// 重要的是 module 這裏，module 是 Node 獨有的一個變量
module.exports = {
    a: 1
}
// 基本實現
var module = {
  exports: {} // exports 就是個空對象
}
// 這個是爲何 exports 和 module.exports 用法類似的緣由
var exports = module.exports
var load = function (module) {
    // 導出的東西
    var a = 1
    module.exports = a
    return module.exports
};

再來講說 module.exports 和exports，用法實際上是類似的，可是不能對 exports 直接賦值，不會有任何效果。

3.對於 CommonJS 和 ES6 中的模塊化的二者區別是：
前者支持動態導入，也就是 require(${path}/xx.js)，後者目前不支持，可是已有提案,前者是同步導入，由於用於服務端，文件都在本地，同步導入即便卡住主線程影響也不大。
然後者是異步導入，由於用於瀏覽器，須要下載文件，若是也採用同步導入會對渲染有很大影響
前者在導出時都是值拷貝，就算導出的值變了，導入的值也不會改變，因此若是想更新值，必須從新導入一次。
可是後者採用實時綁定的方式，導入導出的值都指向同一個內存地址，因此導入值會跟隨導出值變化
後者會編譯成 require/exports 來執行的

commonJS 動態導入，同步導入，導出時都是值拷貝，導出值變，導入值不變。
ES6 異步導入 實時綁定    導入值會隨導出值變化  會編譯成require/exports執行

AMD 和 CMD
鑑於目前這兩種實現方式已經不多見到，因此再也不對具體特性細聊，只須要了解這二者是如何使用的。

// AMD
define(['./a', './b'], function(a, b) {
  // 加載模塊完畢可使用
  a.do()
  b.do()
})
// CMD
define(function(require, exports, module) {
  // 加載模塊
  // 能夠把 require 寫在函數體的任意地方實現延遲加載
  var a = require('./a')
  a.doSomething()
})

AMD，CMD，CommonJs，ES6 Module：解決原始無模塊化的痛點

1.AMD：requirejs 在推廣過程當中對模塊定義的規範化產出，提早執行，推崇依賴前置
2.CMD：seajs 在推廣過程當中對模塊定義的規範化產出，延遲執行，推崇依賴就近 3.CommonJs：模塊輸出的是一個值的copy，運行時加載，加載的是一個對象（module.exports 屬性），該對象只有在腳本運行完纔會生成
4.ES6 Module：模塊輸出的是一個值的引用，編譯時輸出接口，ES6模塊不是對象，它對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。

es6: import / export/ export default
commonjs: require / module.exports / exports
amd: require / defined

談談你對AMD、CMD的理解
CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。
AMD規範則是非同步加載模塊，容許指定回調函數
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

es6模塊 CommonJS、AMD、CMD
CommonJS 的規範中，每一個 JavaScript 文件就是一個獨立的模塊上下文（module context），在這個上下文中默認建立的屬性都是私有的。也就是說，在一個文件定義的變量（還包括函數和類），都是私有的，對其餘文件是不可見的。
CommonJS是同步加載模塊,在瀏覽器中會出現堵塞狀況，因此不適用
AMD 異步，須要定義回調define方式
es6 一個模塊就是一個獨立的文件，該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量 es6還能夠導出類、方法，自動適用嚴格模式

參考學習：https://blog.csdn.net/fen747042796/article/details/70840089
http://www.cnblogs.com/lvdabao/p/js-modules-develop.html
https://www.cnblogs.com/zhongjiang/p/6554514.html

CommonJS是服務器端模塊的規範,AMD CMD是瀏覽器端模塊化的規範， ES6提供通用的模塊化規範。

簡要區別：

CommonJS: require / module.exports / exports

動態導入，同步導入，只有加載完成，才能執行後面的操做，導出時都是值拷貝，
導出值變，導入值不變。

=============================================

RequireJS：AMD: require / export/define 
    SeaJS：CMD: require, require.async, exports, module.exports define, 
    AMD:提早執行（異步加載：依賴先執行）+延遲執行
    CMD:延遲執行（運行到需加載，根據順序執行）
    Sea.JS對模塊的態度是懶執行, 而RequireJS對模塊的態度是預執行

===========================================

es6: import / export/ export default
export和export default的區別就是：前者導出的東西須要在導入的時候加{}，然後者則不須要
ES6 異步導入,實時綁定 ,導入值會隨導出值變化  會編譯成require/exports執行