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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
用javascript编写的第一人称射击游戏
Feb 25 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
webpack4从0搭建组件库的实现
Nov 29 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 保留小数点
2009/04/21 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
用JS实现选项卡
2020/03/23 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
django 自定义用户user模型的三种方法
2014/11/18 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
Python中如何定义一个函数
2016/09/06 面试题
工作自荐信
2013/12/11 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
梅花魂教学反思
2014/04/25 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS