JavaScript开发：模块的维护和扩展

更新时间:2022-02-28 来源:黑马程序员浏览量:

IT培训班

计算器模块通过利用函数作用域的方式，实现了理想的模块化开发，如果有个需求，要在计算器案例中添加一个取余的方法，传统的方式是在匿名函数中添加一个方法，且返回计算结果，示例代码如下：

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()，这样的处理其实是可以实现当前需求的。但是试想一下，如果这个计算模块由第三方库提供，难道也要修改源码吗?当要对这个模块进行扩展和维护的时候，或者这个模块存有第三方依赖的时候，可以通过参数的形式将原来的模块和第三方库传递进去。示例代码如demol-4.html所示。

demo1-4.html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模块化开发演变-维护和扩展</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>
    //传递参数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已经把上面的calculator给覆盖掉了
    //注意：在进行扩展的时候，优先查找要扩展的对象是否已存在
    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');
    //为等号按钮添加单击事件，当按钮被单击时调用此方法
    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行在用于计算的匿名函数中传递cal作为参数，该参数可以看作匿名函数本身，第43行代码“calculator||{}”的意思是，当扩展该模块时，判断cal-culator函数是否存在，如果存在使用已经存在的，如果不存在就重新创建，这样做的好处是在加载时不需要考虑顺序。第47~53行用于添加取余的方法，第80行用于调用取余方法，在浏览器中打开demo1-4.html，页面效果如图1-3所示。

1646035195823_模块化的演变.jpg