前端也需 OOP 思维！面向过程 vs 面向对象开发，90% 的人没搞懂

优质文章学习记录

— 7 min read
前端也需 OOP 思维！面向过程 vs 面向对象开发，90% 的人没搞懂

前端也需 OOP 思维！面向过程 vs 面向对象开发，90% 的人没搞懂

今天遇到个挺有代表性的事：我吭哧吭哧写完一个需求，领导 review 代码时说：“你这是面向过程开发的，得用面向对象的思维来写。”

我当时就懵了——前端 JS/TS 里，面向过程和面向对象到底有啥区别？不都是写函数、调 API 吗？

直到我把两段代码摆在一起对比，才恍然大悟。

一个真实场景：用户订单处理

假设我们要处理用户订单，计算价格、验证库存、生成记录。

❌ 面向过程写法（我最初写的）

// 一堆函数，数据到处传递functioncalculateTotal(price:number, quantity:number, discount:number):number{return price * quantity *(1- discount);}functioncheckStock(productId:string, quantity:number):boolean{// 查询数据库或APIconst stock =getStockFromDB(productId);return stock >= quantity;}functioncreateOrder(userId:string, productId:string, quantity:number): Order {const price =getPrice(productId);const discount =getUserDiscount(userId);if(!checkStock(productId, quantity)){thrownewError('库存不足');}const total =calculateTotal(price, quantity, discount);return{ id:generateId(), userId, productId, quantity, total, createdAt:newDate()};}// 数据像皮球一样在函数间传来传去const order =createOrder('user123','product456',2);

面向过程的特点：

  1. 数据和行为分离：数据（price、quantity）和操作它们的函数是分开的
  2. 函数是主角：一切围绕函数展开
  3. 数据公开透明：谁都可以修改数据
  4. 顺序执行：像食谱一样，第一步、第二步…

✅ 面向对象写法（领导想要的）

classOrder{private id:string;private userId:string;private productId:string;private quantity:number;private total:number;private createdAt: Date;constructor(userId:string, productId:string, quantity:number){this.id =generateId();this.userId = userId;this.productId = productId;this.quantity = quantity;this.createdAt =newDate();this.validate();this.calculateTotal();}privatevalidate():void{if(!this.checkStock()){thrownewError('库存不足');}if(this.quantity <=0){thrownewError('数量必须大于0');}}privatecheckStock():boolean{const stock = StockService.getStock(this.productId);return stock >=this.quantity;}privatecalculateTotal():void{const price = ProductService.getPrice(this.productId);const discount = UserService.getDiscount(this.userId);this.total = price *this.quantity *(1- discount);}publicapplyCoupon(couponCode:string):void{const discount = CouponService.validate(couponCode);this.total *=(1- discount);}publicgetSummary(): OrderSummary {return{ id:this.id, productId:this.productId, quantity:this.quantity, total:this.total, createdAt:this.createdAt };}}// 使用：创建一个订单对象，一切都在对象内部处理const order =newOrder('user123','product456',2); order.applyCoupon('SAVE10');const summary = order.getSummary();

面向对象的特点：

  1. 数据和行为封装在一起：订单数据和处理订单的方法在一个类里
  2. 对象是主角：一切围绕对象展开
  3. 数据私有化：外部不能直接修改内部数据
  4. 对象自己负责自己：订单对象知道如何验证自己、计算自己的价格

核心区别：思维模式不同

面向过程：做事

“我要处理订单，先查价格，再查库存，然后计算总价…”

像在餐馆点餐：告诉厨师每一步要做什么。

面向对象：找对象

“我需要一个订单对象，它能自己验证、自己计算价格…”

像在餐馆吃饭：告诉服务员“来份牛排”，牛排怎么做是厨房的事。

4个具体对比，一看就懂

对比1：数据管理

// 面向过程：数据是公开的let user ={ name:'张三', age:25};functionupdateUserName(user, newName){ user.name = newName;// 直接修改}// 面向对象：数据是私有的classUser{private name:string;private age:number;publicsetName(newName:string):void{if(newName.length <2){thrownewError('姓名太短');}this.name = newName;// 通过方法修改，可以加验证}}

对比2：错误处理

// 面向过程：错误检查分散在各处functionprocessOrder(order){if(!order.user)return'用户不存在';if(!order.product)return'商品不存在';if(order.quantity <=0)return'数量错误';// ...}// 面向对象：错误检查在对象创建时classOrder{constructor(user, product, quantity){if(!user)thrownewError('用户不存在');if(!product)thrownewError('商品不存在');if(quantity <=0)thrownewError('数量错误');// 一次性检查完}}

