webkit-dwarf
What the Fuck?
短小精悍的webkit浏览器Javascript模块加载器。
Why?
- 许多客户端(如:QQ、微信)有基于webkit内核的内嵌浏览器
- 手机端流量非常重要,需要极小的模块管理库
- 基于线下构建,可以带来更好的编程体验
Goal
- 足够小,gzip之后小于1k
- 旨在配合线下构建工具,带来更好的编程体验,例如源代码是这样写的:
src/main.js
require(function () {
var test = require('./test');
// do something
});
src/test.js
define(function (require, exports, module) {
var util = require('./util');
// do something
exports.result = 'test';
});
构建后则: dist/main.js
require(['./test'], function () {
var test = require('./test');
// do something
});
dist/test.js
define('./test', [./util], function () {
var util = require('./util');
// do something
exports.result = 'test';
});
模拟接近于NodeJS的编程体验。
API
-
异步加载
require(modules, success, fail)
modules
Array
异步加载的模块数组success
Function
成功回调fail
Function
失败回调例如:
require(['./test'], function () {
// do something
}, function () {
throw new Error('Failed to load module');
});
-
同步获取
require(module)
module
String
要获取的模块名返回
对应模块例如:
require(['./test'], function () {
var test = require('./test');
// do somthing
}, 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'
};
});
-
设置require
require.opt(opts)
必须在第一次使用require前设置。
opts
Object
设置内容例如:
require.opt({ base: 'http://qun.qq.com/js/' });
-
定制require
require.makeRequire(opts)
opts
Object
设置内容返回
对应的require实例例如:
var myRequire = require.makeRequire({ base: 'http://qun.qq.com/js/' });
应用项目
- 群公告PC版
- 群公告手Q版