SeaJS 从入门到原理

阅读 2089
收藏 133
2016-09-15
原文链接:aotu.io

最近项目中抛弃传统的 seajs.use('./index.js');

直接使用 script 标签同步引入sea.js文件后,就可以使用seajs.use(id, callback?)在页面中加载模块了! 最佳实践:

  • seajs.use 理论上只用于加载启动,不应该出现在 define 中的模块代码里。
  • 为了让 sea.js 内部能快速获取到自身路径,推荐手动加上 id 属性:

讲到seajs.use,当然要提一下Sea.js 的调试接口。

  • seajs.cache:Object,查阅当前模块系统中的所有模块信息。
  • seajs.resolve:Function,利用模块系统的内部机制对传入的字符串参数进行路径解析。
  • seajs.require:Function,全局的 require 方法,可用来直接获取模块接口。
  • seajs.data:Object,查看 seajs 所有配置以及一些内部变量的值。
  • seajs.log:Function,由 seajs-log 插件提供。
  • seajs.find:Function,由 seajs-debug 插件提供。

6、 模块加载大体流程

模块加载大体流程: 模块加载 文字描述:

  1. 通过 use 方法来加载入口模块,并接收一个回调函数, 当模块加载完成, 会调用回调函数,并传入对应的模块作为参数。
  2. 从缓存或创建并加载 来获取到模块后,等待模块(包括模块依赖的模块)加载完成会调用回调函数。
  3. 在图片虚线部分中,加载factory及分析出模块的依赖,按依赖关系递归执行 document.createElement(‘script’) 。

7、与RequireJS的主要区别

7.1、遵循的规范不同

RequireJS 遵循 AMD(异步模块定义)规范,SeaJS 遵循 CMD (通用模块定义)规范。

7.2、factory 的执行时机不同

SeaJS按需执行依赖避免浪费,但是require时才解析的行为对性能有影响。
SeaJS是异步加载模块的没错, 但执行模块的顺序也是严格按照模块在代码中出现(require)的顺序。 RequireJS更遵从js异步编程方式,提前执行依赖输出顺序取决于哪个 js 先加载完(不过 RequireJS 从 2.0 开始,也改成可以延迟执行)。如果一定要让 模块B 在 模块A 之后执行,需要在 define 模块时申明依赖,或者通过 require.config 配置依赖。 如果两个模块之间突然模块A依赖模块B:SeaJS的懒执行可能有问题,而RequireJS不需要修改当前模块。 当模块A依赖模块B,模块B出错了:如果是SeaJS,模块A执行了某操作,可能需要回滚。RequireJS因为尽早执行依赖可以尽早发现错误,不需要回滚。

define(['a', 'b'], function(A, B) {
    return function () {};
    });

7.3、聚焦点有差异

SeaJS努力成为浏览器端的模块加载器,RequireJS牵三挂四,兼顾Rhino 和 node,因此RequireJS比SeaJS的文件大。

7.4、 理念不一样

RequireJS 有一系列插件,功能很强大,但破坏了模块加载器的纯粹性。SeaJS 则努力保持简单,并支持 CSS 模块的加载。

8、参考

github.com/seajs/seajs…
github.com/seajs/seajs…
github.com/seajs/seajs…
github.com/seajs/seajs…
github.com/seajs/seajs…
www.zhihu.com/question/21…
annn.me/how-to-real…
chaoskeh.com/blog/why-it…
github.com/cmdjs/speci…
www.douban.com/note/283566…
imququ.com/post/amd-si…
lifesinger.wordpress.com/2011/05/17/…

评论