JavaScript開發(fā)：模塊的維護(hù)和擴(kuò)展

更新時間:2022-02-28 來源:黑馬程序員瀏覽量:

IT培訓(xùn)班

計算器模塊通過利用函數(shù)作用域的方式，實(shí)現(xiàn)了理想的模塊化開發(fā)，如果有個需求，要在計算器案例中添加一個取余的方法，傳統(tǒng)的方式是在匿名函數(shù)中添加一個方法，且返回計算結(jié)果，示例代碼如下：

var calculator = (function () {
    //加法
    function add(x, y)  {
     return parseInt (x) + parseInt(y);
}
    //減法
    function subtract(x, y) {
     return parseInt (x) - parseInt (y);
    //乘法
    function multiply(x, y) (
     return parneInt(x) * parseInt(y);
}
    //除法
    function divide (x, y) {
     return parseInt(x) / parseInt (y);
}
    //取余
    function mod(x, y){
    return parseInt(x) % parseInt(y)；
}
     return {
       add: add,
       subtract: subtract,
       multiply:multiply,
       divide: divide,
    mod: mod
   }
  })();

在上述代碼中，添加了一個取余的方法mod()，這樣的處理其實(shí)是可以實(shí)現(xiàn)當(dāng)前需求的。但是試想一下，如果這個計算模塊由第三方庫提供，難道也要修改源碼嗎?當(dāng)要對這個模塊進(jìn)行擴(kuò)展和維護(hù)的時候，或者這個模塊存有第三方依賴的時候，可以通過參數(shù)的形式將原來的模塊和第三方庫傳遞進(jìn)去。示例代碼如demol-4.html所示。

demo1-4.html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模塊化開發(fā)演變-維護(hù)和擴(kuò)展</title>
</head>
<body>
<input type="text"id="x">
<select name="" id="opt">
    <option value="0">+</option>
    <option value="1">-</option>
    <option value="2">*</option>
    <option value="3">/</option>
    <option value="4">%</option>
</select>
<input type="text" id="y">
<button id="cal">=</button>
<input type="text" id="result">
<script>
    //傳遞參數(shù)cal
    var calculator = (function(cal) {
        //加法
        function add(x, y) {
            return parseInt(x) + parseInt(y);
        }
        //減法
        function subtract(x, y) {
            return parseInt (x) - parseInt (y) ;
        }
        //乘法
        function multiply(x, y) {
            return parseInt(x) * parseInt(y);
        }
        //除法
        function divide(x, y) {
            return parseInt(x) / parseInt(y);
        }   
        cal.add = add;
        cal.subtract = subtract;
        cal.multiply = multiply;
        cal.divide = divide;
        return cal;
    })(calculator || {});

    //從代碼上來看：下面的calculator已經(jīng)把上面的calculator給覆蓋掉了
    //注意：在進(jìn)行擴(kuò)展的時候，優(yōu)先查找要擴(kuò)展的對象是否已存在
    var calculator = (function(cal) (
        //取余方法
        cal.mod = function(x, y) {
            return x % y

        }
        return cal;
    })(calculator || {});
    //獲取所有的DOM元素
    var oX = document.getElementById('x');
    var oY = document.getElementById('y');
    var oOpt = document.getElementById('opt');
    var oCal = document.getElementById('cal');
    var oResult = document.getElementById('result');
    //為等號按鈕添加單擊事件，當(dāng)按鈕被單擊時調(diào)用此方法
    oCal.addEventListener('click', function() {
        var x = oX.value.trim();
        var y = oY.value.trim();
        var opt = oOpt.value
        var result = 0;
        va1 1esult = 0;
        switch(opt) {
            case '0'
                result = calculator.add (x, Y);
                break;
            case '1':
                result = calculator.subtract (x, y);
                break;
            case '2':
                result = calculator.multiply(x, y);
                break;
            case '3':
                result = calculator.divide (x, y) ;
                break;
            case '4':
                result = calculator.mod (x, y);
                break;
                }
                oResult.value = result;
        })
</script>
</body>
</html>

在上述代碼中，第21行在用于計算的匿名函數(shù)中傳遞cal作為參數(shù)，該參數(shù)可以看作匿名函數(shù)本身，第43行代碼“calculator||{}”的意思是，當(dāng)擴(kuò)展該模塊時，判斷cal-culator函數(shù)是否存在，如果存在使用已經(jīng)存在的，如果不存在就重新創(chuàng)建，這樣做的好處是在加載時不需要考慮順序。第47~53行用于添加取余的方法，第80行用于調(diào)用取余方法，在瀏覽器中打開demo1-4.html，頁面效果如圖1-3所示。

1646035195823_模塊化的演變.jpg