Calculator

源代碼鏈接

0. 界面展示

1. PSP表格

2. 解題思路描述

要求實(shí)現(xiàn)一個(gè)具有圖形化界面簡(jiǎn)易計(jì)算器

1. 編程語言選擇。原本打算使用 Java，Python 等的 GUI 框架來實(shí)現(xiàn)一個(gè)簡(jiǎn)單圖形化界面，但是界面要實(shí)現(xiàn)的好看比較困難，最后選擇 html + css + js 來實(shí)現(xiàn)。
2. 界面設(shè)計(jì)。一般的計(jì)算器都比較簡(jiǎn)陋，要做一個(gè)比較好看的計(jì)算器需要花點(diǎn)時(shí)間來設(shè)計(jì) UI 界面，以前有開發(fā)移動(dòng)端的經(jīng)驗(yàn)，看過比較多的 UI 設(shè)計(jì)，這點(diǎn)比較容易。
3. 核心功能。實(shí)現(xiàn)計(jì)算功能用 js 其實(shí)就是字符串的計(jì)算，計(jì)算邏輯的實(shí)現(xiàn)是比較困難的，特別是加上了科學(xué)計(jì)算以后。這點(diǎn)可以去 github 和 stackflow 上看看。
4. exe打包。作業(yè)要求要生成 exe 文件，第一次遇到 html 生成 exe 的情況。查找到軟件 HTML2EXE 可以實(shí)現(xiàn)此需求（超好用）。

3. 設(shè)計(jì)與實(shí)現(xiàn)過程

項(xiàng)目由 html、css、js 完成。

1. 將所有的按鍵及屬性裝在一個(gè)數(shù)組內(nèi)，便于后續(xù)代碼的編寫

   let calculator_buttons = [
       {
           name: "square-root", symbol: "√", formula: "Math.sqrt(", type: "math_function"
       }, {
           name: "square", symbol: "x2", formula: POWER, type: "math_function"
       }
       .....
       ];
   

2. 將輸入的字符分為 operation (顯示的字符串) 和 formula (計(jì)算使用的字符串)

   let data = {
       operation: [], formula: [],
   }
   

3. 點(diǎn)擊等于的時(shí)候進(jìn)行計(jì)算

   function calculator(button) {
       if (button.type === 'operator') {
           data.operation.push(button.symbol)
           data.formula.push(button.formula)
       }
       	......
       else if (button.type === 'math_function') {
           let symbol, formula;
           if (button.name === 'factorial') {
               symbol = "!"
               formula = button.formula
               data.operation.push(symbol)
               data.formula.push(formula)
           } 
           ......
       } else if (button.type === 'key') {
           if (button.name === 'clear') {
               data.operation = []
               data.formula = []
               updateOutputResult(0)
           } 
           ......
       } else if (button.type === 'calculate') {
           formula_str = data.formula.join('')
           // 生成計(jì)算使用的字符串
           ......
           let result
           try {
               // 計(jì)算結(jié)果
               ......
           } catch (error) {
               if (error instanceof SyntaxError) {
                   result = "SyntaxError"
                   updateOutputResult(result)
                   return
               }
           }
           ans = result  // 保存上一次計(jì)算結(jié)果
           data.operation = [result]
           data.formula = [result]
           updateOutputResult(result)
           return
       }
       updateOutputOperation(data.operation.join(''))
   }
   

4. 將 formula 生成計(jì)算使用的字符串

   let POWER_SEARCH_RESULT = search(data.formula, POWER)
           let FACTORIAL_SEARCH_RESULT = search(data.formula, FACTORIAL)
           const BASES = powerBaseGetter(data.formula, POWER_SEARCH_RESULT)
           BASES.forEach(base => {
               let toreplace = base + POWER
               let replacement = "Math.pow(" + base + ",";
               formula_str = formula_str.replace(toreplace, replacement)
           })
           const NUMBERS = factorialNumGetter(data.formula, FACTORIAL_SEARCH_RESULT)
           NUMBERS.forEach(number => {
               formula_str = formula_str.replace(number.toReplace, number.replacement)
           })
   

   

