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 图片等比例缩放代码
May 13 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
理解javascript模块化
Mar 28 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
JavaScript实现下拉列表
Jan 20 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
wordpress之wp-settings.php
2007/08/17 PHP
php中OR与|| AND与&&的区别总结
2013/10/26 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python语言中有算法吗
2020/06/16 Python
详解Python 最短匹配模式
2020/07/29 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
护士求职推荐信范文
2013/11/23 职场文书
学习交流会主持词
2014/04/01 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
设置IIS Express并发数
2022/07/07 Servers