• LoadJS


    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)

    文档

    1. 加载单个文件

      loadjs('/path/to/foo.js', {
        success: function() { /* foo.js loaded */}
      });
    2. 并行获取文件并以异步方式加载它们

      loadjs(['/path/to/foo.js', '/path/to/bar.js'], {
        success: function() { /* foo.js & bar.js loaded */ }
      });
    3. 并行获取文件并串联加载它们

      loadjs(['/path/to/foo.js', '/path/to/bar.js'], {
        success: function() { /* foo.js and bar.js loaded in series */ },
        async: false
      });
    4. 获取JavaScript和CSS文件

      loadjs(['/path/to/foo.css', '/path/to/bar.js'], {
        success: function() { /* foo.css and bar.js loaded */ }
      });
    5. 添加捆绑ID

      loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar', {
        success: function() { /* foo.js & bar.js loaded */ }
      });
    6. 添加错误回调

      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 */ }
      });
    7. 在调用错误回调之前重试文件

      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
      });
    8. 在嵌入脚本标记之前执行回调

      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;
        }
      });
    9. 在bundle完成加载后执行回调

      loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar');
      
      loadjs.ready('foobar', {
        success: function() { /* foo.js & bar.js loaded */ }
      });
    10. 链.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 */ }
        });
    11. 编写更复杂的依赖列表

      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
        }
      });
    12. 使用.done()进行更多控制

      loadjs.ready(['dependency1', 'dependency2'], {
        success: function() {
          // run code after dependencies have been met
        }
      });
      
      function fn1() {
        loadjs.done('dependency1');
      }
      
      function fn2() {
        loadjs.done('dependency2');
      }
    13. 重置依赖关系跟踪器

      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

      开发快速入门

      1. 安装依赖关系

      2. 克隆存储库

        $ git clone git@github.com:muicss/loadjs.git
        $ cd loadjs
      3. 使用npm安装节点依赖项

        $ npm install
      4. 构建示例

        $ 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

      5. 构建分发文件

        $ npm run build-dist

        The files will be located in the dist directory.

      6. 运行测试

        To run the browser tests first build the loadjs library:

        $ npm run build-tests

        Then visit http://localhost:3000/test

      7. 构建所有文件

        $ npm run build-all
       
  • 相关阅读:
    CF_402C Searching for Graph 乱搞题
    zoj Simple Equation 数论
    zoj 3757 Alice and Bob and Cue Sports 模拟
    uva_12535
    boj1267 Infinite’s Cave 树形dp + 背包
    CF_216_Div_2
    nxlog4go 简介
    log4go的一些改进设想
    nxlog4go 的配置驱动
    nxlog4go Log Levels and Pattern Layout
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/6412957.html
Copyright © 2020-2023  润新知