SeaJS 与 RequireJS 的差异对比


Posted in Javascript onDecember 08, 2014

“历史不是过去,历史正在上演。随着 W3C 等规范、以及浏览器的飞速发展,前端的模块化开发会逐步成为基础设施。一切终究都会成为历史,未来会更好。”——引用玉伯原文最后一段话,我个人也非常赞同。既然谈到了“未来”,我个人认为:前端 js 模块如果继续发展,其模块格式很可能会成为未来 WEB 一种标准规范,产生多种实现方式。就好比 JSON 格式一样,最终成为标准、被浏览器原生实现。

谁更有能成为未来的异步模块标准?SeaJS 遵循 CMD 规范,RequireJS 遵循 AMD 规范,先从这两种不同的格式说起。

CMD

CMD 模块依赖声明方式:

define(function (require) {

    var a = require('./a');

    var b = require('./b');

    // more code ..

})

CMD 依赖是就近声明,通过内部require方法进行声明。但是因为是异步模块,加载器需要提前加载这些模块,所以模块真正使用前需要提取模块里面所有的依赖。无论是加载器即时提取,还是通过自动化工具预先提取,CMD 的这种依赖声明格式只能通过静态分析方式实现,这也正是 CMD 的弊端所在。

CMD 规范的弊端

不能直接压缩:require是局部变量,意味着不能直接的通过压缩工具进行压缩,若require这个变量被替换,加载器与自动化工具将无法获取模块的依赖。
模块书写有额外约定:路径参数不能进行字符串运算,不能使用变量代替,否则加载器与自动化工具无法正确提取路径。
规范之外的约定意味着更多的文档说明,除非它们也是规范中的一部分。

注:SeaJS 静态分析实现是把模块包toString()后使用正则提取require部分得到依赖的模块路径。

AMD

AMD 模块依赖声明方式:

define(['./a', './b'], function (a, b) {

    // more code ..

})

AMD 的依赖是提前声明。这种优势的好处就是依赖无需通过静态分析,无论是加载器还是自动化工具都可以很直接的获取到依赖,规范的定义可以更简单,意味着可能产生更强大的实现,这对加载器与自动化分析工具都是有利的。

AMD 规范的弊端

依赖提前声明在代码书写上不是那么友好。
模块内部与 NodeJS 的 Modules 有一定的差异。
关于第二点的问题需要特别说明下。其实无论是 CMD 还是 AMD 的异步模块,都无法与同步模块规范保持一致(NodeJS 的 Modules),只有谁比谁更像同步模块而已。AMD 要转换为同步模块,除了去掉define函数的包裹外,需要在头部使用require把依赖声明好,而 CMD 只需要去掉define函数的包裹即可。

总结

SeaJS 与 RequireJS 的差异对比

从规范上来说,AMD 更加简单且严谨,适用性更广,而在 RequireJS 强力的推动下,在国外几乎成了事实上的异步模块标准,各大类库也相继支持 AMD 规范。

但从 SeaJS 与 CMD 来说,也做了很多不错东西:

1、相对自然的依赖声明风格
2、小而美的内部实现
3、贴心的外围功能设计
4、更好的中文社区支持

如果有可能,我希望看到 SeaJS 也支持 AMD,与前端社区大环境保持一致最终幸福的是广大开发者。

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
JavaScript中的ArrayBuffer详细介绍
Dec 08 #Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 #Javascript
js继承call()和apply()方法总结
Dec 08 #Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 #Javascript
详解Javascript动态操作CSS
Dec 08 #Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 #Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 #Javascript
You might like
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
event.srcElement+表格应用
2006/08/29 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python中set常用操作汇总
2016/06/30 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
python 常见的反爬虫策略
2020/09/27 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
停发工资证明范本
2015/06/12 职场文书
大学生实习证明
2015/06/16 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
八年级语文教学反思
2016/03/03 职场文书
php引用传递
2021/04/01 PHP
DSP接收机前端设想
2022/04/05 无线电
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL