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

国外的像基于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是一个开源的项目,你可以在下边的地址找到它的源代码或者下载它使用。

用In.js颗粒化管理、加载你的Javascript模块
http://project.benben.cc/In
http://github.com/PaulGuo/In

关于作者

Author: Guokai

(0)

相关推荐

  • seaJs的模块定义和模块加载浅析

    SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式.SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非常少,SeaJS 就两个核心:模块定义和 模块的加载及依赖关系.SeaJS非常强大,SeaJS可以加载任意 JavaScript 模块和css模块样式,SeaJS会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中.玉伯的说法,SeaJS可以让你享受写代码的乐趣,

  • Windows下使用apache模块实现合并多个js、css提高网页加载速度

    现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础上修改的,感谢他们的工作. 原有的mod_concat模块有很大的参考价值,但实际作用不大. 该模块存在以下三个问题: 1.每次都会重新向客户端发数据,没有合理利用浏览器

  • js模块加载方式浅析

    简介: 前端模块化开发日渐鼎盛,如何将零散的插件或者是普通的js脚本文件统一管理及引用,是众多开发者共同的目标.本人是从事.net开发的,最近对前端的一些东西特别的感兴趣,也会尝试的夹杂一点自己的想法,写一些小东西.东西不牛逼,但是感觉用起来还是方便那么一点的. 下面就展示一下简短的小代码. 中心思想:通过外部调用事先封装好的模块加载方法,传入参数(包括主目录及模块js或者css的目录 ),在程序运行的同时,会动态的将相应的css或者是js代码追加引用到head标签内,这样,就可以使用被引用的文

  • Node.js模块加载详解

    JavaScript是世界上使用频率最高的编程语言之一,它是Web世界的通用语言,被所有浏览器所使用.JavaScript的诞生要追溯到Netscape那个时代,它的核心内容被仓促的开发出来,用以对抗Microsoft,参与当时白热化的浏览器大战.由于过早的发布,无可避免的造成了它的一些不太好的特性. 尽管它的开发时间很短,但是JavaScript依然具备了很多强大的特性,不过,每个脚本共享一个全局命名空间这个特性除外. 一旦Web页面加载了JavaScript代码,它就会被注入到全局命名空间,

  • 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

    看了"使用hibernate实现树形结构无限级分类"这篇文章后,我也想将自己在所有开发的项目中使用的功能模块树的实现方法以及完整DEMO(含源码)贴出来和大家分享.其实在我的博客里是老早贴出来的,由于时间关系没好好整理.        功能模块树是几乎在每个项目里都要用到的东西,利用Dojo的好处就是可以实现树的子节点的动态加载,这在树节点很多的情况下是很有用的.         下载附件二dojotree.rar,解压后将dist\dojotree.war部署到应用服务器即可浏览DE

  • 深入探寻seajs的模块化与加载方式

    由于一直在使用,所以了解了下seajs的源代码.这里是我对下面几个问题的理解: 1.seajs的require(XXX)的方法是怎样实现模块加载的? 2.为什么需要预加载? 3.为什么需要构建工具? 4.构建前后的代码究竟有些什么区别,为什么要这么做? 问题1: seajs的require(XXX)的方法是怎样实现模块加载的? 代码逻辑比较绕,对源代码的理解放在文章的末尾,这里先简单梳理下模块加载的逻辑: 1.从seajs.use方法入口,开始加载use到的模块. 2.use到的模块这时mod缓

  • 根据配置文件加载js依赖模块

    要求: 根据下面的配置文件 复制代码 代码如下: module=[ {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'}, {'name':'swfobject','src':'/js/utils/swfobject.js'}, {'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']}, {'name':'uploadify','src':'/js/u

  • Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美实现

    中午的时候发了第一篇 Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块 ,发现实现上还是有问题,有很多理解不到位的地方,晚上详细解决下了,终于实现MVC各模块按需加载了,哈皮. 上篇文章中,关于ExtJs这个玩意的评论就跟java和.Net那个好一样,既然上了贼船,就难下了,而且对于企业级的应用我个人觉得Extjs框架还是不错的,尤其是没有UI设计的团队(苦逼的程序员就兼UI吧),起码难得发现一个做的比较好的UI框架(国产的miniUI貌似看的过去,其他的就有点

  • node.js使用require()函数加载模块

    详细说明均以写在注释之中,这里就不啰嗦了,小伙伴们自己详细看吧,千万别吧注释当成空气了. 复制代码 代码如下: /*在node中,可以使用require()函数来加载模块.  * require函数使用一个参数,参数值可以带有完整路径的模块的文件名,也可以为模块名.当使用node中提供的模块时,在require函数中只需要指定模块名即可.  * */ //建立一个页面2.js;代码如下 var name="思思博士"; exports.name=name; //建立一个页面1.js;代

  • AngularJs动态加载模块和依赖注入详解

    废话不多说,进入正题... 首先我们看下文件结构: Angular-ocLazyLoad --- demo文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-cont

随机推荐