In.js a lightweight JavaScript granular modular loading and dependency management solution _javascript Tips

Source: Internet
Author: User
Tags autoload
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.

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 (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 (), 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;
}); (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



About the author


Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.