seajs使用收集

　　新項目使用上了不少新的技術，seajs就是其中一種，seajs使用雖不難，但苦於只是國人使用，相關資料並很少，以此隨筆記錄下使用的點點滴滴。

　　1. 不要將模塊用window來進行全局使用

　　項目中使用到了backbone.js框架，骨頭君自己是可模塊化極高的架構，與seajs配合使用很是契合，不過我在看小夥伴們的代碼時，發現其中的類所有使用window來聲明，這裏在使用時的確是方便了，能夠不使用seajs的require來進行模塊加載便可使用，細想之下，雖然方便，但卻徹底違背了使用seajs的初衷，這裏的window聲明是將其中的類聲明成了全局對象，天然能夠不用require，seajs的模塊化思想已經給破壞了，只是將seajs當成JS加載器來使用。

錯誤的方式，使用window來定義全局的視圖類：

define (require) ->
    @Backbone = require('Backbone')
　　 class window.LoginView extends Backbone.View

正確的方式，使用module.exports來定義全局的視圖類：

define (require) ->
    @Backbone = require('Backbone')
    class module.exports.LoginView extends Backbone.View

使用的時候，使用require關鍵字來加載模塊

　　2. 如何使用JQuery插件

　　在使用seajs時，不可能避免使用JQuery，在項目中大量編寫了JQuery的插件，使用以下方式來包裝JQuery插件。

define((require) ->
    return(jquery)->
         (($)->
            $.extend($.fn, {
                         #XXX插件的具體內容
                     });
         )(jQuery); 
);        

　　使用require加載JQuery插件時，使用以下方式，將$做爲參數傳進jindustry插件中去：

define((require) ->
    $ = require("jquery"); 
    require("jindustry")($);
    $().jIndustry({element:$('#txtIndustry')});
);            

     3. 與 DOM Ready 之間的關係

    先解釋一下DOM Ready是什麼，javascript腳本要對瀏覽器裏的html文檔裏的element生效須要瀏覽器加載html完畢並解析爲DOM後纔可使用javascript來操做其中的element，即「DOM Ready」，常見的就是使用JQuery的ready函數，咱們在使用seajs的use函數來加載「入口」模塊時，都會認爲seajs的use函數內部已經實現了DOM Ready，這裏通過查看官方文檔後得出的結論，seajs是不作任何與DOM Ready有關的事情的，因此寫代碼時可結合JQuery的ready函數來判斷DOM是否Ready。

seajs.use('main',() -> 
  $(document).ready(()-> 
    #XXX
  );
);

    4. 加載未用define包裝的類

    雖然咱們能夠從SPM中下載到大多已經修改好的通用庫，好比JQuery、Bootstrap、Backbone.js、Underscore.js這一些，可是有些時候好比JQuery，咱們會使用放在公共CDN的版本，好比Google JQuery CDN，固然使用CDN的好處小夥伴們能夠另外腦補，這個時候是確定沒有辦法去改造一下JQuery了，這個時候能夠用modify方法來處理JQuery來支持到seajs。

seajs.config({
    alias:{
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min'
    }
    ,preload:["jquery"]
})
seajs.modify('jquery', (require, exports, module)->
     module.exports=jQuery;
);
seajs.use('main');

    5. 測試方便，mock接口

    seajs不僅僅控制了入口也控制了出口，出口返回的信息是可使用modify進行修改的，這樣能夠很方便的對返回值進行mock，這裏使用的例子就是玉伯在PPT裏演示的淘寶中獎那一段，這個仍是很經典的。

require.async("http://xxx/bonus.js",(data) ->
    if(data.status=='1')
        alert('中獎啦')
    else
        alert('很抱歉,你的運氣不是很好,再試一次吧')
)

    中獎不易啊，這個時候經過modify接口對返回值進行mock

seajs.modify('http://xxx/bonus.js',(require,exports) ->
    exports.status = 1
)

    這裏的bonus.js執行完的返回值即會固定爲1。

    6. 如何打開調試功能並顯示調試控制檯

    開啓調試控制檯，這裏首先要先用SPM安裝seajs-style與seajs-debug兩個插件[20131103測試]，再在config裏preload這兩個插件，最後在瀏覽器url處填入?seajs-debug開啓調試窗口。

    

seajs.config({
      preload:["/sea-modules/seajs/seajs-style/1.0.2/seajs-style-debug.js"
,"/sea-modules/seajs/seajs-debug/1.1.1/seajs-debug-debug.js"]
});
seajs.use("./main");