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

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

Why

• 我們有許多僅基于webkit瀏覽器開(kāi)發(fā)的應(yīng)用
• 無(wú)論是使用requirejs還是seajs都需要先加載完模塊加載器本身之后才能加載其他模塊
• 無(wú)論出于首屏優(yōu)化需要，還是手機(jī)2G優(yōu)化需要，我們都需要一個(gè)足夠小的模塊加載器
• 內(nèi)置CDN失敗回源策略

AMD & CMD

    
      require([module], callback);

    
  

這是AMD規(guī)范中模塊引用的經(jīng)典方式。實(shí)際上CMD規(guī)范在異步引用上也與之類似。

    
      require.async([module], callback);

    
  

實(shí)際上它們差別主要在define上，如AMD規(guī)范中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規(guī)范加載與引用是一體的，而CMD規(guī)范加載與引用是分離的。

webkit-dwarf的規(guī)范呢？

requirejs和seajs出現(xiàn)的時(shí)候，線下構(gòu)建還不是非常流行。但現(xiàn)在grunt的應(yīng)用已經(jīng)隨處可見(jiàn)了.特別我們?cè)赽rowserify中看到其精妙的應(yīng)用。

所以我們的目標(biāo)是在線下編寫的時(shí)候，盡量接近NodeJS模塊編寫風(fēng)格，但構(gòu)建后可以滿足模塊異步加載，串行引用。

線下規(guī)范

• 同步引用：

    
      require(module)

    
  

module? String ?模塊路徑

返回 ?對(duì)應(yīng)模塊

• 異步引用：

使用require包裹函數(shù)體：

    
      require(factory)

    
  

factory? Function ?加載后運(yùn)行的函數(shù)

例如：

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

    
  

dwarf將會(huì)異步加載完./a.js后，再調(diào)用factory

• 定義：

    
      define(factory)

    
  

factory? Function ?模塊的定義函數(shù)

例如：

./b.js

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

    
  

線上規(guī)范

• 同步獲取

    
      require(module)

    
  

module? String ?要獲取的模塊名

返回 ?對(duì)應(yīng)模塊

例如：

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

    
  

• 異步加載

    
      require(modules, success, fail)

    
  

modules? Array ?異步加載的模塊數(shù)組

success? Function ?成功回調(diào)

fail? Function ?失敗回調(diào)

例如：

    
      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 ?模塊相對(duì)該js文件對(duì)應(yīng)路徑，因?yàn)橛锌赡茉谝粋€(gè)js文件中定義多個(gè)模塊

dependencies? Array ?依賴數(shù)組

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'
    };
});

    
  

技術(shù)細(xì)節(jié)

• 加載方式

我們使用async的srcipt節(jié)點(diǎn)插入head中進(jìn)行加載。由于針對(duì)webkit瀏覽器，所以加載成功回調(diào)和失敗回調(diào)都是現(xiàn)成的。

    
      /**
 * 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);
    }
},

    
  

• 文件路徑

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

1. getCurrentScript方案
2. 通過(guò)srcipt onload將script.src帶過(guò)去

document.currentScript是firefox 4.0開(kāi)始出現(xiàn)的非標(biāo)準(zhǔn)API，而Chrome 29+已經(jīng)支持，也已寫入HTML 5規(guī)范中：

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).

所以我們可以通過(guò)下面代碼來(lái)獲取路徑：

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

    
  

但畢竟只能滿足部分瀏覽器，所以又產(chǎn)生了另一種通過(guò)error stack來(lái)獲取當(dāng)前腳本路徑的方法：

    
      function getCurrentScript() {
   //取得正在解析的script節(jié)點(diǎn)
   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(); // 強(qiáng)制報(bào)錯(cuò)，以便捕獲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;
   }
}

    
  

可這個(gè)方案無(wú)法支持safari，為了避免代碼過(guò)大，雖然一般而言這會(huì)更有效率，但還是使用第二種方案來(lái)實(shí)現(xiàn)。

結(jié)果

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

小矮人Javascript模塊加載器