in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案


Posted in Javascript onJuly 26, 2011

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

优点:
按需加载
无阻塞加载
依赖关系管理
颗粒化模块管理
如何使用?
A.引入In.js

<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})
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)
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()
队列全部加载完成后,demo会被赋值为一个数组,其中存放的是每个function的返回值:
1 demo={returns:[undefined,false],complete:true}
D.在domReady之后加载队列In.ready(queue)
In.ready('mod-b',function() { 
//do something 
});

队列加载顺序:
jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()
In.ready()和In()的区别在于两点:
In.ready()中的队列只有在domReady之后才会执行 In.ready()没有返回值 E.监听变量变化,值改变则执行回调In.watch(object,property,function(prop,old,new) {})
由于In加载的队列均为异步非阻塞式加载,所以有时候为了特殊需求(比如后续的操作依赖队列中function的返回值),我们需要在确保队列执行完成后,再执行后续操作。这种情况下,可以用In.watch()监听return.complete变量,当 return.complete==true的时候执行回调函数,代码如下:
var model=In('model',function() { 
//do something 
return 123; 
}); 
In.watch(model,'complete',function(prop,old,new) { 
if(model[prop]==true) { 
console.log(model.returns[0]);//print 123 
In.unwatch(model,prop);//destroy the watch event of model.complete 
} 
});

In的魅力远远不止上述这些,它的可靠性也已经在几个大项目中得到了印证,除此之外,In也有智能的提示,比如如果用In()加载一个事先未声明的模块,就会提示你检查模块名。真心的希望有更多的前端朋友关注In,使用In,甚至投入到In的后续开发中来。

下图是In.js的英文版使用图册:

in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案

在哪下载?

In.js是一个开源的项目,你可以在下边的地址找到它的源代码或者下载它使用。

用In.js颗粒化管理、加载你的Javascript模块

http://project.benben.cc/In

http://github.com/PaulGuo/In

关于作者

Author: Guokai

Javascript 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
javascript 强制刷新页面的实现代码
Dec 13 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
taro开发微信小程序的实践
May 21 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 #Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 #Javascript
jQuery选择器的工作原理和优化分析
Jul 25 #Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 #Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 #Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 #Javascript
JS 自定义带默认值的函数
Jul 21 #Javascript
You might like
php中in_array函数用法分析
2014/11/15 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
Python中asyncore的用法实例
2014/09/29 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
python中pass语句用法实例分析
2015/04/30 Python
python魔法方法-自定义序列详解
2016/07/21 Python
python类中super()和__init__()的区别
2016/10/18 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python 伯努利分布详解
2020/02/25 Python
如何用Python 加密文件
2020/09/10 Python
python中altair可视化库实例用法
2021/01/26 Python
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
SQL中where和having的区别
2012/06/17 面试题
网络编辑岗位职责
2014/03/18 职场文书
家长对孩子的评语
2014/04/18 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
Python实现简繁体转换
2021/06/07 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python