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

作者：evio

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

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

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

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

AOP

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

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

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

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

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

IOC

Angular難以被國(guó)內(nèi)接受很大一部分原因是它的理念太龐大，而其中的DI(dependency inject)在使用時(shí)候則更加讓人迷糊。其實(shí)除了DI還有一種依賴注入的思想叫 IOC。它的代表庫(kù)為 inversify。它在github上擁有6.7K的star數(shù)，在依賴注入的社區(qū)里，口碑非常好。我們可以先通過(guò)這個(gè)庫(kù)來(lái)了解下它對(duì)項(xiàng)目解構(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)了，才可以通過(guò) TypeClient 這樣調(diào)用。

重新梳理前端項(xiàng)目運(yùn)行時(shí)

一般地，前端項(xiàng)目會(huì)經(jīng)過(guò)這樣的運(yùn)行過(guò)程。

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

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

改造路由設(shè)計(jì)

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

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

TypeClient 的路由設(shè)計(jì)

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);
//?它就自動(dòng)綁定了路由，同時(shí)頁(yè)面進(jìn)入路由?`/api/test`?的時(shí)候
//?就會(huì)顯示文本?`Hello world! 200`。
復(fù)制代碼

路由生命周期

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

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ù)制代碼

中間件設(shè)計(jì)

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

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è)計(jì)周期狀態(tài)管理 - ContextStore

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}