LoadJS

最新推荐文章于 2024-05-16 09:46:57 发布

weixin_33890526

最新推荐文章于 2024-05-16 09:46:57 发布

阅读量388

点赞数

文章标签： javascript git json ViewUI

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

Browser Support

IE9+ (async: false support only works in IE10+)
Opera 12+
Safari 5+
Chrome
Firefox
iOS 6+
Android 4.4+

LoadJS also detects script load failures from AdBlock Plus and Ghostery in:

Safari
Chrome

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

开发快速入门

安装依赖关系
- nodejs
- npm
- http-server (via npm)

克隆存储库

$ 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
```

weixin_33890526

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
LoadJS

LoadJS是一个微小的异步加载器为现代浏览器（711字节）.https://github.com/muicss/loadjs 介绍LoadJS是一个微小的异步加载库的现代浏览器（IE9 +）。它有一个简单而强大的依赖关系管理系统，它允许并行获取JavaScript和CSS文件，并在满足依赖关系后执行代码。推荐使用LoadJS的方法是在&lt;html&gt;中（可能在&lt;...
复制链接

扫一扫