js 函数说 ：我要一点一点，变得更好

于 2017-06-08 18:36:23 发布
阅读量238 收藏
点赞数
分类专栏： javascript 文章标签： 函数 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013165804/article/details/72933848
版权

1:html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>计算器代码</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

<body>
    <div class="container" id="container">
        <input type="text" name="num1" class="input_num1 input_num">
        <span class="sign">+</span>
        <input type="text" name="num2" class="input_num2 input_num">
        <span>=</span>
        <span class="result"></span>
        <div class="btn_list">
            <!--     <input type="button" name="button" class="button" value="+" onclick="addHandler();" />
            <input type="button" name="button" class="button" value="-" onclick="subtracHandler()" />
            <input type="button" name="button" class="button" value="*" onclick="multiplyHandler()" />
            <input type="button" name="button" class="button" value="/" onclick="divideHandler()" /> -->

            <input type="button" name="button" class="button" title="add" value="+" />
            <input type="button" name="button" class="button" title="subtrac" value="-" />
            <input type="button" name="button" class="button" title="multiply" value="*" />
            <input type="button" name="button" class="button" title="divide" value="/" />
            <input type="button" name="button" class="button" title="mod" value="%" />
            <input type="button" name="button" class="button" title="power" value="^" />
        </div>
    </div>
    <script type="text/javascript" src="./js/script.js"></script>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 600px;
    margin: 100px auto;
    border:1px solid #dedede;
    padding: 50px; 
}
.button {
    padding: 10px;
    font-size: 16px;
    margin-top: 36px;
    margin-left: 15px;
    cursor: pointer;
}

版本0


var _container = document.querySelector("#container");
// 获取全部计算按钮
var _bottons = _container.querySelectorAll(".button");
// 获取两个输入框
var _input_num1 = _container.querySelector(".input_num1")
    //  获取运算符号的改变
var _sign = _container.querySelector(".sign");

var _input_num2 = _container.querySelector(".input_num2")
    // 获取显示结构的元素  
var _result = _container.querySelector(".result");


加

function addHandler() {
    _sign.innerHTML = "+";
    _result.innerHTML = parseInt(_input_num1.value) + parseInt(_input_num2.value);

}

//减

function subtracHandler() {
    _sign.innerHTML = "-";
    _result.innerHTML = _input_num1.value - _input_num2.value;
}

// 乘

function multiplyHandler() {
    _sign.innerHTML = "*";
    _result.innerHTML = _input_num1.value * _input_num2.value;
}

// 除

function divideHandler() {
    _sign.innerHTML = "/";
    _result.innerHTML = _input_num1.value / _input_num2.value;
}

版本1__结构和行为分离

// 获取整个容器
var _container = document.querySelector("#container");
// 获取全部计算按钮
var _bottons = _container.querySelectorAll(".button");
// 获取两个输入框
var _input_num1 = _container.querySelector(".input_num1")
    //  获取运算符号的改变
var _sign = _container.querySelector(".sign");

var _input_num2 = _container.querySelector(".input_num2")
    // 获取显示结构的元素  
var _result = _container.querySelector(".result");


_bottons[0].onclick = addHandler;
_bottons[1].onclick = subtracHandler;
_bottons[2].onclick = multiplyHandler;
_bottons[3].onclick = divideHandler;

// 加
function addHandler() {
    _sign.innerHTML = "+";
    _result.innerHTML = parseInt(_input_num1.value) + parseInt(_input_num2.value);

}

//减

function subtracHandler() {
    _sign.innerHTML = "-";
    _result.innerHTML = _input_num1.value - _input_num2.value;
}

// 乘

function multiplyHandler() {
    _sign.innerHTML = "*";
    _result.innerHTML = _input_num1.value * _input_num2.value;
}

// 除

function divideHandler() {
    _sign.innerHTML = "/";
    _result.innerHTML = _input_num1.value / _input_num2.value;
}

版本2 循环

// 获取整个容器
var _container = document.querySelector("#container");
// 获取全部计算按钮
var _bottons = _container.querySelectorAll(".button");
// 获取两个输入框
var _input_num1 = _container.querySelector(".input_num1")
    //  获取运算符号的改变
var _sign = _container.querySelector(".sign");

var _input_num2 = _container.querySelector(".input_num2")
    // 获取显示结构的元素  
var _result = _container.querySelector(".result");


