教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

JavaScript全局函數(shù)寫法實(shí)現(xiàn)計(jì)算器案例

更新時(shí)間:2022年05月16日18時(shí)06分 來(lái)源:傳智教育 瀏覽次數(shù):

首先從大多數(shù)人熟悉的編程習(xí)慣開始，假如現(xiàn)在要使用JavaScript實(shí)現(xiàn)一個(gè)計(jì)算器的案例，如圖1-2所示。

在圖1-2中，前兩個(gè)文本框用于輸入需要計(jì)算的數(shù)值，下拉菜單用于選擇運(yùn)算符，單擊等號(hào)后，計(jì)算結(jié)果會(huì)出現(xiàn)在第三個(gè)文本框。

實(shí)現(xiàn)計(jì)算器第一種常見的寫法是全局函數(shù)形式，示例代碼如demol-1.html所示。

demo1-1.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>模塊化開發(fā)演變-全局函數(shù)</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>
  </select>
  <input type="text" id="y">
  <button id="cal">=</button>
  <input type="text" id="result">
  <script>
  //定義用于計(jì)算的函數(shù)
    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);
    }
//獲取所有的DOM元素
var oX = document.getElementById('x');                 //第一個(gè)數(shù)值
var oY = document.getElementById('y');                 //第二個(gè)數(shù)值
var oOpt = document.getElementById('opt')              //獲取運(yùn)算符
var oCal = document.getElementById('cal');             //獲取等號(hào)按鈕
var oResult= document.getElementById('result')         //結(jié)果數(shù)值
//為等號(hào)按鈕添加單擊事件，當(dāng)按鈕被點(diǎn)擊時(shí)調(diào)用此方法
oCal.addEventListener('click', function() {
    var x = oX.value.trim()
    var y = oY.value.trim()
    var opt = oOpt.value
    var result = 0
    switch(opt) (
        case '0':                               
            result = add(x, y);                       //加
            break;
        case'2':

            result = multiply(x, y);                  //乘
            break;
        case '3':
            result = divide (x, y);                   //除
            break;
      }
      oResult.value = result
      })
      </script>
</body>
</html>

在上述代碼中，首先獲取需計(jì)算的數(shù)值、運(yùn)算符、等號(hào)按鈕和結(jié)果數(shù)值的DOM（文檔對(duì)象模型）元素，然后分別定義了4個(gè)用來(lái)計(jì)算加、減、乘、除的函數(shù)，最后為等號(hào)按鈕添加單擊事件，通過switch語(yǔ)句判斷調(diào)用哪個(gè)計(jì)算方法。

全局函數(shù)這種編程方式很常見，但是不可取，因?yàn)樗械淖兞亢秃瘮?shù)都暴露在全局，無(wú)法保證全局變量不與其他模塊的變量發(fā)生沖突。另外，全局函數(shù)形成的模塊成員之間看不出直接關(guān)系。

0 分享到：
和我們?cè)诰€交談！