专栏首页极客慕白的成长之路JavaScript实现计算器方法拓展

JavaScript实现计算器方法拓展

一、最终效果

由于主要是逻辑的实现,就没有过多的样式,效果图如下

HTML代码

<div id="calculator">
    <p>
        <input type="text" class="formerInput" value="1" />
        <span class="sign">+</span>
        <input type="text" class="laterInput" value="1" />
        <span>=</span>
        <span class="resultOutput">2</span>
    </p>
    <p>
        <!-- <input type="button" value="+" onclick="addHandler();" />
        <input type="button" value="-" onclick="subtractHandler();" />
        <input type="button" value="×" onclick="multiplyHandler();" />
        <input type="button" value="÷" onclick="divideHandler();" /> -->
        <input type="button" value="+" class="btn" title="add" />
        <input type="button" value="-" class="btn" title="subtract" />
        <input type="button" value="×" class="btn" title="multiply" />
        <input type="button" value="÷" class="btn" title="divide" />
        <input type="button" value="%" class="btn" title="mod" />
        <input type="button" value="^" class="btn" title="power" />
        <input type="button" value="1/x" class="btn" title="invert" />
    </p>
</div>

二、Js代码实现

0x1 最容易实现

<br />// 获取元素
var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');

// 加
function addHandler() {
    sign.innerHTML = '+';
    //前面的加号是为了将字符串转换为数字
    resultOutput.innerHTML = +formerInput.value + +laterInput.value;
}
// 减
function subtractHandler() {
    sign.innerHTML = '-';
    //减法不用将字符串转换为数字,直接运算
    resultOutput.innerHTML = formerInput.value - laterInput.value;
}
// 乘
function multiplyHandler() {
    sign.innerHTML = '×';
    resultOutput.innerHTML = formerInput.value * laterInput.value;
}
// 除
function divideHandler() {
    sign.innerHTML = '÷';
    resultOutput.innerHTML = formerInput.value / laterInput.value;
}

0x2 结构和行为分离

//HTML结构改变,行为与结构分离,删除onclick时间,统一加上btn类。
<input type="button" value="+" class="btn" />
<input type="button" value="-" class="btn" />
<input type="button" value="×" class="btn" />
<input type="button" value="÷" class="btn" />

//JavaScript代码
// 获取元素
var calculator = document.querySelector('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');

//这里querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问,索引值从 0 开始。
var btns = calculator.querySelectorAll('.btn');

// 绑定事件
// +
btns[0].onclick = addHandler; //绑定函数名,不要带括号表示执行。
// -
btns[1].onclick = subtractHandler;
// ×
btns[2].onclick = multiplyHandler;
// ÷
btns[3].onclick = divideHandler;

// 加
function addHandler() {
    sign.innerHTML = '+';
    resultOutput.innerHTML = +formerInput.value + +laterInput.value;
}
// 减
function subtractHandler() {
    sign.innerHTML = '-';
    resultOutput.innerHTML = formerInput.value - laterInput.value;
}
// 乘
function multiplyHandler() {
    sign.innerHTML = '×';
    resultOutput.innerHTML = formerInput.value * laterInput.value;
}
// 除
function divideHandler() {
    sign.innerHTML = '÷';
    resultOutput.innerHTML = formerInput.value / laterInput.value;
}

0x3 循环结构

主要对上一段代码中绑定事件做优化

//增加title更加语义化。
<input type="button" value="+" class="btn" title="add" />
<input type="button" value="-" class="btn" title="subtract" />
<input type="button" value="×" class="btn" title="multiply" />
<input type="button" value="÷" class="btn" title="divide" />

//JavaScript代码,仅对绑定事件优化
//绑定事件,通过循环结构绑定事件
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        switch (this.title) {
            case 'add':
                addHandler();
                break;
            case 'subtract':
                subtractHandler();
                break;
            case 'multiply':
                multiplyHandler();
                break;
            case 'divide':
                divideHandler();
                break;
        }
    };
}

0x4 函数提取

不希望代码暴露过多的细节,可以利用函数封装代码。

//JavaScript代码
//获取元素部分不变
//绑定事件
each(btns, function (index, elem) {
    elem.onclick = function () {
        switch (this.title) {
            case 'add':
                addHandler();
                break;
            case 'subtract':
                subtractHandler();
                break;
            case 'multiply':
                multiplyHandler();
                break;
            case 'divide':
                divideHandler();
                break;
        }
    };
});

// 遍历
function each(array, fn) {
    for (var i = 0; i < array.length; i++) {
        fn(i, array[i]);
    }
}

