Typescript下的面向对象(OOP) 与 函数式(FP)编程
什么是编程范式(programming paradigm)？
编程范式是依据编程语言的特征对其分类的方式。
Programming paradigms are a way to classify programming languages based on their features.
申明式与指令式(declarative programming & imperative programming)编程
申明式：表达了计算逻辑，不包含控制流程。
指令式：使用表达式语句控制程序的状态。
Declarative: expresses the logic of a computation without describing its control flow.
Imperative: uses statements that change a program’s state.
面向对象与函数式编程
通过上述申明式与指令式编程的定义，我们可以简单地归纳为(为了理解简单，并不准确):有状态控制的是指令式，反之为申明式。
而面向对象编程(OOP)，最常用到的Class，其内部包含状态逻辑，从而属于指令式；而函数式编程(FP)，由于通常用到纯函数，不包含逻辑，因此属于申明式。
实际上，一些OOP的语言，如C#，也能支持函数式编程，而其它的语言，如TypeScript，也是既可以做OOP也可以做FP。
OOP的基本原则：
SOLID (Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, Dependency Inversion)
FP的基本原则：
pure function
shared state
currying
function composition
immutability
下面通过一组代码简单描述OOP与FP的区别
先说OOP，假设我们实现一个产品页面，该页面中有两个组件：ImageGallery和ReviewGallery，同时该页面需要适配Desktop和Phone两个版本，通常我们会这么做：
base.ts
export abstract class ImgGallery {
protected thumbnails: HTMLSpanElement[];
protected bigImg: HTMLImageElement;
protected isLoading: boolean = false;
constructor()
{
this.thumbnails = $(".js-thumbnail").toArray() as HTMLSpanElement[];
this.bigImg = $(".js-img")[0] as HTMLImageElement;
}
abstract loadBigImage(url: string): void;
}
export abstract class ReviewGallery {
}
class ProductDetailPage {
private imgGallery: ImgGallery;
private reviewGallery: ReviewGallery
constructor(_imgGallery: ImgGallery, _reviewGallery: ReviewGallery){
this.imgGallery = _imgGallery;
this.reviewGallery = _reviewGallery;
}
}
export default ProductDetailPage;
PDP-Desktop.ts
import ProductDetailPage, { ImgGallery, ReviewGallery } from './Base';
export class ImgGalleryDesktop extends ImgGallery {
constructor() {
super();
this.loadBigImage(this.bigImg.src);
}
loadBigImage(url: string): void {
this.isLoading = true;
console.log(`load big image from ${url}`);
this.isLoading = false;
}
}
export class ReviewGalleryDesktop extends ReviewGallery {
}
PDP-Phone.ts
import ProductDetailPage, { ImgGallery, ReviewGallery } from './Base';
export class ImgGalleryPhone extends ImgGallery {
constructor() {
super();
this.loadBigImage(this.bigImg.src);
}
loadBigImage(url: string): void {
console.log(`load big image from ${url}`);
}
}
export class ReviewGalleryPhone extends ReviewGallery {
}
App.ts
import { ImgGalleryDesktop, ReviewGalleryDesktop } from './PDP-Desktop';
import { ImgGalleryPhone, ReviewGalleryPhone } from './PDP-Phone';
import ProductDetailPage from './Base';
const device = "desktop";
const imgGallery = device == "desktop"? new ImgGalleryDesktop() : new ImgGalleryPhone();
const reviewGallery = device == "desktop"? new ReviewGalleryDesktop() : new ReviewGalleryPhone();
const pdp = new ProductDetailPage(imgGallery, reviewGallery);
上述示例可以看出，OOP的特点是Class继承，组合，以及内部状态的维护。
再给个FP的例子，场景是通过接口读取产品数据并显示。 初级程序员通常会这么做：
function FetchProduct() {
fetch("product api endpoint").then((response) => {
response.json().then((data)=>{
if(data as Array<string>) {
//do something
// data.forEach(d => {
// //...
// });
}
else {
}
})
});
}
上述代码既不是OOP，违反了OOP原则中的单一职责（一个方法既有获取数据的逻辑，又有处理数据的逻辑），又没有接口分离(根本就没用到接口)等等。
这段代码显然也不是FP，没有实现FP的设计原则。 那么设想一下如何对其做改造：
改造尝试一
const getProduct: ()=> Promise<Product> = ()=>{
return new Promise(resolve => {
setTimeout(function() {
let data: Product = { name:"foo", quantity:100};
resolve(
data
);
}, 2000)
});
};
const updateProd = (prod: Product) => {
console.log("update product");
}
async function FPSampleI() {
let data = await getProduct();
console.log(JSON.stringify(data));
updateProd(data);
}
FPSampleI();
独立出出获取数据和显示数据的逻辑。感觉这样还是不够FP，于是再继续改造，实现chainable function
class FPSampleII<T> {
private _value?: T;
public async fetchData(getFun: ()=> Promise<T>) {
console.log("fetching...");
this._value = await getFun();
return this;
}
public updateUI(updateUIFun: (data: T)=>void) {
this._value && updateUIFun(this._value);
return this;
}
}
new FPSampleII<Product>().fetchData(getProduct).then((instance)=> instance.updateUI(updateProd));
此时我们注意到函数内部有共享变量，如何对其优化呢？ (共享变量往往是会有竟用的问题，也就是多处方法同时调用，造成脏数据。 解决方式是使用深拷贝)。
以下是一个优化的简单例子
type Customer = {
name: string;
age: number;
balance?: number;
}
function useState<T>(defaultValue: T) : [T, (arg: T)=>void] {
let state: T = {...defaultValue};
const setState = (newState: T) => {
state = {...newState};
}
return [state, setState]
}
function CustomerFun(cus: Customer) {
const [customer, setCustomer] = useState<Customer>(cus);
setCustomer( { ...cus, balance: cus.balance?? 200 })
}
此处代码的思路是模仿React中的useState Hook，把对于state的操作提取到一个独立的function中。
