前端也需 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

目标检测数据集——无人机视觉VisDrone数据集

目标检测数据集——无人机视觉VisDrone数据集

随着无人机技术的飞速发展，无人机在航拍、监控、农业、物流等领域的应用日益广泛。与此同时，无人机视角下的视觉任务，如目标检测、目标跟踪和场景理解，也成为了计算机视觉研究的热点。然而，相比传统的地面视角数据集，无人机视角下的图像具有高度变化、小目标密集、复杂背景等独特挑战，这对现有算法提出了更高的要求。 为了应对这些挑战并推动无人机视觉技术的发展，天津大学机器学习与数据挖掘实验室推出了 VisDrone数据集。作为一个大规模、标注精细的无人机视觉数据集，VisDrone 不仅涵盖了丰富的场景和多样化的目标类别，还为研究人员提供了一个极具挑战性的测试平台。无论是小目标检测的精度提升，还是密集场景下的鲁棒性优化，VisDrone 都成为了学术界和工业界不可或缺的资源。该数据集采集自中国14个不同城市，覆盖复杂城市场景、交通枢纽、密集人群等多种环境。 VisDrone官方Github下载渠道可点击访问： https://github.com/VisDrone/VisDrone-Dataset?tab=readme-ov-file 下载的数据集为VisDrone2019-DET-train
【滤波跟踪】机器人未知测量噪声的扩展卡尔曼滤波同时定位与地图绘制【含Matlab源码 15186期】含报告

【滤波跟踪】机器人未知测量噪声的扩展卡尔曼滤波同时定位与地图绘制【含Matlab源码 15186期】含报告

💥💥💥💥💥💥💥💥💞💞💞💞💞💞💞💞💞Matlab武动乾坤博客之家💞💞💞💞💞💞💞💞💞💥💥💥💥💥💥💥💥 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚤🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 🔊博主简介：985研究生，Matlab领域科研开发者； 🚅座右铭：行百里者，半于九十。 🏆代码获取方式： ZEEKLOG Matlab武动乾坤—代码获取方式 更多Matlab信号处理仿真内容点击👇 ①Matlab信号处理（进阶版） ⛳️关注ZEEKLOG Matlab武动乾坤，更多资源等你来！！ ⛄一、机器人未知测量噪声的扩展卡尔曼滤波同时定位与地图绘制 1 扩展卡尔曼滤波（EKF-SLAM）概述 扩展卡尔曼滤波（EKF）是解决同时定位与地图绘制（SLAM）问题的经典方法。EKF-SLAM通过非线性系统的高斯近似，将机器人位姿和地图特征的状态估计联合在一个概率框架中。当测量噪声未知时，需采用自适应或鲁棒方法增强滤波器性能。 2 未知测
树莓派4B连接大疆M300无人机全网最细教程

树莓派4B连接大疆M300无人机全网最细教程

注：本教程适用于树莓派4B连接大疆M300_RTK无人机，若是其余型号可以参考本文思路，但是具体细节请前往官方教程或大疆开发者论坛查找，第三方开发板连接大疆无人机，不同型号之间会有很多细节差异，请确认自己的型号然后针对性查找 官方教程网址：Payload SDK (官方的是树莓派4B连接M350！并非M300，实现细节完全不同，请慎重查看) 大疆开发者论坛网址：Payload SDK – 大疆创新SDK技术支持论坛 (优点：几乎能找到所有问题的解决方法；缺点：太零散了，找解决方法如同大海捞针) 1 硬件准备 1.1 硬件选型 * 无人机型号：M300_RTKM300顶部一共有三个接口，其中OSDK端口和云台口（Payload SDK Port）可以用来运行PSDK程序，TypeC调参口，则是用来与电脑连接，打开DJI Assistant2软件后，可以升级无人机固件，导出日志，使用模拟器，绑定负载等。 1.FPV摄像头13.左视和右视红外感知系统25.调参接口2.前视红外感知系统14.
win11本地部署openclaw实操第2集-让小龙虾具有telegram机器人能力和搜索网站能力

win11本地部署openclaw实操第2集-让小龙虾具有telegram机器人能力和搜索网站能力

1 按照第一集的部署完成后，我们就开始考虑给小龙虾增加telegram机器人和搜索网站能力，实现效果如下： 2 telegram机器人能力部署 C:\Users\Administrator.openclaw的配置文件openclaw.json 增加一段内容 "channels":{"telegram":{"enabled": true, "dmPolicy":"pairing", "botToken":"你的telegram机器人的token", "groupPolicy":"allowlist", "streamMode":"partial", "network":{"