更新時間:2022-02-28 來源:黑馬程序員 瀏覽量:
計算器模塊通過利用函數作用域的方式,實現了理想的模塊化開發(fā),如果有個需求,要在計算器案例中添加一個取余的方法,傳統(tǒng)的方式是在匿名函數中添加一個方法,且返回計算結果,示例代碼如下:
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>模塊化開發(fā)演變-維護和擴展</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給覆蓋掉了 //注意:在進行擴展的時候,優(yōu)先查找要擴展的對象是否已存在 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函數是否存在,如果存在使用已經存在的,如果不存在就重新創(chuàng)建,這樣做的好處是在加載時不需要考慮順序。第47~53行用于添加取余的方法,第80行用于調用取余方法,在瀏覽器中打開demo1-4.html,頁面效果如圖1-3所示。