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");