如果你正在使用 Sea.js 进行模块化开发,那么以下 7 个功能基本上可以覆盖日常开发中约 80% 的常见场景。下面我们对这些功能逐一进行详细解析。
1. seajs.config 配置
配置是模块化的基础。通过设置路径别名和模块别名,能够让代码结构更加清晰,便于维护,尤其在跨项目调用时优势明显。
seajs.config({
// 设置路径,方便跨项目调用
paths: {
'path1': '....',
'path2': '....'
},
// 设置别名,方便调用
alias: {
'class1': '...',
'class2': '...'
}
});
2. seajs.use 加载入口
作为页面的加载入口,seajs.use 用于加载一个或多个模块,并支持在加载完成后立即执行回调函数。这是最常见的启动模块的方式。
// 加载一个模块
seajs.use('./a');
// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
a.doSomething();
});
// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
});
3. define 定义模块
define 是定义模块的核心方法。所有模块代码都需要包裹在 define 的回调函数中,该回调的三个参数 require、exports、module 分别负责模块的依赖引入、接口暴露和模块引用,各司其职。
define(function(require, exports, module) {
// 模块代码
});
4. require 同步依赖引入
require 用于同步获取指定模块的接口,这是模块内部处理依赖关系最常用的方式。
define(function(require) {
// 获取模块a的接口
var a = require('./a');
// 调用模块a的方法
a.doSomething();
});
5. require.async 异步加载
当需要按需加载模块、避免阻塞当前模块执行时,可以使用 require.async 进行异步加载。它支持异步加载单个或多个模块,并在加载完成后执行指定的回调函数。
define(function(require) {
// 异步加载一个模块,在加载完成时执行回调
require.async('./b', function(b) {
b.doSomething();
});
// 异步加载多个模块,在加载完成时执行回调
require.async(['./c', './d'], function(c, d) {
c.doSomething();
d.doSomething();
});
});
6. exports 暴露接口
通过 exports 对象可以将模块内部的属性和方法暴露给外部调用,使用方式简单直观,适合暴露多个成员。
define(function(require, exports) {
// 对外提供foo属性
exports.foo = 'bar';
// 对外提供doSomething方法
exports.doSomething = function() {};
});
7. module.exports 整体导出
当需要将整个模块作为一个对象整体导出(而不是分散的多个成员)时,直接对 module.exports 赋值更加直接。请注意它与 exports 的区别:module.exports 会完全覆盖导出内容,而 exports 仅仅是 module.exports 的一个引用,不能直接赋值覆盖。
define(function(require, exports, module) {
// 对外提供接口
module.exports = {
name: 'a',
doSomething: function() {}
};
});
以上便是 Sea.js 最核心、最常用的 7 个功能点。深入理解并熟练掌握这些内容后,日常的模块化开发基本不会遇到障碍。将来遇到更复杂的场景时,再在此基础上逐步深入研究即可。
