LoadJS

LoadJS是一个微小的异步加载器为现代浏览器（711字节）.

介绍

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