號外: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