简易Vue计算器
简易Vue计算器
提问于 2022-04-03 18:11:45
我用Vue js制作了条件计算器，但我需要帮助使它更高效。
https://jsfiddle.net/wbrx9cyp/1/
代码示例：
essentialPackage(){
this.essentialToggle = true;
this.mediumToggle = false;
this.extraToggle = false;
if(this.shortToggle && this.essentialToggle){
this.packagePrice = 1.2;
}else if(this.longToggle && this.essentialToggle){
this.packagePrice = 39;
}
},我已经尽我所能了，但是有太多的if声明
谁能给我指明正确的方向吗？
回答 1
Code Review用户
回答已采纳
发布于 2022-04-04 01:40:04
Introduction
基于您的JSFiddle，您有多个职责存储在一个区域中的代码。分开他们。
下面我用TypeScript编写了一些示例，但是同样的想法可以很容易地转换成JavaScript。
If语句
要回答关于过多if语句的问题，请创建一个包含每个参数并返回结果的计算器组件。我在下面添加了一个例子。
类设计
术语设计
也许术语可以是ShortTerm和LongTerm扩展的类。我不清楚ShortTerm和LongTerm之间的定价有什么不同，但它们应该有一个价格/费率。只是价格不同而已。
class Term {
price: number;
constructor(price: number) {
this.price = price;
}
}
class ShortTerm extends Term {
constructor() {
super(1.5);
}
}
class LongTerm extends Term {
constructor() {
super(1.2);
}
}封装设计
我们可以进一步专门处理我们的包裹。
// Forced to use Pack as Package is a keyword.
class Pack {
price: number;
constructor(price: number) {
this.price = price;
}
}
class Essential extends Pack {
constructor() {
super(1);
}
}
class Medium extends Pack {
constructor() {
super(1.5);
}
}
class Extra extends Pack {
constructor() {
super(1.9);
}
}计算器设计
现在，我们有一些部分的保险提供整洁的组织，我们可以创建一个专门的计算类。
class Calculator {
public calculate(term: number, pack: number) {
return term * pack;
}
}把所有的东西放在一起，
现在我们有两个保险变量和一个计算器。把这些都放在一起吧。
const shortTerm = new ShortTerm();
const medium = new Medium();
const calculate = new Calculator().calculate;
const offer = calculate(shortTerm.price, medium.price)
console.log(offer); // Ouput: 2.25结论
考虑到我们已经设计了我们的3个组件(术语、包、计算器)，我们可以将所有的计算逻辑委托给一个简单的函数。
我们可以将报价进一步设计为一个类，因为它们可能有一个客户端(购买报价的人)、到期日、每个保险变量以及一些方法，比如editOffer()，它将变量从shortTerm更改为LongTerm。
Note
虽然很多类只是价格变量是相同的，但是包、术语等之间可能有具体的区别。
不幸的是，我不知道具体的区别是什么。但是，您仍然可以应用所有这些原则来改进软件设计和提高代码效率。
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://codereview.stackexchange.com/questions/275494
复制相关文章
相似问题
腾讯云开发者
