Seajs学习笔记

234 阅读2分钟

众所周知,SeaJS是一个遵循CMD规范的JavaScript模块加载框架,它的创作者是淘宝前端工程师玉伯,主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑,以实现JavaScript的模块化开发及加载机制。

附上SeaJS下载地址:seajs.github.io/seajs/docs/…

常用API

  1. seajs.use(用来在页面中加载一个或多个模块)
// 加载一个模块
seajs.use('./a');
seajs.use('./a'function(a{
  a.do();//执行回调
});
// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a''./b'], function(a, b{
  a.do();
  b.do();
});
  1. define(用来定义模块。Sea.js 推崇一个模块一个文件)
define(function(requireexportsmodule) {  // 模块代码});
  1. require(用来获取指定模块的接口)
define(function(require) {  
  var a = require('./a');  // 调用模块 a接口
  a.do();  //获取do方法
});
  1. require.async(用来异步加载模块)
define(function(require) {  
  require.async('./b'function(b) {
    b.do();
  }); // 异步加载一个模块
  require.async(['./c''./d'], function(c, d) {
    c.do();
    d.do();
  }); // 异步加载多个模块

});
  1. exports(用来在模块内部对外提供接口)
define(function(requireexports) {  
  exports.nm'a';  // 对外提供nm属性
  exports.do = function() {};//对外提供do方法

});
  1. module.exports(用来在模块内部对外提供接口)
define(function(requireexportsmodule) {  
  module.exports = {
    name'a',    
    dofunction() {};
  };

});// 对外提供接口

SeaJS原理

内部创建一个script标签,通过src把你要引入的js模块引入进来,然后append到DOM文档中进行加载,定义一个全局函数define,用来获取模块里面所写的代码,模块中的define函数自己执行,将里面的函数传递到sea.js插件中,然后再去做处理,sea.js将模块中的module.exports = 的东西提取出来,回调函数传递给index中,接受到了这个模块中的module.exports。把最后这个script标签移除掉,所以当我们审查元素时看不到有那个script标签。

Seajs与Require差异

  1. 遵循的规范不同。RequireJS 遵循 AMD(异步模块定义)规范,Sea.js 遵循 CMD (通用模块定义)规范。因此两者的API也有所不同。
  2. SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行(SeaJS只会在真正需要使用(依赖)模块时才去执行该模块,模块执行的顺序也是严格按照代码中的顺序,而requireJS会提前把所有的模块执行了,所以它的执行顺序不是严格按照代码的顺序)