5. 由于 js 的 eval 產(chǎn)生的結(jié)果會(huì)有多數(shù)的小數(shù)，這里進(jìn)行優(yōu)化，對(duì)小數(shù)取兩位小數(shù)，對(duì)整數(shù)則正常輸入

   const r = /^\+?[1-9][0-9]*$/;
               result = eval(formula_str);
               if (!r.test(result)) {
                   result = parseFloat(result.toFixed(2));
               }
   

   
   

   6. html 生成 exe

   

4. 程序性能改進(jìn)

1. 字符串處理改進(jìn)

   在剛開始，對(duì)輸入的數(shù)字或者運(yùn)算符進(jìn)行簡(jiǎn)單的拼接字符串僅僅可以實(shí)現(xiàn)簡(jiǎn)單的加減乘除，難以實(shí)現(xiàn)三角函數(shù)等科學(xué)運(yùn)算。改進(jìn)之后，將顯示和計(jì)算的字符串分開存儲(chǔ)，這樣便于計(jì)算操作。

2. 減少DOM操作

   盡量減少對(duì)DOM的頻繁操作，將多個(gè)DOM操作合并成一個(gè)，使用DocumentFragment來減少DOM重繪。

5. 單元測(cè)試展示

1. 本項(xiàng)目采用 jest 進(jìn)行單元測(cè)試，這個(gè)測(cè)試框架用起來十分便利

   {
     "devDependencies": {
       "jest": "^29.7.0",
       "jsdom": "^22.1.0"
     },
     "scripts": {
       "test": "jest",
       "coverage": "jest --coverage"
     }
   }
   
   

2. 測(cè)試代碼

   test("7 + 8 = 15", () => {
       calculator(calculator_buttons[4]) // clear
       calculator(calculator_buttons[10])  // 7
       calculator(calculator_buttons[36]) // +
       calculator(calculator_buttons[11])  // 8
       expect(document.querySelector('.operation .value').innerHTML).toBe("7+8")
       calculator(calculator_buttons[35]) // equal
       expect(document.querySelector('.result .value').innerHTML).toBe("15")
   })
   test("√(16) = 4", () => { ...... }
   test("(2 + 2)^(3) = 64", () => { ...... }
   test("exp(2) ≈ 7.39", () => { ...... }
   test("+2^(3) = 8", () => { ...... }
   

3. 構(gòu)造數(shù)據(jù)及優(yōu)化覆蓋率

   構(gòu)造測(cè)試數(shù)據(jù)主要是計(jì)算器的運(yùn)算符都要用上，另外要注意一下比較少見的數(shù)據(jù)，比如 “+2^(3) = 8”。比較偏的地方注意到了，覆蓋率就上去了

4. 覆蓋率結(jié)果

6. 心路歷程與收獲

? 項(xiàng)目的初衷是創(chuàng)建一個(gè)科學(xué)計(jì)算器的Web應(yīng)用，使用戶能夠執(zhí)行基本的數(shù)學(xué)運(yùn)算，如加減乘除，以及更高級(jí)的科學(xué)計(jì)算。在實(shí)現(xiàn)過程中我意識(shí)到用戶界面對(duì)于計(jì)算器的吸引力和可用性至關(guān)重要，因此，我花了一些時(shí)間完成了一個(gè)直觀且美觀的UI。

? 通過這個(gè)項(xiàng)目，我學(xué)到了很多關(guān)于前端開發(fā)的知識(shí)和技巧，提高了HTML、CSS和JavaScript編程的能力，學(xué)會(huì)了如何創(chuàng)建具有可視化界面的Web應(yīng)用。此外，我還學(xué)會(huì)了如何設(shè)計(jì)用戶友好的界面，并如何進(jìn)行測(cè)試和調(diào)試以確保應(yīng)用的質(zhì)量。文章來源地址http://www.zghlxwxcb.cn/news/detail-722229.html

到了這里，關(guān)于前端實(shí)現(xiàn)科學(xué)計(jì)算器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！