for (var i = _bottons.length - 1; i >= 0; i--) {
    _bottons[i].onclick = function() {
        switch (this.value) {
            case "+":
                addHandler();
                break;
            case "-":
                subtracHandler();
                break;
            case "*":
                multiplyHandler();
                break;
            case "/":
                divideHandler();
                break;
        }
    }
}

// 加
function addHandler() {
    _sign.innerHTML = "+";
    _result.innerHTML = parseInt(_input_num1.value) + parseInt(_input_num2.value);

}

//减

function subtracHandler() {
    _sign.innerHTML = "-";
    _result.innerHTML = _input_num1.value - _input_num2.value;
}

// 乘

function multiplyHandler() {
    _sign.innerHTML = "*";
    _result.innerHTML = _input_num1.value * _input_num2.value;
}

// 除

function divideHandler() {
    _sign.innerHTML = "/";
    _result.innerHTML = _input_num1.value / _input_num2.value;
}

// 版本3 改进提取函数

//  尽量的把执执行函数拆分拆分到最小单元
// // 获取整个容器
var _container = document.querySelector("#container");
// 获取全部计算按钮
var _bottons = _container.querySelectorAll(".button");
// 获取两个输入框
var _input_num1 = _container.querySelector(".input_num1")
    //  获取运算符号的改变
var _sign = _container.querySelector(".sign");

var _input_num2 = _container.querySelector(".input_num2")
    // 获取显示结构的元素  
var _result = _container.querySelector(".result");



each(_bottons, function(idnex, elem) {
        elem.onclick = function() {
            switch (this.value) {
                case "+":
                    addHandler();
                    break;
                case "-":
                    subtracHandler();
                    break;
                case "*":
                    multiplyHandler();
                    break;
                case "/":
                    divideHandler();
                    break;
            }
        }
    })
    // 遍历
function each(array, fn) {
    for (var i = 0; i < array.length; i++) {
        fn(i, array[i])
    }
}
// 加
function addHandler() {
    updateSign("+")
    outputResult(add(_input_num1.value, _input_num2.value))

}

//减
function subtracHandler() {
    updateSign("-");
    outputResult(subtrac(_input_num1.value, _input_num2.value))
}

// 乘

function multiplyHandler() {
    updateSign("*");
    outputResult(multiply(_input_num1.value, _input_num2.value))
}

// 除

function divideHandler() {
    updateSign("/");
    outputResult(divide(_input_num1.value, _input_num2.value))
}
// 加法
function add(num1, num2) {
    return parseInt(num1) + parseInt(num2)
}
// 减法
function subtrac(num1, num2) {
    return num1 - num2;
}
// 乘法
function multiply(num1, num2) {
    return num1 * num2;
}
// 除法
function divide(num1, num2) {
    return num1 / num2;
}
// 更新符号
function updateSign(symbol) {
    _sign.innerHTML = symbol;
}
// 输出结构的函数
function outputResult(result) {
    _result.innerHTML = result;
}

// 第四次改进–管理代码 (找到组织)

var _container = document.querySelector("#container");
// 获取全部计算按钮
var calculatorElem = {
    _bottons: _container.querySelectorAll(".button"),
    // 获取两个输入框
    _input_num1: _container.querySelector(".input_num1"),
    //  获取运算符号的改变
    _sign: _container.querySelector(".sign"),

    _input_num2: _container.querySelector(".input_num2"),
    // 获取显示结构的元素  
    _result: _container.querySelector(".result")


}



each(calculatorElem._bottons, function(idnex, elem) {
        elem.onclick = function() {
            switch (this.value) {
                case "+":
                    addHandler();
                    break;
                case "-":
                    subtracHandler();
                    break;
                case "*":
                    multiplyHandler();
                    break;
                case "/":
                    divideHandler();
                    break;
            }
        }
    })
    // 遍历
function each(array, fn) {
    for (var i = 0; i < array.length; i++) {
        fn(i, array[i])
    }
}
// 加
function addHandler() {
    updateSign("+")
    outputResult(operation.add(calculatorElem._input_num1.value, calculatorElem._input_num2.value))

}

//减
function subtracHandler() {
    updateSign("-");
    outputResult(operation.subtrac(calculatorElem._input_num1.value, calculatorElem._input_num2.value))
}

// 乘

function multiplyHandler() {
    updateSign("*");
    outputResult(operation.multiply(calculatorElem._input_num1.value, calculatorElem._input_num2.value))
}

// 除

function divideHandler() {
    updateSign("/");
    outputResult(operation.divide(calculatorElem._input_num1.value, calculatorElem._input_num2.value))
}

