如何利用AOP+IOC思想解構(gòu)前端項目開發(fā)

作者：evio

來源：SegmentFault 思否社區(qū)

---

本文將通過 TypeClient 架構(gòu)來闡述如何利用AOP+IOC思想來解構(gòu)前端項目的開發(fā)。

首先聲明，AOP+IOC思想的理解需要有一定的編程架構(gòu)基礎(chǔ)。目前，這兩大思想使用的場景，基本都在nodejs端，在前端的實踐非常少。我本著提供一種新的項目解構(gòu)思路的想法，而非推翻社區(qū)龐大的全家桶。大家看看就好，如果能給你提供更好的靈感，那么再好不過了，非常歡迎交流。

以下我們將以 TypeClient 的 React 渲染引擎為例。

---

AOP

一種面向切面編程的思想。它在前端的表現(xiàn)是前端的裝飾器，我們可以通過裝飾器來攔截函數(shù)執(zhí)行前與執(zhí)行后的自定義行為。

• AOP的主要作用是把一些跟核心業(yè)務(wù)邏輯模塊無關(guān)的功能抽離出來，這些跟業(yè)務(wù)邏輯無關(guān)的功能通常包括日志統(tǒng)計、安全控制、異常處理等。把這些功能抽離出來之后， 再通過“動態(tài)織入”的方式摻入業(yè)務(wù)邏輯模塊中。AOP的好處首先是可以保持業(yè)務(wù)邏輯模塊的純凈和高內(nèi)聚性，其次是可以很方便地復(fù)用日志統(tǒng)計等功能模塊。

以上是網(wǎng)絡(luò)上對AOP的簡單解釋。那么實際代碼也許是這樣的

@Controller()
class?Demo?{
??@Route()?Page()?{}
}
復(fù)制代碼

但很多時候，我們僅僅是將某個class下的函數(shù)當(dāng)作一個儲存數(shù)據(jù)的對象而已，而在確定運行這個函數(shù)時候拿出數(shù)據(jù)做自定義處理?？梢酝ㄟ^ reflect-metadata 來了解更多裝飾器的作用。

---

IOC

Angular難以被國內(nèi)接受很大一部分原因是它的理念太龐大，而其中的DI(dependency inject)在使用時候則更加讓人迷糊。其實除了DI還有一種依賴注入的思想叫 IOC。它的代表庫為 inversify。它在github上擁有6.7K的star數(shù)，在依賴注入的社區(qū)里，口碑非常好。我們可以先通過這個庫來了解下它對項目解構(gòu)的好處。

例子如下：

@injectable()
class?Demo?{
??@inject(Service)?private?readonly?service:?Service;
??getCount()?{
????return?1?+?this.service.sum(2,?3);
??}
}
復(fù)制代碼

當(dāng)然，Service已經(jīng)優(yōu)先被注入到inversify的container內(nèi)了，才可以通過 TypeClient 這樣調(diào)用。

---

重新梳理前端項目運行時

一般地，前端項目會經(jīng)過這樣的運行過程。

1. 通過監(jiān)聽hashchange或者popstate事件攔截瀏覽器行為。
2. 設(shè)定當(dāng)前獲得的window.location 數(shù)據(jù)如何對應(yīng)到一個組件。
3. 組件如何渲染到頁面。
4. 當(dāng)瀏覽器URL再次變化的時候，我們?nèi)绾螌?yīng)到一個組件并且渲染。

這是社區(qū)的通用解決方案。當(dāng)然，我們不會再講解如何設(shè)計這個模式。我們將采用全新的設(shè)計模式來解構(gòu)這個過程。

重新審視服務(wù)端路由體系

我們聊的是前端的架構(gòu)，為什么會聊到服務(wù)端的架構(gòu)體系？

那是因為，其實設(shè)計模式并不局限在后端或者前端，它應(yīng)該是一種比較通用的方式來解決特定的問題。

那么也許有人會問，服務(wù)端的路由體系與前端并不一致，有何意義?

我們以nodejs的http模塊為例，其實它與前端有點類似的。http模塊運行在一個進程中，通過http.createServer的參數(shù)回調(diào)函數(shù)來響應(yīng)數(shù)據(jù)。我們可以認為，前端的頁面相當(dāng)于一個進程，我們通過監(jiān)聽相應(yīng)模式下的事件來響應(yīng)得到組件渲染到頁面。

