当前位置：首页 > news >正文

站长工具seo查询软件自己的网站

news 2026/4/6 6:43:39

站长工具seo查询软件,自己的网站,上海门户网站开发,营销型网站文案怎么做Vue3TypeScript实现解释器模式：电脑配置价格计算器解释器模式（Interpreter Pattern）听起来是不是有点像“程序员在电脑组装店里搞了个配置价格计算器”？它是一种行为型设计模式，通过定义语法规则来解析和计算简单的表…

Vue3+TypeScript实现解释器模式：电脑配置价格计算器

解释器模式（Interpreter Pattern）听起来是不是有点像“程序员在电脑组装店里搞了个配置价格计算器”？它是一种行为型设计模式，通过定义语法规则来解析和计算简单的表达式，比如“CPU价格 + 内存价格”。今天我们用Vue3和TypeScript，结合一个“电脑配置价格计算”的幽默例子，带你搞懂解释器模式如何优雅地解析表达式，代码简洁又好玩，保证通俗易懂，笑中带学！

一、解释器模式是什么？

想象你经营一家电脑组装店，客户选了CPU、内存、显卡，想算总价。你可以让客户输入一个表达式，比如“CPU + 内存 + 显卡”，然后系统自动算出价格。解释器模式就像你的“价格计算引擎”：把表达式拆成小块（数字、运算符），按语法规则解析并计算结果，灵活又清晰！

核心角色：

抽象表达式（Abstract Expression）：定义解析接口。
终结符表达式（Terminal Expression）：表示原子项，如零件价格。
非终结符表达式（Non-terminal Expression）：表示组合规则，如加法。
环境角色（Context）：存储额外信息，如零件价格表。

我们用Vue3+TypeScript实现一个前端版的“电脑配置价格计算器”，让你边算价格边学解释器模式！

二、代码实现

1. 抽象表达式接口

// src/interpreters/PriceExpression.ts
export interface PriceExpression {interpret(context: PriceContext): number;
}

幽默讲解：PriceExpression是“价格计算器的说明书”，规定每个表达式（零件或运算）必须能算出价格。就像店里贴个牌子：“不管啥配置，都得给我算出钱来！”

2. 终结符表达式

// src/interpreters/ComponentExpression.ts
import { PriceExpression } from './PriceExpression';
import { PriceContext } from './PriceContext';export class ComponentExpression implements PriceExpression {private componentName: string;constructor(componentName: string) {this.componentName = componentName;}interpret(context: PriceContext): number {return context.getPrice(this.componentName);}
}

幽默讲解：ComponentExpression是“零件价格标签”，表示单个零件（比如CPU）。它从价格表（上下文）里查价格，简单直接，像店员翻账本：“CPU多少钱？2000！”

3. 非终结符表达式

// src/interpreters/AddExpression.ts
import { PriceExpression } from './PriceExpression';
import { PriceContext } from './PriceContext';export class AddExpression implements PriceExpression {private left: PriceExpression;private right: PriceExpression;constructor(left: PriceExpression, right: PriceExpression) {this.left = left;this.right = right;}interpret(context: PriceContext): number {return this.left.interpret(context) + this.right.interpret(context);}
}

幽默讲解：AddExpression是“加法运算符”，把两个价格（比如CPU和内存）加起来。就像店员拿计算器：“CPU 2000 + 内存 800 = 2800！” 复杂表达式靠它组合！

4. 环境角色

// src/interpreters/PriceContext.ts
export class PriceContext {private priceMap: Map<string, number>;constructor() {this.priceMap = new Map([['CPU', 2000],['内存', 800],['显卡', 5000],]);}getPrice(component: string): number {return this.priceMap.get(component) || 0;}
}

幽默讲解：PriceContext是“零件价格账本”，存着每种零件的报价。计算器查价格时翻这本账本，找不到就当0元，省得客户乱填零件名！

5. Vue3组件：价格计算界面

// src/components/PriceCalculator.vue
<script setup lang="ts">
import { ref } from 'vue';
import { PriceContext } from '../interpreters/PriceContext';
import { ComponentExpression } from '../interpreters/ComponentExpression';
import { AddExpression } from '../interpreters/AddExpression';const context = new PriceContext();
const expression = ref('CPU + 内存 + 显卡');
const result = ref('');const calculate = () => {try {// 简单解析表达式（仅支持 A + B + C 格式）const parts = expression.value.split('+').map(part => part.trim());let expr: PriceExpression = new ComponentExpression(parts[0]);for (let i = 1; i < parts.length; i++) {expr = new AddExpression(expr, new ComponentExpression(parts[i]));}const total = expr.interpret(context);result.value = `💰 总价：${total}元`;} catch (error) {result.value = `😅 表达式错误：${(error as Error).message}`;}
};
</script><template><div><h2>电脑配置价格计算器</h2><div><label>价格表达式：</label><input v-model="expression" placeholder="如：CPU + 内存 + 显卡" /></div><button @click="calculate">计算价格</button><p>{{ result }}</p></div>
</template>