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 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
javascript 节点排序 2
Jan 31 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
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
加速XP搜索功能堪比vista
2007/03/22 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
js一组验证函数
2008/12/20 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
Vue中v-for的数据分组实例
2018/03/07 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
python实现备份目录的方法
2015/08/03 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
班组长工作职责
2013/12/25 职场文书
大学新生欢迎词
2014/01/10 职场文书
毕业生工作求职信
2014/06/30 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
nginx lua 操作 mysql
2022/05/15 Servers