angularJS1笔记-(20)-模块化加载机制seajs
Posted 有时你唱起歌 有时你沉默 有时你望着天空
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularJS1笔记-(20)-模块化加载机制seajs相关的知识，希望对你有一定的参考价值。
SeaJS是一个遵循CMD规范的javascript模块加载框架，可以实现JavaScript的模块化开发及加载机制。
与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs体验</title>
<script src="../../node_modules/seajs/dist/sea.js"></script>
<script>
//在seajs中模块的引用必须要用完整的相对路径或者是从根目录开始写完整
seajs.use(‘./calculator.js‘,function (calculator) {
console.log(calculator.add(1,3));
console.log(calculator.subtract(4,8));
})
</script>
</head>
<body>
</body>
</html>
js:
//自定义一个模块 遵循seajs规范
define(function (require, exports, module) {
//此处是模块的私有空间
function add(a,b) {
return parseFloat(a) + parseFloat(b);
}
function subtract(a,b) {
return parseFloat(a)-parseFloat(b);
}
//暴露模块的公共成员
exports.add = add;
exports.subtract = subtract;
});
这里通过use方法的方式引入模块，我们还可以通过require的方式引入模块，一般是js和js之间的调用,这种比较常用。
convertor.js:
define(function (require,exports,module) {
//公开一些转换逻辑
exports.convertToNumber = function (input) {
return parseFloat(input);
}
})
calculator.js:
define(function (require, exports, module) {
var convertor = require(‘./convertor.js‘);
//此处是模块的私有空间
function add(a,b) {
return convertor.convertToNumber(a) + convertor.convertToNumber(b);
}
function subtract(a,b) {
return convertor.convertToNumber(a)-convertor.convertToNumber(b);
}
//暴露模块的公共成员
exports.add = add;
exports.subtract = subtract;
});
这里有个问题,如果exports.xxx = xxx;这样的方式暴露公共成员的话其实是都挂载在module下的，如果换成module.exports = XXX;那么就会只暴露出这一个成员变量出去.最终到处的以他为准。此外还可以使用return的方式暴露成员，return的优先级别最高。一般来说我们不用return，而是在exports.xxx和module.exports=xxx中做选择。
以上是关于angularJS1笔记-(20)-模块化加载机制seajs的主要内容，如果未能解决你的问题，请参考以下文章
angularJS1笔记-(16)-模块里的constantvaluerun
angularJS1笔记-(19)-angular异步加载包的方式