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中各种编码解码函数的区别和注意事项
Aug 19 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
js切换div css注意的细节
Dec 10 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
JScript实现地址选择功能
Aug 15 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python的randrange()方法使用教程
2015/05/15 Python
python中私有函数调用方法解密
2016/04/29 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python线程threading模块用法详解
2020/02/26 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
工作证明英文模板
2014/10/21 职场文书
实习证明格式范文
2015/06/16 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
公司考勤管理制度
2015/08/04 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Python 内置函数速查表一览
2021/06/02 Python
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js