https://github.com/miniflycn/webkit-dwarf

短小精悍的webkit瀏覽器Javascript模塊加載器

Why

• 我們有許多僅基于webkit瀏覽器開發的應用
• 無論是使用requirejs還是seajs都需要先加載完模塊加載器本身之后才能加載其他模塊
• 無論出于首屏優化需要，還是手機2G優化需要，我們都需要一個足夠小的模塊加載器
• 內置CDN失敗回源策略

AMD & CMD

    
      require([module], callback);

    
  

這是AMD規范中模塊引用的經典方式。實際上CMD規范在異步引用上也與之類似。

    
      require.async([module], callback);

    
  

實際上它們差別主要在define上，如AMD規范中define是這么用的：

    
      define(['./a', './b'], function (a, b) {
  // do something
});

    
  

而CMD中是這樣的：

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

    
  

AMD規范加載與引用是一體的，而CMD規范加載與引用是分離的。

webkit-dwarf的規范呢？

requirejs和seajs出現的時候，線下構建還不是非常流行。但現在grunt的應用已經隨處可見了.特別我們在browserify中看到其精妙的應用。

所以我們的目標是在線下編寫的時候，盡量接近NodeJS模塊編寫風格，但構建后可以滿足模塊異步加載，串行引用。

線下規范

• 同步引用：

    
      require(module)

    
  

module? String ?模塊路徑

返回 ?對應模塊

• 異步引用：

使用require包裹函數體：

    
      require(factory)

    
  

factory? Function ?加載后運行的函數

例如：

    
      require(function () {
    var a = require('./a');
    // do something
});

    
  

dwarf將會異步加載完./a.js后，再調用factory

• 定義：

    
      define(factory)

    
  

factory? Function ?模塊的定義函數

例如：

./b.js

    
      define(function (require, exports, module) {
    var a = require('./a');
    // do something
    module.exports = function () {
        console.log('module b exports');
    }
})

    
  

線上規范

• 同步獲取

    
      require(module)

    
  

module? String ?要獲取的模塊名

返回 ?對應模塊

例如：

    
      require(['./test'], function () {
    var test = require('./test');
    // do somthing
}, function () {
    throw new Error('Failed to load module');
});

    
  

• 異步加載

    
      require(modules, success, fail)

    
  

modules? Array ?異步加載的模塊數組

success? Function ?成功回調

fail? Function ?失敗回調

例如：

    
      require(['./test'], function () {
    // do something
}, function () {
    throw new Error('Failed to load module');
});

    
  

• 定義模塊

    
      define(module, dependencies, factory)
define(module, factory)
define(module, value)

    
  

module? String ?模塊相對該js文件對應路徑，因為有可能在一個js文件中定義多個模塊

dependencies? Array ?依賴數組

factory? Functino ?模塊初始化工廠

value? String, Number or Object ?模塊值

例如：

    
      define('./test', [./util], function (require, exports, module) {
    var util = require('./util');
    // do something
    exports = module.exports = {
        result: 'test'
    };
});

    
  

技術細節

• 加載方式

我們使用async的srcipt節點插入head中進行加載。由于針對webkit瀏覽器，所以加載成功回調和失敗回調都是現成的。

    
      /**
 * load
 * @param {String} url
 */
load: function (url) {
    var 
        node = document.createElement('script'),
        self = this;
    node.addEventListener('load', _onload, false);
    node.addEventListener('error', _onerror, false);
    node.type = 'text/javascript';
    node.async = 'async';
    node.src = url;
    _head.appendChild(node);
    function _onload() {
        _onend();
        return Def.make(this.src);
    }
    function _onerror() {
        _onend();
        _head.removeChild(node);
        if (_base && !~url.indexOf(_localBase)) {
            return self.load(url.replace(_base, _localBase));
        } else {
            return self.down();
        }
    }
    function _onend() {
        node.removeEventListener('load', _onload, false);
        node.removeEventListener('error', _onerror, false);
    }
},

    
  

• 文件路徑

獲取到正確的文件路徑，才能正確判斷依賴文件路徑，現在主要有兩種方法獲取文件路徑：

1. getCurrentScript方案
2. 通過srcipt onload將script.src帶過去

document.currentScript是firefox 4.0開始出現的非標準API，而Chrome 29+已經支持，也已寫入HTML 5規范中：

Returns the script element that is currently executing. In the case of reentrant script execution, returns the one that most recently started executing amongst those that have not yet finished executing.

Returns null if the Document is not currently executing a script element (e.g. because the running script is an event handler, or a timeout).

所以我們可以通過下面代碼來獲取路徑：

    
      function getCurrentScript() {
    if (document.currentScript) {
        return document.currentScript.src;
    }
}

    
  

但畢竟只能滿足部分瀏覽器，所以又產生了另一種通過error stack來獲取當前腳本路徑的方法：

    
      function getCurrentScript() {
   //取得正在解析的script節點
   if (document.currentScript) { // firefox 4+
       return document.currentScript.src;
   }
   //  參考 https://github.com/samyk/jiagra/blob/master/jiagra.js
   var stack, i, node;
   try {
       a.b.c(); // 強制報錯，以便捕獲e.stack
   } catch(e) {
       stack = e.stack;
   }
   if (stack) {
       i = stack.lastIndexOf(' at ');
       var a = stack.slice(i + e.length).replace(/\s\s*$/, '').replace(/(:\d+)?:\d+$/i, '');
       return a;
   }
}

    
  

可這個方案無法支持safari，為了避免代碼過大，雖然一般而言這會更有效率，但還是使用第二種方案來實現。

結果

webkit-dwarf	情況
源代碼	7021b
uglify	2844b
gizp	662b
支持	現代瀏覽器 & IE10+

小矮人Javascript模塊加載器