Nestjs框架: 關于 OOP / FP / FRP 編程

概述

在軟件開發過程中，不同的編程范式為我們提供了多樣化的思維方式與實現路徑
它們不僅影響著代碼的結構和邏輯組織方式，
也深刻影響著項目的可維護性、可擴展性以及團隊協作效率

什么是 OOP、FP 和 FRP？

首先從三個術語的含義入手

1 ）OOP（Object-Oriented Programming）

即面向對象編程，是一種將現實世界中的事物抽象為“對象”的編程范式
每個對象擁有自己的屬性和方法，通過類（class）來定義這些對象的共同特征

2 ）FP（Functional Programming）

即函數式編程，強調“函數”作為程序的基本構建單元
主張將邏輯封裝在純函數中，注重數據變換而非狀態變化

3 ）FRP（Functional Reactive Programming）

即函數式響應式編程，是函數式編程與響應式編程的結合體
適用于處理異步事件流，常用于 UI 編程、事件驅動等場景
這三種編程范式并非彼此對立，而是適用于不同場景的編程風格
它們分別代表了軟件開發中三種重要的抽象方式：對象抽象、函數抽象與事件流抽象

OOP 與 FP 的核心區別與實現對比

以一個實際的前端登錄注冊功能為例，來對比 OOP 和 FP 兩種范式的實現方式

1 ）通用頁面結構

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>FP&FRP</title><script src="./index.js" defer></script></head><body><div class="container-sm pt-4"><form class="col-4" id="login-form"><div class="mb-3"><label for="username" class="form-label">用戶名：</label><inputtype="text"class="form-control"name="username"id="username"aria-describedby="username-help"/><div id="username-help" class="form-text"></div></div><div class="mb-3"><label for="password" class="form-label">密碼</label><inputtype="password"name="password"class="form-control"id="password"/><div id="password-help" class="form-text"></div></div><div class="mb-3 form-check"><input type="checkbox" class="form-check-input" id="remember" /><label class="form-check-label" for="remember">記住我</label></div><button type="submit" class="btn btn-primary" id="btn">注冊或登錄</button></form></div></body>
</html>

2 ）面向過程編程：傳統邏輯結構

// 獲取form對象
// 當用戶點擊提交按鈕時，獲取用戶輸入的值
// 校驗用戶輸入的值
// 如果校驗通過，模擬發送請求提交表單
const form = document.getElementById('login-form');
const username = document.getElementById('username');
const password = document.getElementById('password');function submitHandler(evt) {evt.preventDefault();const usernameValue = username.value;const passwordValue = password.value;if (usernameValue.trim().length === 0) {alert('用戶名不能為空');return;}if (passwordValue.trim().length < 6) {alert('密碼長度不能小于6位');return;}const user = {username: usernameValue,password: passwordValue,};console.log(user);console.log('用戶' + user.username + '登錄成功');
}form.addEventListener('submit', submitHandler);

在傳統的面向過程編程中，我們通常會按照“順序執行、逐步處理”的方式去實現功能。
例如：
- 首先完成頁面結構與樣式；
- 然后綁定表單提交事件；
- 接著讀取輸入框的值；
- 再進行輸入校驗；
- 最后將數據打印或發送請求。
這樣的邏輯雖然直觀，但隨著功能的復雜度增加，會導致代碼冗長、不易維護、邏輯耦合度高

3 ) 函數式編程（FP）的核心實現思路

