中文前端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内部有这样的实现

image

在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

原文地址:https://www.cnblogs.com/xueduanyang/p/2546754.html