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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
JS实现复制功能
Mar 01 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 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数组是否为索引数组的实现方法
2013/06/13 PHP
PHP Class&Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
python如何实现word批量转HTML
2020/09/30 Python
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
解决方案设计综合面试题
2015/08/31 面试题
挂牌仪式策划方案
2014/05/18 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
城南旧事读书笔记
2015/06/29 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python