RequireJS 和 SeaJS

時間 2019-11-25

原文原文鏈接

RequireJS SeaJSjavascript

CMD規範

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

SeaJS定義模塊方式

在 SeaJS 裏，模塊只有一種書寫格式前端

define(function(require, exports, module) {
    var A = require('a');
    A.do();
    return function () {};
});

RequireJS定義模塊方式

在 RequireJS 裏，模塊有多種書寫格式，推薦的是java

define(['dep1', 'dep2'], function (dep1, dep2) {
    //Define the module value by returning a value.
    dep1.do();
    return function () {};
});

如今RequireJS 也提供了CMD的寫法
模塊的依賴能夠像 CommonJS 同樣「就近定義」
PS 二者都是以文件作爲模塊一個文件一個模塊node

AMD執行策略

http://imququ.com/post/amd-simplified-commonjs-wrapping.html
AMD 運行時核心思想是「Early Executing」也就是提早執行依賴儘早執行程序員

define(['a', 'b'], function(A, B) {
    //運行至此，a.js 和 b.js 已下載完成（運行於瀏覽器的 Loader 必須如此）；
    //A、B 兩個模塊已經執行完，直接可用（這是 AMD 的特性）；

    return function () {};
});

CMD的執行策略

按需執行 CMD 推崇 as lazy as possible.
[只是執行時間晚了可是加載和RequireJS是同樣的]瀏覽器

//main.js
define(function(require, exports, module) {
    //運行至此，mod1.js 和 mod2.js 已經下載完成；

    console.log('require module: main');

    var mod1 = require('./mod1'); //這裏才執行 mod1 
    mod1.hello();
    var mod2 = require('./mod2'); //這裏才執行 mod2
    mod2.hello();

    return {
        hello: function() {
            console.log('hello main');
        }
    };
});

寫法上可能更易讀「就近」書寫app

SeaJS RequireJS 區別知乎篇

http://www.zhihu.com/question/20342350異步

requirejs：一個模塊的factory函數執行是緊跟隨在define(也就是Evaluate Script腳本模塊文件)以後
seajs: 執行一個模塊的factory函數須要等待全部模塊define完畢。
RequireJS的異步模塊加載迎合了瀏覽器端JS程序員固有的異步思惟，學習成本低
RequireJS和Sea.js在資源加載的時間點都是同樣的，因此論「懶」的程度都是同樣的。差異僅僅在於加載的腳本何時執行。RequireJS的依賴模塊在回調函數執行前執行完畢，而Sea.js的依賴模塊在回調函數執行require時執行。
對於非AMD規範的js插件，require js提供了shim支持，很是方便。RequireJS早有了Shim等支持,不須要修改第三方類庫就能夠徹底支持.如Ember,JQuery等引用,都直接能夠異步加載爲一個模塊.
requirejs目前支持了sourcemap，配合grunt，簡直爽爆了。