angularJS1筆記-(20)-模塊化加載機制seajs
阿新 • • 發佈：2017-06-20
定義 對象 ref 加載 true 可讀性 scrip 調用 公開
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