2024年Web前端最全前端实现科学计算器_前端插件计算器，2024年前端面试

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

目录

• • Calculator
    • 0. 界面展示
    • 1. PSP表格
    • 2. 解题思路描述
    • 3. 设计与实现过程
    • 4. 程序性能改进
    • 5. 单元测试展示
    • 6. 心路历程与收获

Calculator

这个作业属于哪个课程	https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里	https://bbs.csdn.net/topics/617294583
这个作业的目标	完成一个具有可视化界面的计算器
其他参考文献	无

源代码链接

0. 界面展示

1. PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	60	40
• Estimate	• 估计这个任务需要多少时间	15	10
Development	开发	700	850
• Analysis	• 需求分析 (包括学习新技术）	100	150
• Design Spec	• 生成设计文档	60	75
• Design Review	• 设计复审	30	45
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	30	40
• Design	• 具体设计	60	90
• Coding	• 具体编码	300	350
• Code Review	• 代码复审	45	60
• Test	• 测试（自我测试，修改代码，提交修改）	60	75
Reporting	报告	90	60
• Test Repor	• 测试报告	30	20
• Size Measurement	• 计算工作量	15	10
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	45	30
	合计	850	950

2. 解题思路描述

要求实现一个具有图形化界面简易计算器

1. 编程语言选择。原本打算使用 Java，Python 等的 GUI 框架来实现一个简单图形化界面，但是界面要实现的好看比较困难，最后选择 html + css + js 来实现。
2. 界面设计。一般的计算器都比较简陋，要做一个比较好看的计算器需要花点时间来设计 UI 界面，以前有开发移动端的经验，看过比较多的 UI 设计，这点比较容易。
3. 核心功能。实现计算功能用 js 其实就是字符串的计算，计算逻辑的实现是比较困难的，特别是加上了科学计算以后。这点可以去 github 和 stackflow 上看看。
4. exe打包。作业要求要生成 exe 文件，第一次遇到 html 生成 exe 的情况。查找到软件 HTML2EXE 可以实现此需求（超好用）。

3. 设计与实现过程

项目由 html、css、js 完成。

1. 将所有的按键及属性装在一个数组内，便于后续代码的编写

let calculator_buttons = [
    {
        name: "square-root", symbol: "√", formula: "Math.sqrt(", type: "math\_function"
    }, {
        name: "square", symbol: "x²", formula: POWER, type: "math\_function"
    }
    .....
    ];

2. 将输入的字符分为 operation (显示的字符串) 和 formula (计算使用的字符串)

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

3. 点击等于的时候进行计算

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('')
        // 生成计算使用的字符串
        ......
        let result
        try {
            // 计算结果
            ......
        } catch (error) {
            if (error instanceof SyntaxError) {
                result = "SyntaxError"
                updateOutputResult(result)
                return
            }
        }
        ans = result  // 保存上一次计算结果
        data.operation = [result]
        data.formula = [result]
        updateOutputResult(result)
        return
    }
    updateOutputOperation(data.operation.join(''))
}

4. 将 formula 生成计算使用的字符串

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！