乐趣区

关于javascript:uniapp-仿-ios-计算器功能

jiezi

前言：该我的项目是仿照 ios 计算器 app 实现，局部交互细节未实现。主体逻辑是依据本人教训实现，有问题之处欢送指出。

Github 仓库地址

应用 uni-app 搭建我的项目后在 index.vue 编写 UI 动态页代码，同级创立 utils.js 文件，寄存一些常量和工具函数。

// index.vue
<template>
    <view class="content">
        <view class="view">
            <span :class="{lessen: viewValue.length >= 7}">
                {{viewValue}}
            </span>
        </view>

        <!-- 按钮 -->
        <view class="btns">
            <view v-for="item in btns" :key='item.text' :style="item.style" :class="item.className" :data-text="item.text"></view>
        </view>
    </view>
</template>

<script>
import {KEYS, symbolReg1, symbolReg2, symbolReg3} from './utils';
export default {data() {
        return {
            // 渲染值
            viewValue: 0,
            btns: KEYS && KEYS.map(item => {let style = {}
                let className = 'default'

                // 雷同类型的增加 class
                if (symbolReg3.test(item) || item === KEYS[KEYS.length - 1]) {className = 'origin'}
                if (new RegExp(`${KEYS[0]}|(?=${KEYS[1]})|${KEYS[2]}`).test(item)) {className = 'gray'}

                // 独自辨别款式
                if (item === KEYS[KEYS.length - 3]) {style.width = 'calc(144rpx * 2 + 100% / 4 / 4)'
                    style.justifyContent = 'flex-start'
                    style.padding = '0 50rpx'
                }
                if (item === KEYS[1]) {style.fontSize = '50rpx'}
                if (item === KEYS[0]) {style.fontSize = '50rpx'}

                return {
                    text: item,
                    style,
                    className
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    background: #000000;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 30rpx;
    font-family: PingFangSC-Regular, sans-serif;

    > view {
        width: 100%;
        color: #ffffff;
    }

    .view {
        text-align: right;
        font-size: 168rpx;
        line-height: 100px;
        > .lessen {font-size: 138rpx;}
        > span {
            display: inline-block;

            box-sizing: border-box;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
            overflow: hidden;
            border-radius: 20rpx;
            &::selection {
                background-color: #333;
                color: #fff;
            }
        }
    }

    .btns {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 870rpx;
        > view {
            width: 144rpx;
            height: 144rpx;
            border-radius: 144rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 60rpx;
            color: #ffffff;
            transition: all .3s;
            background: #333333;
            &.origin {
                    background: #fea00c;
                    &:active {
                            background: #ffffff;
                            color: #fea00c;
                    }
            }
            &.gray {
                    background: #a5a5a5;
                    color: #000000;
                    &:active {background: #eeeeee;}
            }
            &.default {
                    &:active {background: #bbbbbb;}
            }
            &::after {content: attr(data-text);
            }
        }
    }
}
</style>

// utils.js
export const KEYS = ['AC', '+/-', '%', '÷', '7', '8', '9', '×', '4', '5', '6', '-', '1', '2', '3', '+', '0', '.', '=']
// 乘除正则
export const symbolReg1 = new RegExp(`^[${KEYS[4 - 1]}${KEYS[2 * 4 - 1]}]$`)
// 加减正则
export const symbolReg2 = new RegExp(`^[\\${KEYS[3 * 4 - 1]}${KEYS[4 * 4 - 1]}]$`)
// 加减乘除正则
export const symbolReg3 = new RegExp(`^[${KEYS[4 - 1]}${KEYS[2 * 4 - 1]}\\${KEYS[3 * 4 - 1]}${KEYS[4 * 4 - 1]}]$`)

到这一步页面成果曾经进去了然而还没有点击事件。这里正则中是应用动静正则形式，防止 KEYS 常量中数据半角全角符号扭转而无奈匹配。

这里应用事件委托形式，给页面 class 为 btns 的元素增加点击事件 <view class="btns" @click="handleClick">，而不是在 v-for 循环元素上增加事件。在 methods 属性中增加 handleClick 函数。

handleClick({target}) {
    // 判断是否点击元素
    if (target.dataset.text == undefined) return

    switch (target.dataset.text) {
        // AC 点击
        case this.btns[0].text:
            break;
        // 加减乘除点击
        case KEYS[4 - 1]:
        case KEYS[2 * 4 - 1]:
        case KEYS[3 * 4 - 1]:
        case KEYS[4 * 4 - 1]:
            break;
        // 等于
        case KEYS[KEYS.length - 1]:
            break;
        // 取反
        case KEYS[1]:
            break;
        // 百分号
        case KEYS[2]:
            break;
        // 数字
        default:

    }
},

编写好主体逻辑之后一步步欠缺，先补充辅助变量和数字点击逻辑

import {KEYS, symbolReg1, symbolReg2, symbolReg3} from './utils';
// 计算逻辑
let computes = []

// 判断最初一个是否为计算符号
const isSymbol = () => {return symbolReg3.test(computes[computes.length - 1])
}
//...
default:
    // `viewValue` 的长度在 `ios` 中只有 `9` 位数，存在 `.` 的时候有 `10` 位数，所以在输出数字时也须要加判断。判断是否存在小数点
    if (this.viewValue.length > (String(this.viewValue).indexOf('.') != -1 ? 9 : 8)) {return}
    
    // 判断是否最初一个是否是字符
    if (isSymbol()) {
        this.viewValue = target.dataset.text
        computes.push(this.viewValue)
    } else {
        // 判断是否存在 .
        if (String(this.viewValue).indexOf('.') != -1 && target.dataset.text === '.') {return}
        // 三元判断是否为点, 防止 Number(.) 会为 NaN
        this.viewValue += this.viewValue === 0
            ? target.dataset.text !== '.' ? Number(target.dataset.text) : target.dataset.text
            : target.dataset.text
        // 替换栈最初一个数字
        computes[computes.length > 0 ? computes.length - 1 : 0] = this.viewValue
    }

    // 批改页面 AC 文字
    this.btns[0].text = computes.length > 0 || this.viewValue > 0 ? 'C' : KEYS[0]
//...

补充取反和百分号逻辑

// 取反
case KEYS[1]:
    // 兼容 - 0 的状况
    if (this.viewValue === '-0') {this.viewValue = 0} else {this.viewValue = this.viewValue >= 0 ? '-' + this.viewValue : Math.abs(this.viewValue)
    }
    
    // 这里用 if 判断的话就不须要走 lastIndexOf 循环查找了
    if (computes.length == 1) {computes[0] = this.viewValue
    } else {const lastIndex = computes.lastIndexOf(this.viewValue)
        computes.splice(lastIndex, 1, this.viewValue)
    }
    break;
// 百分号
case KEYS[2]:
    this.viewValue = this.viewValue * 0.01
    if (computes.length == 1) {computes[0] = this.viewValue
    } else {const lastIndex = computes.lastIndexOf(this.viewValue)
        computes.splice(lastIndex, 1, this.viewValue)
    }
    break;

加减乘除符号点击，在 import 下退出辅助变量 countSymbol1、countSymbol2

import {KEYS, symbolReg1, symbolReg2, symbolReg3} 'utils.js'
// ...
// 乘除运算符次数
let countSymbol1 = 0
// 加减
let countSymbol2 = 0
// ...
// 加减乘除点击
case KEYS[4 - 1]:
case KEYS[2 * 4 - 1]:
case KEYS[3 * 4 - 1]:
case KEYS[4 * 4 - 1]:
    // 不能一开始就是符号
    if (computes.length == 0) return

    if (isSymbol()) {
        // 扭转符号
        computes[computes.length - 1] = target.dataset.text
    } else {computes.push(target.dataset.text)
        // 退出统计字符数量
        if (symbolReg1.test(target.dataset.text)) countSymbol1++
        if (symbolReg2.test(target.dataset.text)) countSymbol2++
    }

    break;

等于符号点击，增加计算逻辑函数 numFun，增加辅助变量 cacheLastSymbol，utils.js 文件增加运算函数 operation，在 index.vue 文件中导入 operation。

在 ios 计算器中，当如输出 3 + 3 点击屡次 = 时，会在 第一次等于运算的后果 上始终 + 3，而当输出 3 + 3 + 时会将 3 + 3 的值进行计算出来再进行最初一个加，也就是变成了 6 +，当最初一个是运算符时会始终对运算符前一个数字进行运算，后果会变成 12。

再举一个例子，2 + 5 + 5 + 后果是 27，因为它会先将 2 + 5 + 5 的后果先进行计算，再将的到的后果相加 也就变成了 12 +。2 + 5 * 5 * 后果是 627，它是对 * 先进行计算也就是 2 + 25 *，25 * 25 = 625 再 + 2。

cacheLastSymbol 的作用为存储最初一个字符和最初一个数字，例如：3 + 5 + 会存储 8 和 +，
2 + 5 * 5 * 则会存储 25 和 *，3 + 5 则会贮存 5 和 +。当你点击第二次 = 的时候会拿到第一次的值在拿到 cacheLastSymbol 中贮存的值和运算符进行运算。

// utils.js
/// ...
// 计算结果
export const operation = (num1, num2, symbol) => {
    let num = undefined
    // 这里能够应用 eval 将字符串当做 js 执行, 如果是 × 须要去判断改为 *
    switch (symbol) {case KEYS[4 - 1]:
            num = num1 / num2
            break;
        case KEYS[2 * 4 - 1]:
            num = num1 * num2
            break;
        case KEYS[3 * 4 - 1]:
            num = num1 - num2
            break;
        case KEYS[4 * 4 - 1]:
            num = Number(num1) + Number(num2)
            break;
    }

    // 为 8 次要是 ios 最大为 8 为小数
    return String(parseFloat(Number(num).toPrecision(8)))
}
// index.vue
import {KEYS, symbolReg1, symbolReg2, symbolReg3, operation} from './utils';
// ...
// 存储最初操作符 0 为操作符，1 为值
let cacheLastSymbol = []
/**
 * 计算逻辑
 * @param {string} type 0 加减 1 乘除
 * @param {number} count 次数
 * @returns string
 * */
const numFun = (type, count) => {
    let num = undefined
    for(let i = 1; i <= count; i++) {const index = computes.findIndex(symbol => type === '0' ? symbolReg2.test(symbol) : symbolReg1.test(symbol))
        
        // 这里做容错判断 防止不存在运算符号时进行运算
        if (index == -1) return
        // 进行计算
        // 这里能够应用 eval 将字符串当做 js 执行, 须要去判断 *
        if (index === computes.length - 1) { // 如果最初一个是字符而非数字的状况
            computes.splice(index - 1, 2, operation(computes[index - 1], computes[index - 1], computes[index]))
        } else {computes.splice(index - 1, 3, operation(computes[index - 1], computes[index + 1], computes[index]))
        }

        /**
          * 最初一个是操作符时增加栈中计算的值
          * 假如 2 + 5 * 5 * 4 *
          * 第一次进入时存储 5 * 5 的值，此时 computes 栈中为 [2, '+', '25', '*', '4', '*']
          * 第二次进入时存储 25 * 4 的值，此时 computes 栈中为 [2, '+', '100', '*']
          */
        if (isSymbol()) {cacheLastSymbol[1] = computes[computes.length - 2]
        }
    }
}
// ...
// 等于
case KEYS[KEYS.length - 1]:
    if (cacheLastSymbol.length == 2) { // 第二次点击会进入
        computes[0] = operation(computes[0], cacheLastSymbol[1], cacheLastSymbol[0])
    }
    if (countSymbol1 || countSymbol2) { // 存在操作符时，将操作符退出缓存变量
        if (isSymbol()) { // 判断最初一个是操作符则取操作符前一个
            cacheLastSymbol[0] = computes[computes.length - 1]
            cacheLastSymbol[1] = computes[computes.length - 2]
        } else {cacheLastSymbol[0] = computes[computes.length - 2]
            cacheLastSymbol[1] = computes[computes.length - 1]
        }
    }

    if (countSymbol1) numFun('1', countSymbol1)
    if (countSymbol2) numFun('0', countSymbol2)

    // 革除操作符统计
    countSymbol1 = 0
    countSymbol2 = 0

    if (computes.length == 1) {this.viewValue = computes[0]
    }
    break;

再将渲染数据格式化，methods 增加 formatt 函数，因为咱们只在页面写了一个 formatt，所以在 methods 写也能够，不会存在性能问题，当页面中写了多个 formatt(viewValue) 时倡议改成 computed 计算属性模式，利用计算属性的缓存机制优化性能。

<span :class="{lessen: viewValue.length >= 7}">
    {{formatt(viewValue) }}
</span>

// ...
methods: {
// ...
    formatt(val) {if (/\.$/.test(val)) {return val} else {
            // 最多保留 8 位小数
            return Number(val).toLocaleString('en-US', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 8
            })
        }
    }
}

到这一步根本实现了整体性能。
然而有些细节还是须要欠缺，2 + 5 * 5 * 输出实现时 viewValue 的值应该为 25，当 * 改为 + 时 2 + 5 * 5 + 值应该是 27

增加辅助变量 editStatus，在 utils.js 文件中增加 computeCount 工具函数，加减乘除逻辑中增加代码

// utils.js
// 计算总和值，如果最初一个是字符时不进行计算
export const computeCount = (computes) => {
    // 增加缓存变量
    let cacheIndex = undefined
    let index = undefined
    for (let i in computes) {
        // 如果以后是乘除则跳出循环，并且给 index 赋值下标
        if (symbolReg1.test(computes[i])) {
            index = i
            break
        } else if (!cacheIndex && symbolReg2.test(computes[i])) {cacheIndex = i}
    }
    
    // 如果 computes 中没有乘除符号时，index 会为空，此时将 缓存下的下标赋值给 index
    index = Number(index || cacheIndex)
    // 替换数组内容
    computes.splice(index - 1, 3, operation(computes[index - 1], computes[index + 1], computes[index]))
    
    // 长度大于 2 时阐明还须要进行递归计算
    if (computes.length > 2) {return computeCount(computes)
    } else {return computes[0]
    }
}
// index.vue
import {KEYS, symbolReg1, symbolReg2, symbolReg3, operation, computeCount} from './utils';
// 批改状态 0 不须要操作栈，1 删除栈中倒数第二个符号本身、上一个以及下一个下标，2 删除倒数第一个符号之前的栈，应用 viewValue 代替
let editStatus = 0

// ...
// 加减乘除点击
case KEYS[4 - 1]:
case KEYS[2 * 4 - 1]:
case KEYS[3 * 4 - 1]:
case KEYS[4 * 4 - 1]:
    // ...
    if (computes.length > 3) {
        const previousSymbolIndex = computes.length - 3
        // 判断上一个符号是否是乘除 && 以后符号为加减
        if (symbolReg1.test(computes[previousSymbolIndex]) && symbolReg2.test(target.dataset.text)) {
            // 这里应用 ... 扩大运算符浅克隆 computes 数组，如果是援用类型则须要深克隆
            this.viewValue = computeCount([...computes])
            // console.log('上个乘除以后符号加减', this.viewValue);
            editStatus = 2
        }
        // 上个符号和以后符号 一样的类型
        if ((symbolReg1.test(computes[previousSymbolIndex]) && symbolReg1.test(target.dataset.text)) ||
            (symbolReg2.test(computes[previousSymbolIndex]) && symbolReg2.test(target.dataset.text))
        ) {// console.log('符号雷同');
            this.viewValue = operation(computes[previousSymbolIndex - 1], computes[previousSymbolIndex + 1], computes[previousSymbolIndex])
            editStatus = 1
        }

        if (!editStatus) {this.viewValue = computes[computes.length - 2]
            editStatus = 0
        }
    }

    break;

此时成果曾经实现了，点击等于也没什么问题，然而代码还需优化，因为在下面代码中咱们的值其实曾经计算出来了，当点击等于的时候，相当于又从新计算了一遍栈中的值，所以在点击数字的时候咱们须要革除栈中相应数据，之所以在点击数字时，是因为点击数字后，视图 viewValue 会进行扭转

default:
    if (this.viewValue.length > (String(this.viewValue).indexOf('.') != -1 ? 9 : 8)) {return}

    if (editStatus) {// 等于 1 时阐明上个符号和以后符号雷同，以后栈中数据为 [1, '+', '1', '+'] 格局时进入该 if
        // 将栈中值替换为 ['2', '+']
        if (editStatus === 1) {
            const previousSymbolIndex = computes.length - 3
            // 将后果替换栈中数据
            computes.splice(previousSymbolIndex - 1, 3, operation(computes[previousSymbolIndex - 1], computes[previousSymbolIndex + 1], computes[previousSymbolIndex]))
        }
        
        // 等于 2 时阐明以后栈格局为 [1, '*', '1', '+'] 或者 [1, '+', '2', '*', '3', '+']
        // 将栈中值替换为 ['7', '+']
        if (editStatus === 2) computes.splice(0, computes.length - 1, this.viewValue)
        editStatus = 0
    }

    if (isSymbol()) {
        this.viewValue = target.dataset.text
        computes.push(this.viewValue)
    } else {// ...

到这一步计算逻辑都实现了，不懂的有什么提议或者意见能够在评论区回复或者去 github 上提 issue。

退出移动版