Foreign like based on jquery Requirejs,yui Loader,labjs,runjs, the domestic also has the seajs of Taobao, watercress Dojs, these are some very good module loader. But this article will introduce you to a new open source lightweight "multi-threaded" asynchronous module loader in.js,in The development of a do some of the ideas and use habits, during this period of thanks to @kejun and my patience, in.js compressed only 4.77k, not only small and very useful.
Advantages:
Load on Demand
No blocking loading
Dependency Management
Granular management of modules
How to use it?
A. Introduction of In.js
Copy Code code as follows:
<script type= "Text/javascript" src= "In.js" autoload= "true" core= "Jquery.min.js" ></script>
You only need to introduce in.js at the top of the page, and here are two parameters to note:
AutoLoad: Whether to load the underlying core library –{optional parameters when loading in.js –true|false}
Core: path to the underlying core library –{optional Parameters –url}
If the core is set and Autoload=true, the core is loaded into the page while the in.js is introduced.
B. Declaring addresses and dependencies for each module in.add (Name,{config})
Copy Code code as follows:
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 ']});
The above code declares the dependencies of the three modules and the addresses of the modules and joins them in the queue (just to join the queue and not load it into the page).
C. Load queue in (queue)
Copy Code code as follows:
var demo=in (' Mod-b ', function () {
Do something
},function () {
Do something
return false;
});
Load the Mod-b module and execute Functiona and functionb after loading, this assumes that when In.js is introduced, Autoload=true is set, then the load order in the queue is:
1 jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functiona () >>> functi ONB ()
When the queue is fully loaded, the demo is assigned an array that holds the return value of each function:
1 Demo={returns:[undefined,false],complete:true}
D. Load queue after Domready In.ready (queue)
Copy Code code as follows:
In.ready (' Mod-b ', function () {
Do something
});
Queue load Order:
Jquery.min.js >>> {domready} >>> mod-a >>> mod-b-css >>> mod-b >>> function ()
The difference between In.ready () and in () is two points:
Queues in In.ready () do not perform in.ready () after Domready () no return value E. Monitor variable changes, value changes Execute callback In.watch (Object,property,function (prop,old,new) {})
Because in-load queues are asynchronous, non-blocking, sometimes for special requirements (such as the return value of a function in the queue for subsequent operations), we need to make sure that the queue execution is completed before performing a subsequent operation. In this case, you can listen to the return.complete variable with In.watch (), and execute the callback function when return.complete==true, the code is as follows:
Copy Code code as follows:
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 the charm of more than these, its reliability has been in several major projects have been confirmed, in addition, in also has intelligent hints, for example, if you use in () to load a previously undeclared module, you will be prompted to check the module name. Sincerely hope that there are more front-end friends in, use in, and even into the follow-up development in.
The following image is an atlas of the English version of In.js:
Where to download?
In.js is an Open-source project where you can find its source code or download it for use at the bottom of the address.
Manage and load your JavaScript module with in.js granular
Http://project.benben.cc/In
Http://github.com/PaulGuo/In
About the author
Author:guokai
