中文前端UI框架Kit（十三）使用RequireJs托管你的类库和js代码

号外：kitjs官方讨论QQ群建立了，QQ群号88093625，欢迎大家加入，讨论前端相关话题

kit内置支持requireJs托管，可以使用requireJs加载和管理KitJs框架内的所有组件和类库

最近园子里有很多讨论requireJs（http://requirejs.org/）的兄弟，requireJs托管js代码的好处有

1.通过闭包提供了一个安全沙箱，保证js代码不会互相污染

2.基于AMD规范，支持了js的依赖关系，实现了依赖载入

3.对于大量跨域，或者大量重复的依赖，提供一个基于程序的打包合并压缩的工具

 

kitjs整合了requireJs的好处是，可以让显式申明在网页的js加载更少，同事也让kitjs可以完全模拟jQuery的代码写法

demo地址：http://xueduany.github.com/KitJs/KitJs/demo/Requirejs/t1.html

查看源代码，我们可以看到，整个页面，我们只需要引用require.js一个js，其他文件都是通过同域，异步加载过来的

require(['kit'], function(dependency) {
                define('', ['suger', 'widget/Mask/mask', 'widget/Dialog/dialog'], function($) {
                    var d = new $kit.ui.Dialog();
                    d.init();
                    d.center();
                });
            });
          

先通过require方法载入kit.js的core，然后通过define加载suger.js，在suger.js内部有这样的实现

在suger.js代码内部申明了suger.js模块的依赖关系，同时定义了suger.js模块返回对象为$kit.$方法，把这个方法传给后面的匿名方法的第一个参数$，这样就可以用 $符号使用$kit.$方法了，这样写出来的js代码就和jQuery代码完全一样。^^

 

需要注意的是，requireJs的define方法加载的模块，只有在代码内部定义了返回值时，才有返回对象，如果没有定义则和普通的异步加载js并执行无异，只是多了一个js依赖关系

有了这个依赖关系，我们确实可以省去显式申请很多的js代码的依赖了，是不？同学，赶紧试一试吧

 

jsdoc地址：http://xueduany.github.com/jsdoc/out/global.html#define