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>

实现效果：

缺点：

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

使用对象来封装方法：

<!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>

运行效果：

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

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'); //监听地址以及端口

使用方式：

打开浏览器：

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

结束方式：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实现计算器：

文件目录：

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));

实现效果：

结束：

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

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

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

最新文章

  1. JS获取当前时间
  2. 第二天ci项目规划 数据库设计
  3. 图解GCD
  4. 《java编程思想》读书笔记（二）第五章(2)
  5. 15个带给您优秀用户体验的移动应用 UI 设计
  6. h5-4 canvas
  7. sql test
  8. 判断浏览器js代码
  9. Swift基本语法及与OC比较之二
  10. U3D 精灵的点击监听
  11. Niagara AX连接MySQL数据库
  12. BZOJ 1617: [Usaco2008 Mar]River Crossing渡河问题( dp )
  13. Go 程序的性能优化及 pprof 的使用
  14. 广工赛-hdu6470矩阵快速幂
  15. 集群LVS
  16. Codeforces 1082B Vova and Trophies 模拟,水题,坑 B
  17. 用Web Services来整合.NET和J2EE
  18. Bootstrap洼地
  19. java中的自定义注解的使用
  20. SQLite 数据库增删改查

热门文章

  1. 云计算OpenStack核心组件---horizon Web管理界面（9）
  2. docker0详解
  3. SPI接口在LCD上的应用
  4. EdgeX Foundry试运行
  5. 在命令行模式下查看Python帮助文档---dir、help、__doc__
  6. Jmeter- 笔记10 - 在GUI生成html报告
  7. arm，asic，dsp，fpga，mcu，soc各自的特点
  8. noip模拟8[星际旅行&#183;砍树&#183;超级树&#183;求和]
  9. 记一次项目中解决 -- 并发减库存超卖问题过程(Java)
  10. Transformers for Graph Representation