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)
文档
加载单个文件
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 3000Then 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
LoadJS的更多相关文章
- loadjs异步加载javascript回调
function loadjs(url,callback){ var script=document.createElement('script'); script.type=" ...
- JavaScript性能优化
如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...
- JS与APP原生控件交互
"热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...
- 将css和js缓存到localStorage缓存,提高网页响应速度
适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...
- 3.EasyUI学习总结(三)——easyloader源码分析
easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...
- easyloader源码
/** * easyloader - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * ...
- 让javascript显原型!
相信以下的javascript让你读起来痛苦不已,告诉你一下简单的办法,就可以让它显出原型!将第一个单词,即eval换成document.write,然后再运行一下,它立即就原形毕露了! eval(f ...
- Javascript是单线程的深入分析
本来想总结一下的,网上却发现有人已经解释的很清楚了,特转过来. 这也解释了为什么在用自动化测试工具来运行dumrendtree时设定的超时和测试case设定的超时的关联性. 面试的时候发现99%的童鞋 ...
- Rhino+envjs-1.2.js 在java运行网站js 工具类
java爬虫遇到个页面加密的东西,找了些资料学习学习 做了个java运行js的工具类,希望对大家有用,其中用到client(获取js)可以自行换成自己的client.主要是用了 Rhino就是Java ...
随机推荐
- javascript弹出层-DEMO001
首先上一张图 看下弹出层的效果 从图中可以看到二部分 一是弹出层 二是遮照层 弹出层:即弹出你要操作的内容 遮照层:遮照住不要操作的内空 实际技术原理主要是 CSS +JS (z-index是核心) ...
- 测试网站访问速度的方法(GTmetrix)
全方位的免费网站速度测试工具 — GTmetrix 它结合了Google Page Speed和Yahoo! YSlow的网页速度测试功能,并且提供可行的建议帮你改善网站速度.会根据网站的具体情况, ...
- 第二百八十一节,MySQL数据库-SQL注入和pymysql模块防止SQL注入
MySQL数据库-SQL注入和pymysql模块防止SQL注入 SQL注入就是通过SQL语句绕开程序判断,获取到数据库的内容 下面以一个简单的程序登录SQL注入举例: 正常登录 1.数据库有一张会员表 ...
- DTD与XML Schema都是XML文档。(选择1项)
DTD与XML Schema都是XML文档.(选择1项) A.正确 B.不正确 解答:DTD不是XML文件, schema是XML文档
- linux改动登陆主机提示信息
寻常管理着130多台Linux物理主机.真正搞清楚每一台主机的IP信息.应用部署比較麻烦! 所以在部署之初,必须规划好: 写一个脚本.把主机IP.管理员联系方法,应用部署等主机信息放在.sh里面 sh ...
- 学习:erlang用链表实现大容量的List或者数组。
链表的内在实质. 效率未知,待测.
- GitHub Permission to <<repository>> denied to <<username>>
I kept receiving a 403 error saying my usual username couldn’t access the repository with my usual a ...
- hdu 1022:Train Problem I(数据结构,栈,递归,dfs)
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- MFC 单选按钮Radio使用注意
使用MFC Radio时遇到问题:数据交换时出现断言崩溃框 定位于: 解决方法: 1.按CTRL+D,保证同一组内的radio的tab序号是连续的: 2.同一组内,设置 radio1的属性: gro ...
- python3----输出所有大小写字母及数字
1. 用一行输出所有大(小)写字母,以及数字 print([chr(i) for i in range(65, 91)]) # 所有大写字母 print([chr(i) for i in range( ...