SeaJS 与 RequireJS 的差异对比

 更新时间:2014年12月08日 10:35:10   投稿:junjie  
这篇文章主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下

“历史不是过去,历史正在上演。随着 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函数的包裹即可。

总结

从规范上来说,AMD 更加简单且严谨,适用性更广,而在 RequireJS 强力的推动下,在国外几乎成了事实上的异步模块标准,各大类库也相继支持 AMD 规范。

但从 SeaJS 与 CMD 来说,也做了很多不错东西:

1、相对自然的依赖声明风格
2、小而美的内部实现
3、贴心的外围功能设计
4、更好的中文社区支持

如果有可能,我希望看到 SeaJS 也支持 AMD,与前端社区大环境保持一致最终幸福的是广大开发者。

相关文章

  • AngularJs验证重复密码的方法(两种)

    AngularJs验证重复密码的方法(两种)

    本文给大家介绍angularjs验证重复密码的两种方法,每种方法都有各自的优缺点,大家可以根据需要选择一种方法,具体内容详情大家通过本文详细了解下吧
    2016-11-11
  • Angular表单验证实例详解

    Angular表单验证实例详解

    这篇文章主要介绍了angular表单验证的相关知识,angular来验证可以定义样式的,下文通过代码给大家实例介绍下,需要的朋友可以参考下
    2016-10-10
  • AngularJS基础 ng-include 指令简单示例

    AngularJS基础 ng-include 指令简单示例

    本文主要介绍AngularJS ng-include 指令,这里对ng-include的基本知识做了整理,并附有代码实例,有需要的朋友可以参考下
    2016-08-08
  • Angular多选、全选、批量选择操作实例代码

    Angular多选、全选、批量选择操作实例代码

    列表批量选择是一个开发人员经常遇到的功能,列表批量选择的实现方式很多,这篇文章主要介绍了Angular多选、全选、批量选择实例代码,有兴趣的可以了解一下。
    2017-03-03
  • 使用Angular.js实现简单的购物车功能

    使用Angular.js实现简单的购物车功能

    在各大购物网站大家都可以简单购物车效果演示,下面通过本文给大家分享一段代码关于使用Angular.js实现简单的购物车功能,需要的朋友可以参考下
    2016-11-11
  • 详解angular中使用echarts地图

    详解angular中使用echarts地图

    这篇文章主要为大家介绍了angular中使用echarts地图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 简介可以自动完成UI的AngularJS工具angular-smarty

    简介可以自动完成UI的AngularJS工具angular-smarty

    这篇文章主要介绍了简介可以自动完成UI的AngularJS工具angular-smarty,包括其中隔离作用域绑定指令符和promise的使用,需要的朋友可以参考下
    2015-06-06
  • angular中实现控制器之间传递参数的方式

    angular中实现控制器之间传递参数的方式

    本篇文章主要介绍了angular中实现控制器之间传递参数的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • Angular 4.0学习教程之架构详解

    Angular 4.0学习教程之架构详解

    作为一种大受欢迎的Web应用程序框架,Angular终于迎来了版本4.0,下面这篇文章主要给大家介绍了关于Angular 4.0学习教程之架构的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • Angular.js中用ng-repeat-start实现自定义显示

    Angular.js中用ng-repeat-start实现自定义显示

    大家都知道Angular.js可以用ng-repeat来显示列表数据,可是如果想要自定义显示数据列表的话ng-repeat就实现不了了,这个时候可以利用ng-repeat-start 和 ng-repeat-end来实现,下面通过本文来详细看看实现的方法吧。
    2016-10-10

最新评论