Gorsonpy的计算器

Gorsonpy的计算器

      • 0.页面及功能展示
      • 1. PSP表格
      • 2.解题思路描述
      • 3.设计实现过程
      • 4.程序性能改进
      • 5.异常处理
      • 6.单元测试展示
      • 7.心路历程和收获

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

0.页面及功能展示

源代码地址
在这里插入图片描述

1. PSP表格

PSPPersonal Software Process Stages预估耗时(分钟)实际耗时(分钟)
Planning计划6060
• Estimate• 估计这个任务需要多少时间1515
Development开发700700
• Analysis• 需求分析 (包括学习新技术)100100
• Design Spec• 生成设计文档6060
• Design Review• 设计复审3030
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)3030
• Design• 具体设计6060
• Coding• 具体编码300300
• Code Review• 代码复审4545
• Test• 测试(自我测试,修改代码,提交修改)6060
Reporting报告9090
• Test Repor• 测试报告3030
• Size Measurement• 计算工作量1515
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划4545
合计850850

2.解题思路描述

  1. 数据结构课上说过,运算式的表达本质是一个栈的过程。因为一个表达式往往会含有非常多的匹配情况(加上三角函数、阶乘等尤其如此,优先级、合不合法等很难判断清楚),所以在一个短暂的工期内想自己实现出一个不出纰漏、完美的轮子是很困难且几乎不可能的。所以后端计算的逻辑有必要用现成的计算库。
  2. 语言的选择,一开始我选用的Go+Fyne图形库的方案。然而因为Go本身GUI的基础薄弱,Fyne库提供的页面也很差强人意。后遂考虑HTML+CSS+JS的方案。中途有考虑过要不要用Go-webview2,把计算逻辑移到Go来做。发现实现较为困难,且有些大材小用,遂放弃。
  3. 原先没学过JS,但听说过精度很差,需要寻找一个精度比较高的计算库来完成计算。

3.设计实现过程

写一个Toy计算器并不是很大的工程,核心思路其实就是创建两个字符串,一个字符串作为显示给用户看的字符串,一个字符串作为最后扔给JS计算库计算的字符串。

var expression = ""; //实际运算的表达式
  1. 整体的HTML结构是一个表单:
<div class="center"><h1>$Gorsonpy$ 的 计算器</h1><a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a><form name="calculator"><button type="button" id="clear" class="btn other" value="clear" onclick="clear();">$CE$</button><button type="button" id="clear" class="btn other" value="BACK" onclick="back();"></button><input type="text" id="display"><br><input type="button" class="btn number" value="7" onclick="get(this.value);"><input type="button" class="btn number" value="8" onclick="get(this.value);"><input type="button" class="btn number" value="9" onclick="get(this.value);"><input type="button" class="btn operator" value="+" onclick="get(this.value);"><input type="button" class="btn operator" value="(" onclick="get(this.value);"><input type="button" class="btn operator" value="log" onclick="get_with_left_bracket(this.value);"><input type="button" class="btn operator" value="tan" onclick="get_with_left_bracket(this.value);"><input type="button" class="btn operator" value="atan" onclick="get_with_left_bracket(this.value);"><br><input type="button" class="btn number" value="4" onclick="get(this.value);"><input type="button" class="btn number" value="5" onclick="get(this.value);"><input type="button" class="btn number" value="6" onclick="get(this.value);"><input type="button" class="btn operator" value="*" onclick="get(this.value);"><input type="button" class="btn operator" value=")" onclick="get(this.value);"><button type="button" class="btn operator" value="x^y" onclick="pow();">$x^y$</button><input type="button" class="btn operator" value="asin" onclick="get_with_left_bracket(this.value);"><input type="button" class="btn operator" value="!" 
...
  1. 按钮关联一些函数:
/* recebe os valores */function get(value) {if (document.getElementById("display").value === errMsg) {document.getElementById("display").value = "";}document.getElementById("display").value += value;expression += value;}function pow() {if (document.getElementById("display").value === errMsg) {document.getElementById("display").value = "";}document.getElementById("display").value += "^";expression += "^";}...
  1. 按下等号的时候计算:
function calculates() {document.getElementById("display").value = "";var result = "";if (expression === "") {document.getElementById("display").value = "";expression = "";} else {try {result = math.evaluate(expression, customSymbols);} catch (error) {console.error("An error occurred while evaluating the expression: " + error);result = errMsg; // 设置一个错误提示}document.getElementById("display").value = result;expression = "";}};

4.程序性能改进

主要是选一个好轮子。因为性能的瓶颈一定是在于正则匹配和解析表达式。自己去胡乱优化也不会有什么效果。我选用的是Math.js库而非原生的eval(),因为原生的eval()算的不准,而且会有安全问题,因为eval总是试图解析字符串内容,无论其是否具有危害。

math.config({number: 'BigNumber',precision: 64,});

下面是一个 0.1 + 0.2 = ? 0.1 + 0.2 = ? 0.1+0.2=?的问题,对比一下:
原生的eval:
在这里插入图片描述
math. evaluate:
在这里插入图片描述

5.异常处理

就是在math.evaluate解析的时候catch异常,并赋予用户一个提示信息.此外,对于除0,溢出等情况,evaluate自动会给出一个infinity。

try {result = math.evaluate(expression, customSymbols);
} catch (error) {console.error("An error occurred while evaluating the expression: " + error);result = errMsg; // 设置一个错误提示 
}

6.单元测试展示

在单元测试这里我遇到了一些困难,主要是JS的这个引文件功能实在太bug了?会遇到各种各样难以明说的错误。因为要做单元测试用Jest框架,就要把之前内嵌在html的js文件分离出来,然而这样又会有新的问题,就是js之间互相引用的问题。经过一番折腾我得出一个折中的办法,要做单元测试的时候把文件分离出来做单元测试,要运行的话把js代码贴回去。
因为我的代码很短,所以单元测试很快就做好了:
在这里插入图片描述

test("test add 7 + 8 = 15", () => {clearf();get(7)get("+")get(8)calculates()expect(document.getElementById("display").value).toBe("15")
})test("test sub 1 - 2 = -1", () => {clearf();get(1)get("-")get(2)calculates()expect(document.getElementById("display").value).toBe("-1")
})
...

7.心路历程和收获

  为了设计一个比较美观的前端页面,我去学习了HTML+CSS+JS这前端三件套。体验到了前端的魅力所在。我学习了如何让自己的代码变得用户友好,能够考虑到各种错误情况并给予用户错误信息,而不是程序崩溃,同时学习了如何对代码做好单元测试。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/93190.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker基础学习

1. 安装docker #安装 yum 源 docker wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo #安装 docker 此处安装的是18版本的&#xff0c;还有19,20等等更高版本 yum -y install docker-ce-18.06.1.ce-3.el7 #…

SVM(上):如何用一根棍子将蓝红两色球分开?

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者:秋无之地 🐴简介:CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作,主要擅长领域有:爬虫、后端、大数据开发、数据分析等。 🐴欢迎小伙伴们点赞👍🏻、收藏⭐️、…

Config

title: “Config” createTime: 2022-01-04T17:12:4708:00 updateTime: 2022-01-04T17:12:4708:00 draft: false author: “name” tags: [“config”] categories: [“docker”] description: “docker run的相关配置文件” daemon.json {"api-cors-header":"…

软考 系统架构设计师系列知识点之软件架构风格(1)

这个十一注定是一个不能放松、保持“紧”的十一。由于报名了全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff0c;11月4号就要考试&#xff0c;因此8天长假绝不能荒废&#xff0c;必须要好好利用起来。现在将各个核心知识点一一进行提炼并做记录。 所…

〔024〕Stable Diffusion 之 模型训练 篇

✨ 目录 🎈 训练集准备🎈 训练集预处理🎈 数据清洗🎈 下载训练源码🎈 训练文件配置🎈 脚本运行🎈 实战测试🎈 训练集准备 声明: 该文中所涉及到的女神图片均来自于网络,仅用作技术教程演示,图片已码一般同一个训练集需要准备 20~40 张不同角度的照片,当然可…

《XSS-Labs》01. Level 1~10

XSS-Labs 索引Level-1题解 Level-2题解 Level-3题解总结 Level-4题解 Level-5题解总结 Level-6题解 Level-7题解 Level-8题解 Level-9题解 Level-10题解 靶场部署在 VMware - Win7。 靶场地址&#xff1a;https://github.com/do0dl3/xss-labs 只要手动注入恶意 JavaScript 脚本…

一文拿捏基于redis的分布式锁、lua、分布式性能提升

1.分布式锁 jdk的锁&#xff1a; 1、显示锁&#xff1a;Lock 2、隐式锁&#xff1a;synchronized 使用jdk锁保证线程的安全性要求&#xff1a;要求多个线程必须运行在同一个jvm中 但现在的系统基本都是分布式部署的&#xff0c;一个应用会被部署到多台服务器上&#xff0c;s…

Android 布局浅析

Android布局绘制流程: 从根节点 noodview 递归调用每一级子view 的 Mesure 进行测量 然后 从根节点 noodview 递归调用每一级子view 的 layout 方法,把测量过程得出的子view的位置和size进行传递给子view ,然后子view保存参数 测量是动态化,是需要根view和子view 首先nood…

数学建模Matlab之检验与相关性分析

只要做C题基本上都会用到相关性分析、一般性检验等&#xff01; 回归模型性能检验 下面讲一下回归模型的性能评估指标&#xff0c;用来衡量模型预测的准确性。下面是每个指标的简单解释以及它们的应用情境&#xff1a; 1. MAPE (平均绝对百分比误差) 描述: 衡量模型预测的相对…

Redis命令行使用Lua脚本

Redis命令行使用Lua脚本 Lua脚本在Redis中的使用非常有用&#xff0c;它允许你在Redis服务器上执行自定义脚本&#xff0c;可以用于复杂的数据处理、原子性操作和执行多个Redis命令。以下是Lua脚本在Redis中的基本使用详细讲解&#xff1a; 运行Lua脚本&#xff1a; 在Redis中…

UG\NX二次开发 用程序修改“用户默认设置”

文章作者:里海 来源网站:《里海NX二次开发3000例专栏》 简介 可以用程序修改“用户默认设置”吗?下面是用代码修改“用户默认设置->基本环境->用户界面->操作记录->操作记录语言”的例子。 效果 代码 #include <uf_defs.h> #include <NXOpen/NXExcept…

浏览器指定DNS

edge--设置 https://dns.alidns.com/dns-query

【ARMv8 SIMD和浮点指令编程】NEON 加载指令——如何将数据从内存搬到寄存器(LDxLDxR)?

将内存中的数据搬到 NEON 寄存器,有很多指令可以完成,熟悉这些指令是必须的。 1 LD1 (multiple structures) 将多个单元素结构加载到一个,两个,三个或四个寄存器上。该指令从内存中加载多个单元结构,并将结果写入一、二、三或四个 SIMD&FP 寄存器。 无偏移 一个寄存…

nodejs+vue流浪猫狗救助领养elementui

第三章 系统分析 10 3.1需求分析 10 3.2可行性分析 10 3.2.1技术可行性&#xff1a;技术背景 10 3.2.2经济可行性 11 3.2.3操作可行性&#xff1a; 11 3.3性能分析 11 3.4系统操作流程 12 3.4.1管理员登录流程 12 3.4.2信息添加流程 12 3.4.3信息删除流程 13 第四章 系统设计与…

常见的异常有哪些?

NullPointerException(空指针异常):当试图访问对象的属性或调用对象的方法,但该对象为 null 时,会引发 NullPointerException。ArrayIndexOutOfBoundsException(数组下标越界异常):当尝试访问数组中不存在的索引位置时,会引发 ArrayIndexOutOfBoundsException。IndexO…

LeetCode 面试题 08.02. 迷路的机器人

文章目录 一、题目二、C# 题解 一、题目 设想有个机器人坐在一个网格的左上角&#xff0c;网格 r 行 c 列。机器人只能向下或向右移动&#xff0c;但不能走到一些被禁止的网格&#xff08;有障碍物&#xff09;。设计一种算法&#xff0c;寻找机器人从左上角移动到右下角的路径…

智能驾驶、智能家居、智能工业中的 AI 关键基础设施,半导体厂商恩智浦的角色是什么?

我们来看一条七年前的真实新闻报道&#xff0c;2016 年《福布斯》在报道中提到“2020 年会有 1000 万台的自动驾驶汽车”。然而 2023 年的现在&#xff0c;真正实现 L4 级别自动驾驶的汽车&#xff0c;仍然远远没有达到这个预测的数量。 另一边&#xff0c;数据显示&#xff0c…

零代码编程:用ChatGPT将特定文件标题重命名为特定格式

一个文件夹里面是同一系列文件&#xff0c;但是有两种命名方法&#xff0c;现在想把文件标题格式统一。 在ChatGPT中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个批量重命名的任务&#xff0c;具体步骤如下&#xff1a; 打开本地电脑文件夹&#xf…

【LeetCode热题100】--148.排序链表

148.排序链表 对链表进行排序最适合的算法就是归并排序&#xff1a; 对链表自顶向下归并排序的过程&#xff1a; 找到链表的中点&#xff0c;以中点为分界&#xff0c;将链表拆分成两个子链表&#xff0c;寻找链表的中点可以使用快慢指针的做法&#xff0c;快指针每次移动 2步…

数据集笔记:杭州地铁刷卡数据

1 数据位置&#xff1a; 链接: https://pan.baidu.com/s/1iLHomv5NRodB_3jr7FcFow 提取码: arse 全球城市计算AI挑战赛_算法大赛_天池大赛-阿里云天池的赛制 (aliyun.com) 2 数据集介绍 杭州20190101至20190125共25天地铁刷卡数据记录&#xff0c;共涉及3条线路81个地铁站约…