对比3：功能扩展

// 面向过程：加功能就要改很多函数functioncalculateTotal(price, quantity, discount){// 突然要加会员折扣// 得修改这个函数，加参数、改逻辑}// 面向对象：加功能只需扩展类classOrder{calculateTotal(){let total =this.price *this.quantity; total *=(1-this.discount);// 加会员折扣很简单if(this.user.isVIP){ total *=0.9;}}}

对比4：代码组织

// 面向过程：按步骤组织代码// order.jsfunctionvalidateOrder(){/*...*/}functioncalculatePrice(){/*...*/}functioncheckStock(){/*...*/}functioncreateInvoice(){/*...*/}// 面向对象：按领域组织代码// Order.jsclassOrder{/* 订单相关的一切 */}// Product.js classProduct{/* 商品相关的一切 */}// User.jsclassUser{/* 用户相关的一切 */}

什么时候用哪种？别搞错

用面向过程 ✅

  1. 简单脚本：一次性的数据处理脚本
  2. 工具函数：utils/helpers 里的纯函数
  3. 性能关键：需要极致性能的场景
  4. 函数式编程：数据不可变，函数是第一公民
// 工具函数适合面向过程exportfunctionformatDate(date: Date):string{return`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;}exportfunctiondebounce(fn:Function, delay:number):Function{let timer: NodeJS.Timeout;return(...args:any[])=>{clearTimeout(timer); timer =setTimeout(()=>fn(...args), delay);};}

用面向对象 ✅

  1. 复杂业务逻辑：电商、CRM、ERP 系统
  2. 状态丰富的对象：用户、订单、商品
  3. 需要封装和隐藏细节：支付、权限等敏感操作
  4. 容易扩展的系统：需要经常加新功能
// 电商系统适合面向对象classShoppingCart{private items: CartItem[]=[];private userId:string;publicaddItem(product: Product, quantity:number):void{// 验证、计算、更新一气呵成}publiccheckout(): Order {// 复杂的结账逻辑封装在里面}publicgetRecommendations(): Product[]{// 基于用户历史的推荐}}

前端特有的考量

在前端，我们还要考虑这些：

React 组件：其实是面向对象的

// React 组件本质上是对象（有状态、生命周期）classUserProfileextendsReact.Component {constructor(props){super(props);// 初始化this.state ={ user:null};// 封装状态}componentDidMount(){this.loadUser();// 行为}loadUser=async()=>{const user =await api.getUser(this.props.userId);this.setState({ user });// 修改状态}render(){returnthis.state.user ?(<div>{this.state.user.name}</div>):null;}}

Vue 3 Composition API：两者结合

// 组合式函数（像面向过程）functionuseUser(userId:string){const user =ref<User |null>(null);asyncfunctionloadUser(){ user.value =await api.getUser(userId);}return{ user, loadUser };}// 但在组件中使用时（像面向对象）exportdefaultdefineComponent({setup(props){// 逻辑组合在一起const{ user, loadUser }=useUser(props.userId);const{ orders, loadOrders }=useOrders(props.userId);return{ user, orders, loadUser, loadOrders };}});

如何从面向过程转到面向对象？

如果你习惯了面向过程，可以这样过渡：

第1步：识别“名词”

看你的代码，找出主要的名词（用户、订单、商品），这些就是潜在的类。

第2步：封装数据

把散落在各处的相关数据，包装到一个类里。

第3步：归并行为

把操作这些数据的函数，变成类的方法。

第4步：设定边界

决定哪些公开（public），哪些私有（private）。

重构示例：

// 之前：数据和行为分散let cartItems =[];functionaddToCart(item){/*...*/}functioncalculateTotal(){/*...*/}functionapplyDiscount(){/*...*/}// 之后：封装成类classShoppingCart{private items: CartItem[]=[];publicaddItem(item: CartItem):void{/*...*/}privatecalculateTotal():number{/*...*/}publicapplyDiscount(code:string):void{/*...*/}}

领导到底在说什么？

当领导说“要用面向对象思维”时，他其实在说：

  1. 封装性：“别让外部随便改数据”
  2. 职责清晰：“一个类只做一件事”
  3. 易扩展：“加功能别影响老代码”
  4. 易维护：“出了问题知道去哪儿找”

这不是在批评你代码写得不好，而是在教你写出更容易维护、更容易扩展的代码。

最后的大实话

