中文前端UI框架Kit(十三)使用RequireJs托管你的类库和js代码
2012-06-12 18:54
555 查看
号外: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,其他文件都是通过同域,异步加载过来的
在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
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内部有这样的实现define('', ['suger', 'widget/Mask/mask', 'widget/Dialog/dialog'], function($) {
var d = new $kit.ui.Dialog();
d.init();
d.center();
});
});
在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
相关文章推荐
- thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
- 中文前端UI框架Kit(六)javascript动画代码实现原理和一些小技巧
- 中文前端UI框架Kit(二)kitjs组件代码解析
- web—前端之使用的js代码1
- ajax拖动层,保存层位置,这段代码是从网络人扒拉下来的(非XAJAX),使用类库prototype.js,感觉效果非常好
- 不要再吹水地球人听不懂的技术,咱来点干货!--中文前端UI框架Kit(四)给你真正的原生的drag以及drop事件,而不是像市面上主流的Js框架jQuery,Ext等,利用mousemove事件,判断位置来模拟
- ajax拖动层,保存层位置,这段代码是从网络人扒拉下来的(非XAJAX),使用类库prototype.js,感觉效果非常好
- Duang~Duang~Duang 还在使用jsfiddle和jsbin做在线前端代码展示和演示吗? 试试更强大的在线代码分享工具吧!
- ajax拖动层,保存层位置,这段代码是从网络人扒拉下来的(非XAJAX),使用类库prototype.js,感觉效果非常好
- ajax拖动层,保存层位置,这段代码是从网络人扒拉下来的(非XAJAX),使用类库prototype.js,感觉效果非常好
- 使用Node.js处理前端代码文件的编码问题
- 第7章-使用ORM类库Mongoose提升你的Node.js数据-7.3.使用钩子保持代码的逻辑清晰
- 前端模块化实践----使用webpack打包js代码
- 不要再吹水地球人听不懂的技术,咱来点干货!--中文前端UI框架Kit(二)kitjs组件代码解析
- 【前端】使用JS替换URL的参数(代码案例)
- 使用Node.js处理前端代码文件的编码问题
- glup前端代码打包的使用
- 使用 browserify 创建 node服务端和前端共通的js
- 使用JS代码打印 修改博客园(或网站)的title
- 使用ant来压缩js代码,这个很有用