欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

从 RequireJS 到 SeaJS（2）

发布时间：2024/4/14 javascript 49 豆豆
生活随笔 收集整理的这篇文章主要介绍了 从 RequireJS 到 SeaJS（2） 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

从 requirejs.org 的首页出发，接下来是快速入门和下载，我们来看下载页面：Download

产出物

RequireJS 提供了三个文件：

  • require.js — 这是核心文件，提供 JavaScript 文件和模块加载功能
  • require-jquery.js — 打包了 jquery 最新版本的 require.js
  • r.js — 优化工具，以及让 RequireJS 的模块可运行于 Node 和 Rhino 环境

    • SeaJS 提供的内容，目前也有三部分：

  • sea.js — 模块加载器
  • modules — 可运行在 seajs 环境中的推荐模块，在这里下载 modules.seajs.com
  • spm 等优化和支持工具

    • 如果安装了 spm, 可以用 spm 获取到 seajs 提供的一切：

    1 2 3 $ spm install seajs   # 安装 sea.js $ spm install jquery  # 安装 modules 中的模块 $ spm build a.js      # 压缩、打包等操作

    SeaJS 的这种设计，是由其广义定位（浏览器端的 NodeJS）决定的。在这种设计下：

    1). require-jquery.js 必要性不大，在 SeaJS 里，用户直接手工或用 combo 服务合并就好：

    1 http://a.tbcdn.cn/libs??seajs/1.0.2/sea.js,jquery/1.6.4/jquery.js

    简单灵活，扩展性也好。需要打包其他类库时，只需更改 url 参数。

    2). r.js 在 SeaJS 里也是不必要的。modules 项目中的模块，比如 backbone，目前可以直接运行于三种环境中：

    在浏览器中直接使用：

    1 <script src="http://modules.seajs.com/backbone/0.5.3/backbone.js"></script>

    通过 seajs 加载：

    1 2 3 4 5 <script src="http://modules.seajs.com/seajs/1.0.2/sea.js"></scipt> <script> seajs.use('backbone/0.5.3/backbone', function(BB) { }); </script>

    在 node 中直接调用：

    1 var BB = require('./libs/backbone/0.5.3/backbone');

    SeaJS 的方式接近 NodeJS，简洁优雅，致力于生态圈的形成。

    插件

    RequireJS 提供了一系列插件：text, order, domReady, cs, i18n.

    SeaJS 默认只支持 js 和 css 模块，通过 text、coffee 和 less 插件来扩展支持的模块类型。SeaJS 还提供了 map 插件，方便开发调试：在线本地调试大观。对于 order 功能，推荐组合使用 LABjs 来实现。需要 domReady 时，则使用 jQuery 库。至于 i18n, 感觉放在模块加载框架里不太合适，可以做成独立的国际化模块。

    插件实现机制上，RequireJS 采用的是钩子模式：在 require.js 源码中，主动判断并调用插件代码。

    1 2 3 4 // require.js function callPlugin(pluginName, depManager) {   //... }

    SeaJS 的实现方式是，和原生 JavaScript 类似，暴露 prototype, 插件开发者通过给 prototype 添加新方法或覆盖原有方法来实现插件功能：

    1 2 3 4 5 6 7 8 9 10 11 // plugin-xx.js define(funtion(require, exports, module) {   var Require = require.constructor;   var Module = module.constructor;   // 覆盖原有方法   Require.prototype.resolve = ...   // 添加新方法   Module.prototype.extend = ... });

    这种方式的好处是，在 sea.js 的代码中，合理暴露 prototype 后，就不用怎么为插件考虑了。有了 prototype, 插件作者一定程度上可以“随心所欲”。

    进一步了解，请阅读源码：src/plugins

    小结

    SeaJS 的产出物受广义定位影响，和 RequireJS 的定位是不一样的。后续会进一步分析两者的差异。

    插件的设计无优劣。RequireJS 的方式很简单，对插件作者的要求不高。SeaJS 的插件开发方式，好处是 sea.js 本身可以保持很纯粹，不足之处是需要插件作者对 SeaJS 比较熟悉，入门更高。

    后续博文会分析两者在 API 和使用场景上的差异。

    总结

    以上是生活随笔为你收集整理的从 RequireJS 到 SeaJS（2）的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。