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
     

LoadJS的更多相关文章

  1. loadjs异步加载javascript回调

    function loadjs(url,callback){    var script=document.createElement('script');     script.type=" ...

  2. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  3. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  4. 将css和js缓存到localStorage缓存，提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

  5. 3.EasyUI学习总结(三)——easyloader源码分析

    easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...

  6. easyloader源码

    /** * easyloader - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * ...

  7. 让javascript显原型！

    相信以下的javascript让你读起来痛苦不已,告诉你一下简单的办法,就可以让它显出原型!将第一个单词,即eval换成document.write,然后再运行一下,它立即就原形毕露了! eval(f ...

  8. Javascript是单线程的深入分析

    本来想总结一下的,网上却发现有人已经解释的很清楚了,特转过来. 这也解释了为什么在用自动化测试工具来运行dumrendtree时设定的超时和测试case设定的超时的关联性. 面试的时候发现99%的童鞋 ...

  9. Rhino+envjs-1.2.js 在java运行网站js 工具类

    java爬虫遇到个页面加密的东西,找了些资料学习学习 做了个java运行js的工具类,希望对大家有用,其中用到client(获取js)可以自行换成自己的client.主要是用了 Rhino就是Java ...

随机推荐

  1. 二、thinkphp

    ## ThinkPHP 3.1.2 查询方式#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.普通查询方式 a.字符串 $arr=$m->wher ...

  2. Gogs http和ssh地址显示localhost的问题

    问题描述: 如下图所示HTTP和SSH地址显示的是localhost而不是对应的域名或地址. 解决方案: 按以下方法修改Gogs配置文件并重启服务器 域名问题 RUN_USER = git DOMAI ...

  3. Javascript 你不知道的事

    NaN表示一个不能产生正常结果的运算结果.它不等于任何值,包括它自己.可以用isNaN(number)来检测. 同Java中的字符串一样,JS中的字符串是不可变的.也就是说一旦字符串被创建,就无法改变 ...

  4. OGNL（Object-Graph Navigation Language），可以方便地操作对象属性的开源表达式语言，使页面更简洁；

    OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言,使页面更简洁: 支持运算符(如+-*/),比普通的标志具有更高的自由度和更强的功能 ...

  5. UNIQLO

    UNIQLO品牌的迅销公司建立于1963年,当年是一家销售西服的小服装店.公司现任董事长兼总经理柳井正早年毕业于早稻田大学经济学专业,1972年8月进入迅销公司,1984年9月就任公司董事长兼总经理. ...

  6. hdu 2025:查找最大元素（水题，顺序查找）

    查找最大元素 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  7. ActiveMQ搭建

    下载 到ActiveMQ官网,找到下载点. 目前, 官网为http://activemq.apache.org/ Linux版本下载点之一为:http://apache.fayea.com/activ ...

  8. 如何用ChemDraw绘制化学课件

    近年来随着ChemDraw等多媒体技术的迅速发展,多媒体技术越来越多的应用在教学中.学会应用ChemDraw绘制化学分子结构.化学反应式和实验装置的方法,将在有机化学的教学中提供一定的帮助,进一步提高 ...

  9. 剑指 offer set 14 打印 1 到 N 中 1 的个数

    总结 1. 假设 n == 2212, 算法分为两个步骤. 第一步, 将这个 2212 个数分为 1~ 212, 213 ~ 2212 2. 第一部分实际上是将 n 的规模缩小到 212. 假如知道如 ...

  10. linux 常用命令总结（tsg）

    1.解压tar.gz 第一步:gunzip filename.tar.gz --->会解压成.tar文件 第二步:tar xvf FileName.tar ---->会解压到当前文件夹2. ...