首页技术文章正文

JavaScript全局函数写法实现计算器案例

更新时间:2022年05月16日18时06分来源:传智教育浏览次数:

首先从大多数人熟悉的编程习惯开始，假如现在要使用JavaScript实现一个计算器的案例，如图1-2所示。

在图1-2中，前两个文本框用于输入需要计算的数值，下拉菜单用于选择运算符，单击等号后，计算结果会出现在第三个文本框。

实现计算器第一种常见的写法是全局函数形式，示例代码如demol-1.html所示。

demo1-1.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>
  </select>
  <input type="text" id="y">
  <button id="cal">=</button>
  <input type="text" id="result">
  <script>
  //定义用于计算的函数
    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');                 //第一个数值
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
    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>

在上述代码中，首先获取需计算的数值、运算符、等号按钮和结果数值的DOM（文档对象模型）元素，然后分别定义了4个用来计算加、减、乘、除的函数，最后为等号按钮添加单击事件，通过switch语句判断调用哪个计算方法。

全局函数这种编程方式很常见，但是不可取，因为所有的变量和函数都暴露在全局，无法保证全局变量不与其他模块的变量发生冲突。另外，全局函数形成的模块成员之间看不出直接关系。

上一篇：微信小程序开发中常用的快捷键有哪些？ 下一篇：从原理到实践，React前端开发教程【全178集】