安装与使用
通过npm install seajs安装
使用步骤：
- 引入seajs文件
- 定义主模块文件
- 主模块文件通过define定义模块，导出公共成员
- 页面脚本通过
seajs.use('path',fn)使用模块 - 回调函数的参数传过来的就是模块中导出的成员
定义模块
通过以下来定义模块
define(function(require, exports, module) {
// 此处是模块的私有空间
// 定义模块的私有成员
// 载入01-convertor模块
var convertor = require('./01-convertor.js');
function add(a, b) {
return convertor.convertToNumber(a) + convertor.convertToNumber(b);
}
// 暴露模块的公共成员
exports.add = add;
});
使用模块
- seajs.use 一般用于入口模块，一般只会使用一次
- require 模块与模块之间
<script src="node_modules/seajs/dist/sea.js"></script> // 引入Seajs
<script>
// 在Seajs中模块的引入需要相对路径完整写法
seajs.use('./01-calculator.js', function(calculator) {
var ta = document.getElementById('txt_a');
btn.onclick = function() {
switch (op.value) {
case '+':
tres.value = calculator.add(ta.value, tb.value);
break;
}
};
});
</script>
导出成员的方式
- module.exports
- exports.xxx
- return
console.log(module.exports === exports);输出为true。
// exports是module.exports的快捷方式，指向的任然是原本的地址
exports.name = 'hello';
// module.exports优先级第二，此时module.exports 指向的是一个新的地址
module.exports = { name: 'hello' };
// return 的优先级最高
return { name: 'world' };
异步调用
如下调用会等require执行完后再往下执行
console.log('module1 ---- start');
// require 必须执行完成过后（./module2.js加载完成）才可以拿到返回值
var module2 = require('./03-module2.js'); // 阻塞代码执行
// JS中的阻塞会有卡顿的情况出现
console.log('module1 ---- end');
使用require.async异步调用，首先加载03-module2.js文件，加载完后执行function回调函数
console.log('module1 ---- start');
require.async('./03-module2.js', function(module2) {
}); // 此处不会阻塞代码执行
console.log('module1 ---- end');
** 使用第三方依赖（jQuery）**
jquery默认支持AMD规范，当使用define函数时，不会去往全局挂载jquery对象由于CMD是国产货，jquery默认不支持。
可以通过以下改造
// 适配CMD
if (typeof define === "function" && !define.amd) {
// 当前有define函数，并且不是AMD的情况
// jquery在新版本中如果使用AMD或CMD方式，不会去往全局挂载jquery对象
define(function() {
return jQuery.noConflict(true);
});
}
Seajs配置
配置参考
在seajs.config中配置，如下当calc.js路径发生变化时，只需修改别名中内容，代码中路径通过seajs.use('calc')使用别名
<script>
seajs.config({
alias: {
calc: './modules/calc.js',
}
});
seajs.use('calc');
