Chinese front-end UI framework kit (13) Use requirejs to host your class library and JS Code

No.: kitjs officially discussed the establishment of the QQ group and QQ Group No. 88093625. You are welcome to join the discussion on front-end topics.

Kit built-in support for requirejs hosting, you can use requirejs to load and manage all the components and class libraries in the kitjs framework

Recently there are many discussions in the garden about requirejs (http://requirejs.org/) Brothers, requirejs hosting JSCodeBenefits:

1. A security sandbox is provided through closures to ensure that JS Code is not contaminated with each other.

2. Based on AMD specifications, it supports JS dependencies and achieves dependency loading.

3. ProvidesProgramTool for packaging, merging, and compressing

 

The advantage of integrating requirejs with kitjs is that it allows explicit declarations to load less JavaScript code on the web page. colleagues also allow kitjs to fully simulate jquery code writing.

Demo address: http://xueduany.github.com/KitJs/KitJs/demo/Requirejs/t1.html

ViewSource codeWe can see that the entire page only needs to reference a JS file in require. js. Other files are asynchronously loaded through the same domain.

Require (['kit'], function (dependency ){
Define ('', ['suger ', 'widget/mask/Mask', 'widget/dialog'], function ($ ){
VaR d = new $ kit. UI. Dialog ();
D. INIT ();
D. Center ();
});
});

First load the core of Kit. js through the require method, and then load Suger. js through define. This implementation is available in Suger. js.

In Suger. the JS Code declares Suger. the dependency between the JS module and the Suger. the JS module returns $ kit. $ method: pass this method to the first parameter $ of the subsequent anonymous method. In this way, you can use the $ symbol to use $ kit. $ method. In this way, the written JS Code is exactly the same as the jquery code. ^

 

It should be noted that the modules loaded by the define method of requirejs only return objects when the return value is defined in the Code, if there is no definition, it is similar to loading JS asynchronously and executing it, but there is an additional JS dependency.

With this dependency, we can indeed save the need to explicitly apply for many JS Code dependencies, right? Please try it.

 

Jsdoc address: http://xueduany.github.com/jsdoc/out/global.html#define