JavaScript编写计算器的发展史

JavaScript编写计算器的发展史:

编写一个普通的四则运算:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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" onclick= "fn()">=</button>
    <input type="text" id="result"/>
    <script>
        // add subtract  multiply  divide 用于计算的函数名
        function add(leftnum,rightnum){
            var res = leftnum+rightnum;
            document.getElementById('result').value = res;
        }
        function subtract(leftnum,rightnum){
            var res = leftnum-rightnum;
            document.getElementById('result').value = res;
        }
        function multiply(leftnum,rightnum){
        
            var res = leftnum*rightnum;
            document.getElementById('result').value = res;
        }
        function divide(leftnum,rightnum){
            if(rightnum == 0){
                alert("除数不能为0");
                return;
            }
            var res = leftnum/rightnum;
            
            document.getElementById('result').value = res;
        }
        function fn(){
            var str1=Number(document.getElementById('x').value);
            var str2=Number(document.getElementById('y').value);
            comp=document.getElementById('opt').value;
            var result;
            switch(comp) {
              case '0':
                add(str1,str2);
                break;
              case '1':
                subtract(str1,str2);
                break;
              case '2':
                multiply(str1,str2);
                break;
              case '3':
                divide(str1,str2);
                break;
            }
        }
      
    </script>
</body>

</html>

实现效果:

image-20210711131053815

缺点:

该代码的所有的方法以及变量都在全局环境中,有污染全局环境的问题;

使用对象来封装方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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" onclick= "fn()">=</button>
    <input type="text" id="result"/>
    <script>
        // add subtract  multiply  divide 用于计算的函数名
        
        var calculator = {}; //放入其中
        calculator.add = function(leftnum,rightnum){
            var res = leftnum+rightnum;
            document.getElementById('result').value = res;
        }
        calculator.subtract = function (leftnum,rightnum){
            var res = leftnum-rightnum;
            document.getElementById('result').value = res;
        }
        
        calculator.multiply =  function (leftnum,rightnum){
            var res = leftnum*rightnum;
            document.getElementById('result').value = res;
        }
        calculator.divide =  function (leftnum,rightnum){
            if(rightnum == 0){
                alert("除数不能为0");
                return;
            }
            var res = leftnum/rightnum;
            
            document.getElementById('result').value = res;
        }
        function fn(){
            var str1=Number(document.getElementById('x').value);
            var str2=Number(document.getElementById('y').value);
            comp=document.getElementById('opt').value;
            switch(comp) {
              case '0':
                calculator.add(str1,str2);
                break;
              case '1':
                calculator.subtract(str1,str2);
                break;
              case '2':
                calculator.multiply(str1,str2);
                break;
              case '3':
                calculator.divide(str1,str2);
                break;
            }
        }
    </script>
</body>
    
</html>

实现效果:

缺点:

依旧存在属性在全局环境的问题;

使用闭包以及自执行函数实现计算器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
        // 方法不会污染全局作用域
        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 parseInt(x)*parseInt(y);
            }
            function divide(x,y){
                if(y == 0){
                    alert('除数不能为零');
                    return;
                }
                return parseInt(x)/parseInt(y);
            }
            return {
                add:add,
                subtract:subtract,
                multiply:multiply,
                divide:divide
            }
        })();
        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 = 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);
            }
            oResult.value = result;
        })
        
   </script>
</body>
</html>

使用监听器来实现click后的发生事件:

oCal.addEventListener('click',function(){
})

使用自执行函数与闭包缩小了方法的作用域,只在calculator对象调用方法后起作用。

var calculator = (function(){
    function add(x,y){
    }
    function subtract(x,y){
        
    }
    function multiply(x,y){
        
    }
    function divide(x,y){
   
    }
    //返回的是一个对象
    return {
        add:add,
        subtract:subtract,
        multiply:multiply,
        divide:divide
    }
})();

最终版:实现不改变原代码的结构,增加功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
        // 方法不会污染全局作用域
        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){
                if(y == 0){
                    alert('除数不能为零');
                    return;
                }
                return parseInt(x)/parseInt(y);
            }
            cal.add = add;
            cal.subtract = subtract;
            cal.multiply = multiply;
            cal.divide = divide;
            return cal;
            
        })(calculator || {});  // 采用自执行函数,如果没有传参的话则对象为空,有的话则正常传参
        
        var calculator = (function(cal){
            cal.mod = function(x,y){
                return x%y;
            }
            return cal;
        })(calculator || {});  
        
        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 = 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);
                case '4':
                    result = calculator.mod(x,y);
            }
            oResult.value = result;
        })
    </script>
</body>
</html>

运行效果:

image-20210711193903519

我们采用下面的这种格式实现所有方法以及属性都不在全局环境中:

var calculator = (function(cal){
    cal.mod = function(x,y){
        return x%y;
    }
    return cal;
})(calculator || {});

好处:可以灵活的增加功能并且增加功能与原来的功能的代码顺序无所谓,

Node.js的前置知识:

全局对象的使用:

// 全局对象
global.foo = 'var';
console.log(global.foo);

简单的http服务器:

// 导入http包
//require 是导包
var http = require('http');
// 创建服务器
http.createServer(function(req,res)
{
    //有请求的话,响应返回:hello world
    res.end('hello world');
}).listen(3000,'127.0.0.1'); //监听地址以及端口

使用方式:

image-20210711191051972

打开浏览器:

输入://127.0.0.1:3000或者localhost:3000

image-20210711191216882

结束方式:Ctrl-C

利用上述知识,实现模块之间的数据共享:

info.js

//node中一个js就是一个模块
//向外公开age变量
module.exports.age = '10';
// 公开一个函数
module.exports.sayHello = function(){
    console.log('hello');
}
var name = 'tom';

test.js

// 加载模块
var myModule = require('./info');
console.log(myModule);
myModule.sayHello();
console.log(myModule.name); //访问不到

nodeJs实现计算器:

文件目录:

image-20210711191704219

add.js

module.exports = function add(x,y){
    return parseInt(x)+parseInt(y);
}

divide.js

module.exports = function divide(x,y){
    if(y == 0){
        alert('除数不能为零');
        return;
    }
    return parseInt(x)/parseInt(y);
}

multiply.js

module.exports = function multiply(x,y){
    return parseInt(x)*parseInt(y);
}

subtract.js

module.exports = function subtract(x,y){
    return parseInt(x)-parseInt(y);
}

index.js

module.exports = {
    add:require('./add'),
    subtract:require('./subtract'),
    multiply:require('./multiply'),
    divide:require('./divide')
};

我们访问的就是index.js一个文件即可

var cal = require('./index');
console.log(cal.add(1,2));
console.log(cal.subtract(1,2));
console.log(cal.multiply(1,2));
console.log(cal.divide(1,2));

实现效果:

image-20210711194312283

结束:

今天的知识点到这里结束了,通过这些前置知识点,下一次将进行模块化的演变过程等;

如果你看到这里或者正好对你有所帮助,希望能点个关注或者推荐,感谢;

有错误的地方,欢迎在评论指出,作者看到会进行修改。