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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
js操作二级联动实现代码
Jul 27 Javascript
javascript new fun的执行过程
Aug 05 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 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
PHP 采集程序原理分析篇
2010/03/05 PHP
php取得字符串首字母的方法
2015/03/25 PHP
php时间函数用法分析
2016/05/28 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
通过cmd进入python的实例操作
2019/06/26 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python 实现视频 图像帧提取
2019/12/10 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
踏青活动策划方案
2014/08/19 职场文书
生产操作工岗位职责
2014/09/16 职场文书
师德师风自查材料
2014/10/14 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2015年学校工作总结范文
2015/04/20 职场文书