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 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
九种原生js动画效果
Nov 11 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Vue实现双向数据绑定
May 03 Javascript
原生js轮播特效
May 18 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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 文件状态缓存带来的问题
2008/12/14 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JS实现打字游戏
2019/12/17 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
毕业生多媒体设计求职信
2013/10/12 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
质量承诺书怎么写
2014/05/24 职场文书
民生工作实施方案
2014/05/31 职场文书
节约用水标语
2014/06/11 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Golang并发工具Singleflight
2022/05/06 Golang
win10搭建配置ftp服务器的方法
2022/08/05 Servers