// 更新符号
function updateSign(symbol) {
    sign.innerHTML = symbol;
}

// 加法
function add(num1, num2) {
    return +num1 + +num2;
}
// 减法
function subtract(num1, num2) {
    return num1 - num2;
}
// 乘法
function multiply(num1, num2) {
    return num1 * num2;
}
// 除法
function divide(num1, num2) {
    return num1 / num2;
}

// 输出结果
function outputResult(result) {
    resultOutput.innerHTML = result;
}

// 加
function addHandler() {
    // sign.innerHTML = '+';
    updateSign('+');
    outputResult(add(formerInput.value, laterInput.value));
}
// 减
function subtractHandler() {
    updateSign('-');
    outputResult(subtract(formerInput.value, laterInput.value));
}
// 乘
function multiplyHandler() {
    updateSign('×');
    outputResult(multiply(formerInput.value, laterInput.value));
}
// 除
function divideHandler() {
    updateSign('÷');
    outputResult(divide(formerInput.value, laterInput.value));
}

0x5 管理代码

上一段代码中,获取元素的一部分比较繁琐,改进之

// 获取元素
var wrapElem = document.querySelector('#calculator');
var calculatorElem = {
    formerInput: wrapElem.querySelector('.formerInput'),
    laterInput: wrapElem.querySelector('.laterInput'),
    sign: wrapElem.querySelector('.sign'),
    resultOutput: wrapElem.querySelector('.resultOutput'),
    btns: wrapElem.querySelectorAll('.btn')
};

// 绑定事件
each(calculatorElem.btns, function (index, elem) {
    elem.onclick = function () {
        switch (this.title) {
            case 'add':
                addHandler();
                break;
            case 'subtract':
                subtractHandler();
                break;
            case 'multiply':
                multiplyHandler();
                break;
            case 'divide':
                divideHandler();
                break;
        }
    };
});
//下面做相应改变

0x6 封闭原则

获取元素
var wrapElem = document.querySelector('#calculator');
var calculatorElem = {
    formerInput: wrapElem.querySelector('.formerInput'),
    laterInput: wrapElem.querySelector('.laterInput'),
    sign: wrapElem.querySelector('.sign'),
    resultOutput: wrapElem.querySelector('.resultOutput'),
    btns: wrapElem.querySelectorAll('.btn')
};

// 绑定事件
each(calculatorElem.btns, function (index, elem) {
    elem.onclick = function () {
        updateSign(this.value);
        outputResult(operate(this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.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 +num1 + +num2;
    },
    subtract: 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.resultOutput.innerHTML = result;
}

除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/757.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SQL复杂查询语句

     进行多表连接查询,掌握多表连接查询的连接条件或连接谓词,理解内连接、左连接和右连接的含义并熟练操作。

    慕白
  • JavaScript代码压缩细节

    对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小。

    慕白
  • 关系代数中的除法运算

      这个概念的描述的非常抽象,刚开始学习的同学完全不知所云。这里通过一个实例来说明除法运算的求解过程

    慕白
  • 小程序-云点播

    之前在Web端用 h5connect.js 方式点播视频,现在需要移动到微信小程序中,求大佬解决帮助,急急急.... 谢谢啦!

    用户7418541
  • 《spss统计分析与行业应用案例详解》实例37重复测量方差分析

    重复测量方差分析可以考察观测指标是否会随着测量次数的增加而变化,以及是否会受时间的影响。

    统计学家
  • 阿里四面你都知道吗?

    最近一个朋友跟我说,现在面试太难了,再也不是以前那种随便背几个面试题然后就能拿到offer的时候了。最近朋友准备换工作面试了阿里,然后和我交流了下他遇到的一些面...

    java金融
  • 【Flutter桌面篇】Flutter&Windows应用尝鲜

    张风捷特烈
  • 【专知-Java Deeplearning4j深度学习教程05】无监督特征提取神器—AutoEncoder:图文+代码

    【导读】主题链路知识是我们专知的核心功能之一,为用户提供AI领域系统性的知识学习服务,一站式学习人工智能的知识,包含人工智能( 机器学习、自然语言处理、计算机视...

    WZEARW
  • 线程安全性问题入门

    上下文切换,切换的时候需要保持任务的状态, 以便后续接着任务的状态执行。比较消耗CPU 资源。

    chaplinthink
  • vue实现侧边栏手风琴效果

     模板 ? 代码如下 html <template> <div class="header"> <ul> <!-...

    李文杨

扫码关注云+社区

领取腾讯云代金券