Skip to content

Brief

Jump to bottom Edit New page
Daniel Yang edited this page Mar 2, 2014 · 5 revisions

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规范加载与引用是分离的。

为什么要把加载与引用分离？

这是一个非常核心的问题？通常模块加载器有一个基本约定：

  • 即模块名及为文件名

但在真实开发中，这往往是不现实的，比如我们为了优化，减少http请求数量，将多个模块合并成一个文件。这在经典AMD规范中是没有解决方案的，通常我们需要使用Define a Module with Simplified CommonJS Wrapper规范来解决，比如：

// 这里./all.js文件中包含了./a和./b模块
define(['require', 'exports', 'module', './all'], function (require, exports, module) {
    var a = require('./a'),
        b = require('./b');
});

经常有童鞋问，为什么dwarf模块的写法要选用CMD的写法，这主要取决于dwarf本身的目的：

  • 足够小，需要避免对过多写法的兼容
  • 在各种场景可用，比如将多个模块合并成单个文件
  • 如果想方便编写，可借助线下构建达到目的，而不是规范本身
  • 模块写法和NodeJS模块足够贴近，可以吸取NodeJS代码，或者说可以直接吸取browserify的代码

实际上，将define的包裹去掉，内部代码和NodeJS模块的写法是一致的，这给我们从browserify获取模块提供了方便，比如使用grunt-dwarf-builder可以简单将browserify模块打包成dwarf模块，例子可见：dwarf-xss。

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+
Add a custom footer
Add a custom sidebar

Clone this wiki locally