加快页面的载入速度:异步模块加载器In.js

近一年来，国内外都十分热衷于异步加载的研究，为了加快页面的载入速度，无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。

国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js，In的开发借鉴了Do的一些思路和使用习惯，在此期间感谢@kejun同我的耐心交流，In.js压缩后只有4.77k，不仅小巧而且十分好用。

优点：

• 按需加载
• 无阻塞加载
• 依赖关系管理
• 颗粒化模块管理

如何使用？

A.引入In.js

1

<script type="text/javascript" src="in.js" autoload="true" core="jquery.min.js"></script>

只需要在页面顶部引入in.js即可，这里有两个参数需要注意：

autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false}
core: 底层核心库的路径 – {可选参数 – url}

如果同时设置了core，并且autoload=true，则在引入In.js的同时加载core到页面中。

B.声明各个模块的地址和依赖关系In.add(name,{config})

1
2
3

In.add(''mod-a'',{path:''mods/a.js'',type:''js'',charset:''utf-8''});
In.add(''mod-b'',{path:''mods/b.js'',type:''js'',charset:''utf-8'',rely:[''mod-b-css'']});
In.add(''mod-b-css'',{path:''mods/b.css'',type:''css'',charset:''utf-8'',rely:[''mod-a'']});

上述代码声明了三个模块的依赖关系和模块的地址，并将它们加入到队列中去（仅仅是加入队列，并没有加载到页面中去）。

C.加载队列In(queue)

1
2
3
4
5
6

var demo=In(''mod-b'',function() {
	//do something
},function() {
	//do something
	return false;
});

加载mod-b模块，加载完后执行functionA和functionB，在此假设引入in.js时设置了autoload=true，那么队列中的加载顺序依次为：

1

jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!