Speed up the load on the page: Asynchronous module Loader in.js

Article Introduction: use in.js granular to manage and load your JavaScript modules.

In the past year, both at home and abroad are very enthusiastic about the research of asynchronous loading, in order to speed up the loading speed of the page, non-blocking loading JavaScript method and framework has become the focus of front-end development and one of the highlights.

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

1	<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 –truefalse}
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})

1 2 3

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)

1 2 3 4 5 6

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 () >>> FUNCTIONB ()

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)

1 2 3

In.ready ("Mod-b", function () { //do something });

Queue load Order:

1	Jquery.min.js >>> {domready} >>> mod-a >>> mod-b-css >>> mod-b >>> function ()

The difference between In.ready () and in () is two points:

1. Queues in In.ready () are executed only after Domready
2. In.ready () has no return value

E. Monitor variable change, value change 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:

1 2 3 4 5 6 7 8 9 10

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

————————-Gorgeous split Line ————————-

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.

Http://project.benben.cc/In
Http://github.com/PaulGuo/In

About the author

Author:guokai ( Tencent micro-blog / Twitter / Google + / Blog)
Email/gtalk:badkaikai@gmail.com