seajs是我刚入门前端就接触到的一个javaScript模块加载框架。使用seajs后javaScript代码的可读性和清晰度有了很大的提升,插件的使用和组装变的很方便。更加方便代码的升级和维护。推荐使用插件比较多的项目使用。或者使用requirejs也比较流行。

ps:如果想知道RequireJS、SeaJS哪个好用的可以自行对比,或者查看

seajs 的简单上手

首先先去官网下载最新版本。
下载后,假定把它放在js子目录下面,就可以加载了。

   <script type="text/javascript" src="js/sea.js"></script>
          

加载seajs后我们还需要加载自己的js配置文件

   <script type="text/javascript" src="js/sea-config.js"></script>  
          

seajs 的简单配置

      //.sea-config.js 
      seajs.config({
          base: "../plug-js/",
          alias: {
            "jquery": "jquery/1.10.1/jquery.js"
          }
      })  

简单使用

  // 所有模块都通过define来定义
  define(function(require,exports,module){
        // 通过require来引入jquery
        var $ = require('jquery');
        
        console.log($);
  })

seajs参数

define

使用全局函数define来定义函数

define(id?,dependencies?,factory);

id: 当前模块的唯一标识。该参数可选。如果没有指定,默认为模块所在文件的访问路径。如果指定的话,必须是顶级或绝对标识。
dependencies: 当前模块所依赖的模块,是一个由模块标识组成的数组。
factory: 模块的工作函数。模块初始化时,会调用且仅调用一次该工厂函数。

define(function(require,exports,module){
    //The module code goes here
})

**注意:不推荐不要设定id和dependencies参数。

exports

exports 用来向外提供模块的API

define(function(require,exports){
    // snip 
    exports.foo = 'bar';
    exports.doSomething = function(){};
})

除了给exports对象增加成员,还可以使用return直接向外提供API

define(function(require,exports){
    // snip...
    return {
      foo : 'bar',
      doSomething : function(){}
    }
})
可简化为:
define({
   foo : 'bar',
   doSomething : function(){} 
})

require

require函数用来访问其他模块提供的API

define(function(require){
   var a = require('./a');
   a.doSomething();
})

require.async: 异步加载模块,并在加载完成后执行回调函数
require.resolv: 使用require()的内部机制来解析并返回模块路径。该函数不会加载模块,只返回解析后的路径。
require.load: 该方法可用异步加载脚本,并在加载完成后,执行指定的回调函数。
require.constructor: 给所有require参数对象添加一些公用属性或方法。

module

modeule 参数存储模块的元信息

module.id: 当前模块的唯一标识。
module.dependencies: 表示当前模块的依赖列表
module.exports: exports是某个类的实例

   define(function(require,exports,module){
         console.log(module.exports === exports); // true
         module.exports = new SomeClass();
         console.log(module.exports === exports); // false
   })

module.constructor: 给module参数对象添加一些公用属性或方法。

api手册

seajs的模块化插件


LuDongWei
620 声望20 粉丝

英语不擅长的前端工作者