LoadJS是一个微小的异步加载器为现代浏览器(711字节).
https://github.com/muicss/loadjs
LoadJS是一个微小的异步加载库的现代浏览器(IE9 +)。 它有一个简单而强大的依赖关系管理系统,它允许并行获取JavaScript和CSS文件,并在满足依赖关系后执行代码。 推荐使用LoadJS的方法是在<html>中(可能在<head>标签中)包含loadjs.js的缩小源代码,然后在pageload之后使用loadjs global管理JavaScript依赖关系。
LoadJS基于Dustin Diaz优秀的$ script库。 我们保持库的行为是一样的,但我们重写了从头开始的代码,以添加对成功/错误回调的支持和优化现代浏览器的库。 LoadJS是711字节(minified + gzipped)。
这里有一个例子你可以做LoadJS:
// define a dependency bundle loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], ‘foobar‘); // execute code elsewhere when the bundle has loaded loadjs.ready(‘foobar‘, { success: function() { /* foo.js & bar.js loaded */ }, error: function(depsNotFound) { /* foobar bundle load failed */ } });
LoadJS的最新版本可以在此存储库的dist /目录中找到:
您也可以将其用作CJS或AMD模块:
$ npm install --save loadjs
var loadjs = require(‘loadjs‘); loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], ‘foobar‘); loadjs.ready(‘foobar‘, { success: function() { /* foo.js & bar.js loaded */ }, error: function(depsNotFound) {/* foobar bundle load failed */} });
async: false support only works in IE10+)LoadJS also detects script load failures from AdBlock Plus and Ghostery in:
Note: LoadJS treats empty CSS files as load failures in IE (to get around lack of support for onerror events on <link> tags)
加载单个文件
loadjs(‘/path/to/foo.js‘, {
success: function() { /* foo.js loaded */}
});
并行获取文件并以异步方式加载它们
loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], {
success: function() { /* foo.js & bar.js loaded */ }
});
并行获取文件并串联加载它们
loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], {
success: function() { /* foo.js and bar.js loaded in series */ },
async: false
});
获取JavaScript和CSS文件
loadjs([‘/path/to/foo.css‘, ‘/path/to/bar.js‘], {
success: function() { /* foo.css and bar.js loaded */ }
});
添加捆绑ID
loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], ‘foobar‘, {
success: function() { /* foo.js & bar.js loaded */ }
});
添加错误回调
loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], ‘foobar‘, {
success: function() { /* foo.js & bar.js loaded */ },
error: function(pathsNotFound) { /* at least one path didn‘t load */ }
});
在调用错误回调之前重试文件
loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], ‘foobar‘, {
success: function() { /* foo.js & bar.js loaded */ },
error: function(pathsNotFound) { /* at least one path didn‘t load */ },
numRetries: 3
});
在嵌入脚本标记之前执行回调
loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], {
success: function() {},
error: function(pathsNotFound) {},
before: function(path, scriptEl) {
/* called for each script node before being embedded */
if (path === ‘/path/to/foo.js‘) scriptEl.crossOrigin = true;
}
});
在bundle完成加载后执行回调
loadjs([‘/path/to/foo.js‘, ‘/path/to/bar.js‘], ‘foobar‘);
loadjs.ready(‘foobar‘, {
success: function() { /* foo.js & bar.js loaded */ }
});
链.ready()在一起
loadjs(‘/path/to/foo.js‘, ‘foo‘);
loadjs(‘/path/to/bar.js‘, ‘bar‘);
loadjs
.ready(‘foo‘, {
success: function() { /* foo.js loaded */ }
})
.ready(‘bar‘, {
success: function() { /* bar.js loaded */ }
});
编写更复杂的依赖列表
loadjs(‘/path/to/foo.js‘, ‘foo‘);
loadjs(‘/path/to/bar.js‘, ‘bar‘);
loadjs([‘/path/to/thunkor.js‘, ‘/path/to/thunky.js‘], ‘thunk‘);
// wait for multiple depdendencies
loadjs.ready([‘foo‘, ‘bar‘, ‘thunk‘], {
success: function() {
// foo.js & bar.js & thunkor.js & thunky.js loaded
},
error: function(depsNotFound) {
if (depsNotFound.indexOf(‘foo‘) > -1) {}; // foo failed
if (depsNotFound.indexOf(‘bar‘) > -1) {}; // bar failed
if (depsNotFound.indexOf(‘thunk‘) > -1) {}; // thunk failed
}
});
使用.done()进行更多控制
loadjs.ready([‘dependency1‘, ‘dependency2‘], {
success: function() {
// run code after dependencies have been met
}
});
function fn1() {
loadjs.done(‘dependency1‘);
}
function fn2() {
loadjs.done(‘dependency2‘);
}
重置依赖关系跟踪器
loadjs.reset();
loadjs/
├── dist
│ ├── loadjs.js
│ ├── loadjs.min.js
│ └── loadjs.umd.js
├── examples
├── gulpfile.js
├── LICENSE.txt
├── package.json
├── README.md
├── src
│ └── loadjs.js
├── test
└── umd-templates
安装依赖关系
克隆存储库
$ git clone git@github.com:muicss/loadjs.git
$ cd loadjs
使用npm安装节点依赖项
$ npm install
构建示例
$ npm run build-examples
To view the examples you can use any static file server. To use the nodejs http-server module:
$ npm install http-server
$ npm run http-server -- -p 3000
Then visit http://localhost:3000/examples
构建分发文件
$ npm run build-dist
The files will be located in the dist directory.
运行测试
To run the browser tests first build the loadjs library:
$ npm run build-tests
Then visit http://localhost:3000/test
构建所有文件
$ npm run build-all
原文:http://www.cnblogs.com/jiangxiaobo/p/6412957.html