angularJS1筆記-(20)-模塊化加載機制seajs

時間 2019-11-19

標籤 angularjs1 angularjs 筆記模塊化加載機制 seajs 欄目 AngularJS 简体版

原文原文鏈接

SeaJS是一個遵循CMD規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。html

與jQuery等JavaScript框架不一樣，SeaJS不會擴展封裝語言特性，而只是實現JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發模塊化並能夠輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，能夠專一於代碼自己的邏輯。SeaJS能夠與jQuery這類框架完美集成。使用SeaJS能夠提升JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中廣泛存在的依賴關係混亂和代碼糾纏等問題，方便代碼的編寫和維護。前端

html:node

<!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');//此處是同步加載方式 若是用異步須要寫成 require.async('',function(){})這個是沒有返回值的加載完成後會執行回調函數
    //此處是模塊的私有空間
    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中作選擇。async