服務(wù)端多個Client發(fā)送請求到一個server端端口處理，為什么不能類比到前端用戶操作瀏覽器地址欄通過事件來得到響應(yīng)入口呢?

答案是可以的。我們稱這種方式為 virtual server 即基于頁面級的虛擬服務(wù)。

既然可以抽象稱一種服務(wù)架構(gòu)，那當(dāng)然，我們可以完全像nodejs的服務(wù)化方案靠攏，我們可以將前端的路由處理的如nodejs端常見的方式，更加符合我們的意圖和抽象。

改造路由設(shè)計

如果是以上的書寫方式，那么也可以解決基本的問題，但是不符合我們AOP+IOC的設(shè)計，書寫的時候還是比較繁瑣的，同時也沒有解構(gòu)掉響應(yīng)的邏輯。

我們需要解決以下問題:

1. 如何解析路由字符串規(guī)則?
2. 如何利用這個規(guī)則快速匹配到對應(yīng)的回調(diào)函數(shù)?

在服務(wù)端有很多解析路由規(guī)則的庫，比較代表的是 path-to-regexp，它被使用在KOA等著名架構(gòu)中。它的原理也就是將字符串正則化，使用當(dāng)前傳入的path來匹配相應(yīng)的規(guī)則從而得到對應(yīng)的回調(diào)函數(shù)來處理。但是這種做法有一些瑕疵，那就是正則匹配速度較慢，當(dāng)處理隊列最后一個規(guī)則被匹配的時候，所有規(guī)則都將被執(zhí)行過，當(dāng)路由過多時候性能較差，這一點可以參看我之前寫的 koa-rapid-router超越koa-router性能的100多倍。還有一點瑕疵是，它的匹配方式是按照你編寫順序匹配的，所以它具有一定的順序性，開發(fā)者要非常注意。比如:

http.get('/:id(d+)',?()?=>?console.log(1));
http.get('/1234',?()?=>?console.log(2));
復(fù)制代碼

如果我們訪問/1234，那么它將打印出1，而非2。

為了解決性能以及優(yōu)化匹配過程的智能性，我們可以參考 find-my-way 的路由設(shè)計體系。具體請看官自己看了，我不解析。總之，它是一種字符串索引式算法，能夠快速而智能地匹配到我們需要的路由。著名的 fastify 就是采用這個架構(gòu)來達到高性能的。

---

TypeClient 的路由設(shè)計

我們可以通過一些簡單的裝飾器就能快速定義我們的路由，本質(zhì)還是采用find-my-way的路由設(shè)計原則。

import?React?from?'react';
import?{?Controller,?Route,?Context?}?from?'@typeclient/core';
import?{?useReactiveState?}?from?'@typeclient/react';
@Controller('/api')
export?class?DemoController?{
??@Route('/test')
??TestPage(props:?Reat.PropsWithoutRef)?{
????const?status?=?useReactiveState(()?=>?props.status.value);
????return?
Hello?world!?{status}
;
??}
}
//?--------------------------
//?在index.ts中只要
app.setController(DemoController);
//?它就自動綁定了路由，同時頁面進入路由?`/api/test`?的時候
//?就會顯示文本?`Hello world! 200`。
復(fù)制代碼

可見，TypeClient 通過 AOP 理念定義路由非常簡單。

---

路由生命周期

當(dāng)從一個頁面跳轉(zhuǎn)到另一個頁面的時候，前一個頁面的生命周期也隨即結(jié)束，所以，路由是具有生命周期的。再此，我們將整個頁面周期拆解如下:

1. beforeCreate 頁面開始加載
2. created 頁面加載完成
3. beforeDestroy 頁面即將銷毀
4. destroyed 頁面已經(jīng)銷毀

為了表示這4個生命周期，我們根據(jù)React的hooks特制了一個函數(shù)useContextEffect來處理路由生命周期的副作用。比如:

import?React?from?'react';
import?{?Controller,?Route,?Context?}?from?'@typeclient/core';
import?{?useReactiveState?}?from?'@typeclient/react';
@Controller('/api')
export?class?DemoController?{
??@Route('/test')
??TestPage(props:?Reat.PropsWithoutRef)?{
????const?status?=?useReactiveState(()?=>?props.status.value);
????useContextEffect(()?=>?{
??????console.log('路由加載完成了');
??????return?()?=>?console.log('路由被銷毀了');
????})
????return?
Hello?world!?{status}
;
??}
}
復(fù)制代碼