var operation = {
        add: function(num1, num2) {
            return parseInt(num1) + parseInt(num2)
        },
        // 减法
        subtrac: function(num1, num2) {
            return num1 - num2;
        },
        // 乘法
        multiply: function(num1, num2) {
            return num1 * num2;
        },
        // 除法
        divide: function(num1, num2) {
            return num1 / num2;
        },
    }
    // 加法


// 更新符号
function updateSign(symbol) {
    calculatorElem._sign.innerHTML = symbol;
}
// 输出结构的函数
function outputResult(result) {
    calculatorElem._result.innerHTML = result;
}

//版本5 OCP 开放关闭原则

var _container = document.querySelector("#container");
// 获取全部计算按钮
var calculatorElem = {
    _bottons: _container.querySelectorAll(".button"),
    // 获取两个输入框
    _input_num1: _container.querySelector(".input_num1"),
    //  获取运算符号的改变
    _sign: _container.querySelector(".sign"),

    _input_num2: _container.querySelector(".input_num2"),
    // 获取显示结构的元素  
    _result: _container.querySelector(".result")


}



each(calculatorElem._bottons, function(idnex, elem) {
        elem.onclick = function() {
            updateSign(this.value);
            outputResult(operate((this.title), calculatorElem._input_num1.value, calculatorElem._input_num2.value))
        }
    })
    // 遍历
function each(array, fn) {
    for (var i = 0; i < array.length; i++) {
        fn(i, array[i])
    }
}

// 更新符号
function updateSign(symbol) {
    calculatorElem._sign.innerHTML = symbol;
}
// 运算
function operate(name, num1, num2) {
    if (!operation[name]) throw new Error("不存在名为" + name + "的运算方法")
    return operation[name](num1, num2);
}
var operation = {
    add: function(num1, num2) {
        return parseInt(num1) + parseInt(num2)
    },
    // 减法
    subtrac: function(num1, num2) {
        return num1 - num2;
    },
    // 乘法
    multiply: function(num1, num2) {
        return num1 * num2;
    },
    // 除法
    divide: function(num1, num2) {
        return num1 / num2;
    },
    addOperation: function(name, fn) {
        if (!this[name]) {
            this[name] = fn;
        }
        return this;
    }

}


operation.addOperation("mod", function(num1, num2) {
    return num1 % num2;
}).addOperation("power", function(base, power) {
    return Math.pow(base, power);
})

// 输出结构的函数
function outputResult(result) {
    calculatorElem._result.innerHTML = result;
}

// 版本6 模块化

(function() {
    var _container = document.querySelector("#container");
    // 获取全部计算按钮
    var calculatorElem = {
        _bottons: _container.querySelectorAll(".button"),
        // 获取两个输入框
        _input_num1: _container.querySelector(".input_num1"),
        //  获取运算符号的改变
        _sign: _container.querySelector(".sign"),

        _input_num2: _container.querySelector(".input_num2"),
        // 获取显示结构的元素  
        _result: _container.querySelector(".result")


    }

    // 绑定事件

    each(calculatorElem._bottons, function(idnex, elem) {
            elem.onclick = function() { updateSign(this.value); outputResult(operate((this.title), calculatorElem._input_num1.value, calculatorElem._input_num2.value)) }
        })
        // 遍历
    function each(array, fn) {
        for (var i = 0; i < array.length; i++) {
            fn(i, array[i])
        }
    }

    // 更新符号
    function updateSign(symbol) { calculatorElem._sign.innerHTML = symbol; }
    // 运算
    var operate = (function() { var operation = { add: function(num1, num2) { return parseInt(num1) + parseInt(num2) }, // 减法 subtrac: function(num1, num2) { return num1 - num2; }, // 乘法 multiply: function(num1, num2) { return num1 * num2; }, // 除法 divide: function(num1, num2) { return num1 / num2; }, addOperation: function(name, fn) { if (!operation[name]) { operation[name] = fn; } return operation; } } function operate(name) { if (!operation[name]) throw new Error("不存在名为" + name + "的运算方法"); return operation[name].apply(operation, [].slice.call(arguments, 1, arguments.length)); } operate.addOperation = operation.addOperation; return operate; })()


    operate.addOperation("mod", function(num1, num2) { return num1 % num2; }).addOperation("power", function(base, power) { return Math.pow(base, power); })

    // 输出结构的函数
    function outputResult(result) { calculatorElem._result.innerHTML = result; }
})()
爱lv行
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值