博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
seajs使用收集
阅读量:5060 次
发布时间:2019-06-12

本文共 2569 字,大约阅读时间需要 8 分钟。

  新项目使用上了很多新的技术,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");

 

    

        

转载于:https://www.cnblogs.com/apoo/p/3378841.html

你可能感兴趣的文章
设计器 和后台代码的转换 快捷键
查看>>
在线视频播放软件
查看>>
用代码生成器生成的DAL数据访问操作类 基本满足需求了
查看>>
28初识线程
查看>>
Monkey测试结果分析
查看>>
Sublime Text 3 设置
查看>>
浅谈C++底层机制
查看>>
STL——配接器、常用算法使用
查看>>
第9课 uart
查看>>
Range和xrange的区别
查看>>
BZOJ 1010 [HNOI2008]玩具装箱 (斜率优化DP)
查看>>
java-动态规划算法学习笔记
查看>>
STL容器之vector
查看>>
Linux 内核中断内幕
查看>>
DNS负载均衡
查看>>
无法向会话状态服务器发出会话状态请求
查看>>
数据中心虚拟化技术
查看>>
Oracle OEM 配置报错: No value was set for the parameter DBCONTROL_HTTP_PORT 解决方法
查看>>
01入门
查看>>
python正则表达式
查看>>