在前端开发中，没必要所有代码都面向对象。好的做法是：

  • 业务核心逻辑用面向对象（封装、易维护）
  • 工具函数/UI逻辑用面向过程（简单、直接）
  • 状态管理用函数式（可预测、易测试）

就像做菜一样，面向过程是菜谱（先放油，再放菜），面向对象是预制菜（加热就能吃）。

关键是根据场景选对方法。今天你知道区别了，下次领导再提，你不仅能改，还能跟他讨论哪种更适合。

记住：最好的代码不是“最面向对象”的代码，而是最适合当前需求的代码。

Read more

Stack-Chan机器人完整指南：从入门到精通

Stack-Chan机器人完整指南：从入门到精通 【免费下载链接】stack-chanA JavaScript-driven M5Stack-embedded super-kawaii robot. 项目地址: https://gitcode.com/gh_mirrors/sta/stack-chan Stack-Chan是一款基于JavaScript驱动的M5Stack嵌入式超级可爱的机器人项目，集成了表情显示、面部追踪、语音交互等多种智能功能。无论你是嵌入式开发新手还是机器人爱好者，这份终极指南都将帮助你快速上手并充分发挥Stack-Chan的潜力。 🎯 Stack-Chan核心功能概览 Stack-Chan机器人最吸引人的地方在于它丰富的交互能力。通过M5Stack平台，这个可爱的小机器人可以： * 生动表情显示：通过屏幕展示各种可爱的面部表情 * 智能面部追踪：能够检测并跟踪人脸或特定目标 * 实时模仿功能：同步模仿用户的动作和表情变化 * 语音对话交流：支持语音输入输出，实现自然的人机对话 * 模块化扩展：轻松连接各种M5Unit扩展模块 🛠
从零开发 AR 演讲提词器：基于 Rokid CXR-M SDK 的实战指南

从零开发 AR 演讲提词器：基于 Rokid CXR-M SDK 的实战指南

从零开发 AR 演讲提词器：基于 Rokid CXR-M SDK 的实战指南 站在讲台上，数百双眼睛注视着你。你开始演讲，却发现关键时刻想不起下一句要说什么——这种场景，每个演讲者都不陌生。 传统的解决方案是在讲台上放一张稿子，或者用 PPT 做备注。但低头看稿显得不专业，看 PPT 又要扭头，容易打断演讲节奏。如果能有一个只有自己能看到的"隐形提词器"，演讲就能更加从容自信。 Rokid AR 眼镜恰好提供了这种可能：将提词内容无线传输到眼镜显示屏，演讲者只需自然平视，文字便清晰呈现，而台下观众毫无察觉。本文将完整记录如何利用 Rokid CXR-M SDK 从零开发这款演讲提词器应用。 一、技术方案设计 1.1 为什么选择 AR 眼镜 在确定技术方案前，我们先对比几种提词方案： 方案
2.2 基于ultrascale 架构FPGA的system manager wizard使用（温压监测）

2.2 基于ultrascale 架构FPGA的system manager wizard使用（温压监测）

Reference： 《PG185》《UG580》 部分文案源于网友博客，AIGC和个人理解，如有雷同纯属抄袭 一、介绍 简述： Xilinx System Management Wizard 是 Vivado 和 Vitis 工具中的一个图形化配置工具，主要用于为 FPGA 设计生成与系统监控和管理相关的 IP 核。这个工具帮助用户配置和集成诸如温度监控、电压监控、时钟监控、外部模拟输入等功能到 FPGA 设计中。它支持AXI4-Lite 与 DRP 接口 主要功能： * 温度和电压监测： * 内建传感器：支持 FPGA 内部温度、VCCINT（核心电压）、VCCAUX（辅助电压）、VCCBRAM（BRAM 电压）等电压和温度监测。通过 SYSMON 进行实时数据采集。

dify接入企业微信群聊机器人详细步骤（从零到上线全记录）

第一章：dify接入企业微信群聊机器人详细步骤（从零到上线全记录） 准备工作：获取企业微信机器人Webhook URL 在企业微信管理后台创建群聊机器人，获取唯一的 Webhook 地址。该地址用于外部系统向指定群组发送消息。登录企业微信 → 进入“应用管理” → 创建或选择一个自建应用 → 添加“群机器人”，复制生成的 Webhook URL。 配置Dify工作流触发外部通知 在 Dify 中设置自定义响应后处理逻辑，通过 HTTP 请求将输出内容推送到企业微信群。使用内置的“HTTP 请求”节点，填写以下参数： * Method: POST * URL: 企业微信机器人的 Webhook 地址 * Body (JSON): 包含要发送的消息内容 { "msgtype": "text", "text"