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 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
js中document.write的那点事
Dec 12 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
详解javascript遍历方式
2015/11/11 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
js数组的基本使用总结
2021/01/18 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
迎新生标语大全
2014/10/06 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
小学班主任事迹材料
2014/12/17 职场文书
教师创先争优承诺书
2015/04/27 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python