中文前端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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM