新项目使用上了很多新的技术,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的版本,比如,当然使用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,这里使用的例子就是玉伯在里演示的淘宝中奖那一段,这个还是很经典的。
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. 如何打开调试功能并显示调试控制台
开启调试控制台,这里首先要先用安装与两个插件[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");