JavaScript模塊化

JavaScript模塊化

js模塊化歷程

CommonJS

CommonJS規範，一個單獨的文件就是一個模塊。
加載模塊使用require方法，該方法讀取一個文件並執行，
最後返回文件內部的exports對象

定義模塊

根據CommonJS規範，一個單獨的文件就是一個模塊。
每個模塊都是一個單獨的做用域，在該模塊內部定義的變量，
沒法被其餘模塊讀取，除非定義爲global對象的屬性

模塊輸出

模塊只有一個出口，module.exports對象，
咱們須要把模塊但願輸出的內容放入該對象

加載模塊

加載模塊使用require方法，該方法讀取一個文件並執行，
返回文件內部的module.exports對象

CommonJS規範

Browserify

https://github.com/substack/node-browserify#usage
瀏覽器加載 CommonJS 模塊的原理與實現
經過 Browserify 在瀏覽器中使用 NodeJS 模塊
Browserify：瀏覽器加載Node.js模塊
前端模塊及依賴管理的新選擇：Browserify

AMD

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
ADM規範

define("alpha", ["require", "exports", "beta"],
      function (require, exports, beta) {
      exports.verb = function() {
          return beta.verb();
          //Or:
          return require("beta").verb();
      }
  });

目前，實現AMD的庫有RequireJS 、curl 、Dojo 、Nodules 等

requirejs

https://github.com/requirejs/requirejs
https://github.com/amdjs/amdjs-api/wiki/require
http://www.requirejs.cn/

curl

https://github.com/cujojs/curl
http://cujojs.com/#get

dojo

https://github.com/cujojs/curl
http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/

nodule

https://github.com/kriszyp/nodules

CMD

CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。
CMD規範

define(function(require, exports, module) {

   // 獲取模塊 a 的接口，調用模塊 a 的方法
   var a = require('./a');
   a.doSomething();

   // 異步加載一個模塊，在加載完成時，執行回調
   require.async('./b', function(b) {
     b.doSomething();
   });

  // 對外提供 foo 屬性
  exports.foo = 'bar';

  // 對外提供 doSomething 方法
  exports.doSomething = function() {};

});

seajs

https://github.com/seajs/seajs
SeaJS與RequireJS最大的區別

ES6（ECMAScript六、ES2015)

ECMAScript 6 入門

ES5 和 ES6 瀏覽器支持狀況

http://kangax.github.io/compat-table/es5/
http://kangax.github.io/compat-table/es6/

babel

http://babeljs.cn/

標準對比

標準	實現	優勢	缺點
CommonJS	nodejs和browserify	便於重用、規範、易用、支持多	同步，不適合瀏覽器；不能夠並行的非阻塞的加載多個模塊
AMD	requirejs、curl、dojo、nodule	適合瀏覽器異步加載；能夠多個模塊並行加載；國外支持友好	不優雅
CMD	seajs	並行異步加載；兼容nodejs	須要spm打包，邏輯偏重
ES6	babel	容易進行靜態分析；面向將來的es標準	原生的瀏覽器尚未支持；新版的nodejs才支持

補充

CSS模塊化

http://www.jianshu.com/p/d46bc8cf3afa

總體模塊化

http://fex.baidu.com/blog/2014/03/fis-module/
http://saito.im/note/The-Architecture-of-F2E/
http://zhizhi.betahouse.us/2015/10/24/qian-duan-mo-kuai-ji-yi-lai-guan-li/