`
lifesinger
  • 浏览: 23294 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

从 RequireJS 到 SeaJS

阅读更多
RequireJS 发布 1.0.0 了,很值得关注,看是否有可借鉴之处。
本次比较不涉及具体实现代码,主要比较两者的 API 设计。

http://requirejs.org
http://seajs.com


从定位谈起

首先,从 http://requirejs.org 首页可以得知,RequireJS 的定位是:
RequireJS 是一个 JavaScript 文件和模块加载器,特别为浏览器优化,同时也可运行在 Rhino 和 Node 环境中。

SeaJS 的定位是:
SeaJS 是一个适用于浏览器端的 JavaScript 模块加载器。

不要小看这两句话,任何类库/框架的定位,或者说愿景/目标,最终会决定该类库/框架的方方面面。比如:

RequireJS 的定位中,除了是模块加载器,还是文件加载器,这决定了 RequireJS 需要实现类似 LABjs 等 script loader 的功能。LABjs 的核心功能是异步加载脚本并提供运行的依赖等待:
$LAB
   .script("a.js")
   .script("b.js").wait()
   .script("c.js");


为了提供类似功能,RequireJS 开发了 order 插件:
require(["order!one.js", "order!two.js", "order!three.js"], function () {
    //This callback is called after the three scripts finish loading.
});


order 功能是 JavaScript 文件加载器必备的功能,RequireJS 有文件加载器的定位,因此才有了 order 插件的设计。

而对于 SeaJS 来说,定位为很纯粹的模块加载器,因此不需要考虑普通脚本的 order 加载,如果需要脚本加载功能,直接和 LABjs 一块用就好:
define(function(require) {
  var $LAB = require('labjs/2.0.3/lab.js');

   $LAB
      .script('a.js')
      .script('b.js').wait()
      .scrpt('c.js');
);

SeaJS 推荐用组合的思路解决问题:LABjs + SeaJS = JavaScript 文件和模块加载器。

上面是 SeaJS 的狭义定位,SeaJS 还有一个广义定位:
SeaJS 是浏览器端的 NodeJS.

在广义定位下,SeaJS 包括以下部分:
1. 一套模块书写格式。
2. 一个适用于浏览器端的模块加载器。
3. 一组默认推荐的模块。
4. 类似 npm 的包管理工具。
5. 调试等开发者工具。
6. 等等。

狭义定位对应 github 中的:https://github.com/seajs/seajs
广义定位对应 github 中的:https://github.com/seajs

RequireJS 和 SeaJS 狭义定位上的差异,将直接导致两者之间的最佳使用场景和 API  设计差异,后续博文会进一步提及。
SeaJS 广义定位中的定语很重要,是“浏览器端的”,这将直接决定 SeaJS 和 NodeJS 的差异,后续博文会进一步提及。



兼容性

requirejs.org 首页还列举了 RequireJS 支持的浏览器,这和 SeaJS 没什么差异。其实两者涉及到的 DOM 操作都不多,大部分代码是纯 JavaScript 代码,兼容性上都很不错。


参考文章

1. http://blog.getify.com/2010/12/on-script-loaders/


后续博文地址:http://lifesinger.wordpress.com/
分享到:
评论
1 楼 satans17 2011-10-26  
这是一个沙发?

相关推荐

    LABjs、RequireJS、SeaJS的区别

    二、RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然。模块加载器也可降级为文件加载器用,因此使用 RequireJS 和 SeaJS,也可以达成 LABjs ...

    前端模块化进程-requirejs seajs

    requirejs seajs amd cmd,该PPT主要用于讲解前端模块化的前世今身。 requirejs seajs amd cmd,该PPT主要用于讲解前端模块化的前世今身。

    SeaJS与RequireJS区别

    **SeaJS 和 RequireJS 是两种广泛使用的 JavaScript 模块加载器和依赖管理工具,它们的主要目的是解决 JavaScript 在浏览器端的异步加载和模块化问题。** **SeaJS** SeaJS 是一个轻量级的模块加载器,由中国淘宝...

    SeaJS 与 RequireJS 的差异对比

    SeaJS 和 RequireJS 是两种流行的JavaScript模块加载器,它们遵循不同的规范:CMD(Common Module Definition)和AMD(Asynchronous Module Definition)。这两者都是为了解决JavaScript的异步加载和模块化问题,但...

    Require-Seajs:js模块化

    模块化js常用的工具Requirejs和Seajs, Requirejs是按照AMD的规范来定义模块的,Seajs是按照CMD的规范来定义模块的.Requirejs 与 Seajs 的最大区别:执行模块的机制不同RequireJS对模块的态度是预执行,也就是所依赖...

    轻松入门React和Webpack中文WORD版

    Webpack是一个打包工具,而不是像RequireJS或SeaJS这样的模块加载器,通过使用Webpack,能够像Node.js一样处理依赖关系,然后解析出模块之间的依赖,将代码打包;感兴趣的朋友可以过来看看资源截图: 资源太大,传...

    klcs:客户端工具函数集合库,针对工作中在客户端环境,需要用到的常用需求进行了封装,需要undescore,jQuery的配合只兼容chrome以及IE8以上浏览器,省去多次提取,或者编写函数导致的重复劳动。如提取cookie,以及提取链接参数的字符串,兼容了requireJS与seaJS的打包

    方法:借鉴底线库的工具框架,包含一些常用方法,在兼容AMD模式的同时,兼顾了CMD# 下载依赖$ npm install# 开发环境(开启本地热服务)$ npm run start# 生产环境(输出压缩后代码)$ npm run product博客日期2016-10-18...

    RequiresJS_2.0_API中文

    requirejs define,requirejs 教程,requirejs 中文,requirejs shim, seajs require,requirejs seajs ,requirejs css,requirejs api, requirejs require

    JavaScript模块管理的简单实现方式详解

    2. 为什么不用requirejs,seajs等 它们功能强大,但是文件体积是个问题,此外还有就是业务有时候可能没那么复杂,正如开头所说的:keep it simple 3. 以下的实现从哪里来的? 这些借鉴了requirejs,seajs,commonjs等...

    基于RequireJS和JQuery的模块化编程——常见问题全面解析

    最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是seajs的时候,最终还是偏向于requirejs。毕竟官方文档比较专业嘛… 不过即便是有完整的官方文档,仍然遇到不少的问题,比如jquery-ui的使用。 下面...

    seajs和requirejs模块化简单案例分析

    本文将深入探讨Seajs和RequireJS这两款经典的模块化工具,并通过具体的案例来阐述它们的工作原理和使用技巧。 Seajs是一款基于CMD(Common Module Definition)规范的模块加载器,它允许开发者按需加载模块,避免了...

    JavaScript 模块化开发实例详解【seajs、requirejs库使用】

    Seajs和RequireJS是两种常见的JavaScript模块化解决方案库,它们都是基于AMD(Asynchronous Module Definition)规范的实现。 Seajs是一个轻量级的模块加载器,它的核心特性包括: 1. **模块定义**:使用`define`...

    ES6新特性:使用export和import实现模块化详解

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了...

    seajs入门小实例

    Seajs 的设计思想深受CommonJS的影响,但考虑到浏览器环境的特性,它并没有直接采用CommonJS的实现方式,而是提出了自己的解决方案。 1. **模块定义与加载** Seajs 使用 `define` 方法来定义模块,其基本语法为: ...

    seajs-2.1.1.rar

    AMD(Asynchronous Module Definition)和CMD是两种JavaScript模块化的实现方式,RequireJS是AMD的代表,而Seajs遵循CMD。两者主要区别在于: - AMD强调异步加载,依赖前置;CMD则支持异步和同步,依赖后置。 - AMD...

    基于RequireJS和JQuery的模块化编程日常问题解析

    RequireJS 和 SeaJS 是两种常用的 JavaScript 模块化加载框架,它们都遵循着各自的模块定义标准——AMD(Asynchronous Module Definition)和 CMD(Common Module Definition)。 **AMD** 的代表是 RequireJS,它的...

    基于seajs的前端开发

    虽然Seajs基于CommonJS,但其内部实现了AMD(Asynchronous Module Definition)的适配,这意味着它能够与RequireJS等遵循AMD规范的库协同工作,增加了其在不同项目中的适用性。 4. ** Sea.js配置** Seajs允许...

    ES6使用export和import实现模块化的方法

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了...

Global site tag (gtag.js) - Google Analytics