模塊化介紹

時間 2020-08-11

標籤模塊化介紹简体版

原文原文鏈接

1. 爲何要學習模塊化開發

1.1. 爲何要學習模塊化

瞭解模塊化思想
    爲後面的node學習打基礎

1.2. 什麼是模塊化

生活中的模塊化
- 組裝電腦
- google的模塊化手機（流產了，moto繼承了）
- 樂高積木
軟件開發中的模塊化
- 日期模塊
- 數學計算模塊
- 日誌模塊
- 登陸認證模塊
- 報表展現模塊
模塊化的好處
- 生產效率高
- 方便維護

2. 模塊化的演變過程

2.1. 非模塊化帶來的問題

命名衝突
    文件依賴

2.2. 全局函數

問題：命名可能會衝突（變量污染）
代碼

2.3. 對象封裝

解決：解決命名衝突（相似命名空間的方式）
新問題：沒有本身的私人空間(不能設置私有成員)
代碼

2.4. 隔離私有空間

解決：不能設置私有成員問題
新問題：如何擴展一個功能？
代碼

2.5. 模塊的擴展

對擴展開放，對修改封閉
解決：擴展一個求平方的功能
代碼

2.6. 依賴第三方模塊

封裝到js文件中
代碼

2.7. 使用模塊化開發的價值

https://github.com/seajs/seajs/issues/547html

3. 模塊化開發框架seajs

3.1. 瀏覽seajs官網（文檔）

http://seajs.orgnode

3.2. 使用seajs的步驟

導入seajs
define() 定義一個模塊，define的回調的三個參數名字不可更改

define(function (require, exports, module) {});

exports或者module.exports將模塊中的成員暴露出來
seajs.use 使用一個模塊
config() 配置一些基本信息（別名、路徑）

3.3. seajs.use使用模塊

//使用單個模塊，回調函數中的obj就是模塊中的exports對象
    seajs.use("modules/demo1/calc.js", function (obj) {
        console.log(obj.add(5,6));

        console.log(obj.mul(5,6));
    });

//使用多個模塊
    seajs.use(["modules/demo1/calc.js","modules/demo1/power.js"] , function (o1,o2)
    {
        //o1 對應calc模塊中的exports對象
        console.log(o1.add(1,2));
        //o2 對應power模塊中的exports對象
        console.log(o2.power(5));
    });

3.4. 導出模塊中的成員

使用exports導出成員

define(function (require, exports, module) {
        exports.add = function (a, b) {
            return a + b;
        }
        exports.sub = function (a, b) {
            return a - b;
        }
    });

使用module.exports導出

//使用module.exports導出成員和exports用法同樣
    define(function (require, exports, module) {
        module.exports.add = function (a, b) {
            return a + b;
        }
        module.exports.sub = function (a, b) {
            return a - b;
        }
    });

//使用module.exports導出對象，exports不能夠
    define(function (require, exports, module) {
        //能夠使用module.exports導出對象
        module.exports = {
            add: function (a, b) {
                console.log("module");
                return a + b;
            },
            sub: function (a, b) {
                return a - b;
            }
        };
    });

exports和module.exports的關係
- exports = module.exports = {};
- 畫圖解釋
- 不能爲exports直接賦值，可是能夠動態添加成員

3.5. 模塊之間的依賴

require() 引用另外一個模塊

define(function (require, exports, module) {
        //依賴另外一個模塊，js後綴能夠省略
        var o = require("./power");

        module.exports = {
            add: function (a, b) {
                console.log("module");
                return a + b;
            },
            sub: function (a, b) {
                return a - b;
            },
            three: function (a) {
                return o.power(a) * parseInt(a) ;
            }
        };
    });

3.6. config

config的做用就是爲了簡化調用模塊
- base 設置路徑
- alias 設置模塊的別名，簡化調用

seajs.config({
        //設置路徑
        base: "modules/demo4",
        //設置別名
        alias: {
            c: "calc",
            p: "power"
        }
    });

3.7. seajs原理

function loadJS(path, callback) {
            var head = document.getElementsByTagName("head")[0];
            var node = document.createElement("script");
            node.src = path;
            head.appendChild(node);
            //瀏覽器兼容處理
            var supportOnload = "onload" in node;
            if(supportOnload) {
                node.onload = function () {
                    callback();
                }
            }else{
                node.onreadystatechange = function () {
                    if(node.readyState == "loaded" || node.readyState == "complete") {
                        callback();
                    }
                }
            }
        }

        //調用
        loadJS("js/test.js", function () {
            test();
        })