// 獲取form對象
// 當用戶點擊提交按鈕時，獲取用戶輸入的值
// 校驗用戶輸入的值
// 如果校驗通過，模擬發送請求提交表單
const REQUIRED = 'REQUIRED';
const MIN_LENGTH = 'MIN_LENGTH';// 函數式編程
function validate(value, flag, validatorValue) {if (flag === REQUIRED) {return value.trim().length > 0;}if (flag === MIN_LENGTH) {return value.trim().length > validatorValue;}
}function getUserInput(inputId) {return document.getElementById(inputId).value;
}function createUser(username, password) {if (!validate(username, REQUIRED) || !validate(password, MIN_LENGTH, 6)) {// alert -> 副作用 -> 依賴外部環境（HTTP請求、修改DOM等操作了外部環境）// -> 在函數式編程中，盡量要避免出現副作用throw new Error('用戶名或者密碼不符合要求');}return {username,password,};
}function greet(user) {console.log('用戶' + user.username + '登錄成功');
}function submitHandler(evt) {evt.preventDefault();const usernameValue = getUserInput('username');const passwordValue = getUserInput('password');try {const user = createUser(usernameValue, passwordValue);console.log(user);greet(user);} catch (error) {alert(error.message);}
}function createForm(formId, handler) {const form = document.getElementById(formId);form.addEventListener('submit', handler);
}createForm('login-form', submitHandler);

在函數式編程中，我們通過函數的組合與復用來構建邏輯：

定義一個 createForm(formID, handler) 函數，用于綁定表單提交事件；
定義 submitHandler 函數，用于處理提交后的邏輯；
定義 getInputValues 函數，用于獲取輸入框的值；
定義 validate 函數，用于校驗輸入是否合法；
定義 createUser 函數，用于創建用戶對象并返回；
最后通過 console.log 打印成功信息。

函數式編程的核心特征包括：

純函數：對于相同的輸入，總是返回相同的輸出，沒有副作用；
可組合性：函數之間可以相互調用、組合，形成清晰的數據流；
高復用性：函數可以被多個模塊復用，提升代碼維護效率；
可測試性強：由于函數是獨立的，單元測試更容易實現。

函數式編程非常適合處理數據變換、邏輯解耦和異步流程控制

4 ）面向對象編程（OOP）的核心實現思路

在面向對象編程中，我們通過類和對象來組織代碼結構：

// 獲取form對象
// 當用戶點擊提交按鈕時，獲取用戶輸入的值
// 校驗用戶輸入的值
// 如果校驗通過，模擬發送請求提交表單
class Validator {static REQUIRED = 'REQUIRED';static MIN_LENGTH = 'MIN_LENGTH';static validate(value, flag, validatorValue) {if (flag === this.REQUIRED) {return value.trim().length > 0;}if (flag === this.MIN_LENGTH) {return value.trim().length > validatorValue;}}
}class User {constructor(username, password) {this.username = username;this.password = password;}greet() {console.log('用戶' + this.username + '登錄成功');}
}class UserInputForm {constructor() {this.form = document.getElementById('login-form');this.username = document.getElementById('username');this.password = document.getElementById('password');// 這里要注冊第二個submitHandler為什么要使用bind// addEventListener的第二個參數是一個回調函數，回調函數中的this指向的是當前的DOM元素// 但是這里的this，需要指向的是UserInputForm，所以需要使用bind修改this的指向this.form.addEventListener('submit', this.submitHandler.bind(this));}submitHandler(evt) {evt.preventDefault();const usernameValue = this.username.value;const passwordValue = this.password.value;if (!Validator.validate(usernameValue, Validator.REQUIRED) ||!Validator.validate(passwordValue, Validator.MIN_LENGTH, 6)) {alert('用戶名或者密碼不符合要求');return;}const user = new User();user.username = usernameValue;user.password = passwordValue;console.log(user);user.greet();// console.log('用戶' + user.username + '登錄成功');}
}new UserInputForm();

我們定義了三個類：Validator、User 和 LoginForm
LoginForm 類負責綁定表單事件、讀取輸入、調用校驗器、創建用戶
User 類封裝了用戶的屬性和行為（如 greet() 方法）
Validator 類提供靜態方法 validate() 來完成輸入校驗

OOP 的三大核心特性是：

封裝性：將數據和操作封裝在一個類中，增強模塊化
繼承性：通過繼承復用已有類的屬性和方法
多態性：同一方法在不同對象中有不同實現

面向對象編程更適合建模現實世界的結構、處理復雜的業務邏輯與狀態管理

5 ）函數式響應式編程（FRP）

const btn = document.getElementById('btn');function inputHandler(evt) {if (username.value.trim().length === 0 || password.value.trim().length < 6) {btn.disabled = true;return;}btn.disabled = false;
}
username.addEventListener('input', inputHandler);
password.addEventListener('input', inputHandler);

雖然在本次示例中沒有詳細展開 FRP，但我們可以簡要介紹其核心思想與適用場景

什么是函數式響應式編程？

函數式響應式編程（FRP）是函數式編程與響應式編程的結合，強調對事件流進行函數式處理
它通過將事件流視為可組合、變換的數據流，實現復雜的異步邏輯處理。

典型應用場景

表單實時校驗：當用戶輸入時，自動判斷輸入是否合法，并動態修改按鈕狀態
聊天推薦系統：點擊拒絕推薦后，自動請求新數據并更新界面
實時數據展示：如股票價格、天氣數據等需要響應變化的場景

核心特點

響應式處理事件流：將事件流視為可觀測的數據流，進行函數式操作
異步處理友好：天然適合處理異步、并發、事件驅動的場景
依賴第三方庫：如 RxJS、MobX、Vue 3 的響應式系統（Composition API）等
發布-訂閱模式：通過訂閱事件流來響應數據變化，實現 UI 與狀態的自動同步

OOP 與 FP 應該如何選擇？

在實際開發中，OOP 和 FP 并非非此即彼，而是可以根據項目需求、團隊習慣、技術棧等因素靈活選擇

若項目需要建模復雜業務邏輯、狀態管理、類結構清晰，則更適合使用 OOP
若項目更注重邏輯解耦、數據變換、可測試性與復用性，則更適合使用 FP
若項目涉及大量異步事件、實時響應或復雜事件流處理，則可引入 FRP 或響應式編程框架

此外，現代前端框架（如 React、Vue）已經融合了多種范式的思想：

React 更偏向函數式編程，鼓勵使用函數組件和 hooks
Vue 3 支持 Composition API，也更適合函數式風格
Angular 仍以 OOP 為主，但也在逐步引入響應式編程理念

編程范式之間的關系與發展趨勢

編程范式	核心思想	關鍵特征	適用場景
OOP（面向對象）	抽象現實事物為對象	封裝、繼承、多態	復雜業務、狀態管理
FP（函數式編程）	函數為基本單元，強調純函數	不可變、無副作用、可組合	數據處理、邏輯解耦
FRP（函數式響應式）	響應事件流，函數式處理	異步友好、流式處理	實時響應、UI 變化