其實它與useEffect或者useLayoutEffect有些類似。只不過我們關(guān)注的是路由的生命周期，而react則關(guān)注組件的生命周期。

其實通過上面的props.status.value我們可以猜測出，路由是有狀態(tài)記錄的，分別是100和200還有500等等。我們可以通過這樣的數(shù)據(jù)來判斷當(dāng)前路由處于什么生命周期內(nèi)，也可以通過骨架屏來渲染不同的效果。

---

中間件設(shè)計

為了控制路由生命周期的運行，我們設(shè)計了中間件模式，用來處理路由前置的行為，比如請求數(shù)據(jù)等等。中間件原則上采用與KOA一致的模式，這樣可以大大兼容社區(qū)生態(tài)。

const?middleware?=?async?(ctx,?next)?=>?{
??//?ctx.....
??await?next();
}
復(fù)制代碼

通過AOP 我們可以輕松引用這個中間件，達到頁面加載完畢狀態(tài)前的數(shù)據(jù)處理。

import?React?from?'react';
import?{?Controller,?Route,?Context,?useMiddleware?}?from?'@typeclient/core';
import?{?useReactiveState?}?from?'@typeclient/react';
@Controller('/api')
export?class?DemoController?{
??@Route('/test')
??@useMiddleware(middleware)
??TestPage(props:?Reat.PropsWithoutRef)?{
????const?status?=?useReactiveState(()?=>?props.status.value);
????useContextEffect(()?=>?{
??????console.log('路由加載完成了');
??????return?()?=>?console.log('路由被銷毀了');
????})
????return?
Hello?world!?{status}
;
??}
}
復(fù)制代碼

設(shè)計周期狀態(tài)管理 - ContextStore

不得不說這個是一個亮點。為什么要設(shè)計這樣一個模式呢？主要是為了解決在中間件過程中對數(shù)據(jù)的操作能夠及時響應(yīng)到頁面。因為中間件執(zhí)行與react頁面渲染是同步的，所以我們設(shè)計這樣的模式有利于數(shù)據(jù)的周期化。

我們采用了非常黑科技的方案解決這個問題：@vue/reactity

對，就是它。

我們在react中嵌入了VUE3最新的響應(yīng)式系統(tǒng)，讓我們開發(fā)快速更新數(shù)據(jù)，而放棄掉dispatch過程。當(dāng)然，這對中間件更新數(shù)據(jù)是及其有力的。

這里 我非常感謝 sl1673495 給到的黑科技思路讓我們的設(shè)計能夠完美兼容react。

我們通過@State(callback)來定義ContextStore的初始化數(shù)據(jù)，通過useContextState或者useReactiveState跟蹤數(shù)據(jù)變化并且響應(yīng)到React頁面中。

來看一個例子:

import?React?from?'react';
import?{?Controller,?Route,?Context,?useMiddleware,?State?}?from?'@typeclient/core';
import?{?useReactiveState?}?from?'@typeclient/react';
@Controller('/api')
export?class?DemoController?{
??@Route('/test')
??@useMiddleware(middleware)
??@State(createState)
??TestPage(props:?Reat.PropsWithoutRef)?{
????const?status?=?useReactiveState(()?=>?props.status.value);
????const?count?=?useReactiveState(()?=>?props.state.count);
????const?click?=?useCallback(()?=>?ctx.state.count++,?[ctx.state.count]);
????useContextEffect(()?=>?{
??????console.log('路由加載完成了');
??????return?()?=>?console.log('路由被銷毀了');
????})
????return?Hello?world!?{status}?-?{count}

//?test.ts
import?{?reactive?}?from?'@vue/reactity';

export?const?data?=?reactive({
??count:?0,
})
復(fù)制代碼

import?React,?{?useCallback?}?from?'react';
import?{?useReactiveState?}?from?'@typeclient/react-effect';
import?{?data?}?from?'./test';

function?TestComponent()?{
??const?count?=?useReactiveState(()?=>?data.count);
??const?onClick?=?useCallback(()?=>?data.count++,?[data.count]);
??return?{count}