关于react.js:如何利用AOPIOC思想解构前端项目开发

本文将通过 TypeClient 架构来论述如何利用 AOP+IOC 思维来解构前端我的项目的开发。

首先申明，AOP+IOC 思维的了解须要有肯定的编程架构根底。目前，这两大思维应用的场景，根本都在 nodejs 端，在前端的实际非常少。我本着提供一种新的我的项目解构思路的想法，而非颠覆社区宏大的全家桶。大家看看就好，如果能给你提供更好的灵感，那么再好不过了，十分欢送交换。

以下咱们将以 TypeClient 的 React 渲染引擎为例。

一种面向切面编程的思维。它在前端的体现是前端的装璜器，咱们能够通过装璜器来拦挡函数执行前与执行后的自定义行为。

AOP 的次要作用是把一些跟外围业务逻辑模块无关的性能抽离进去，这些跟业务逻辑无关的性能通常包含日志统计、安全控制、异样解决等。把这些性能抽离进去之后，再通过“动静织入”的形式掺入业务逻辑模块中。AOP 的益处首先是能够放弃业务逻辑模块的污浊和高内聚性，其次是能够很不便地复用日志统计等功能模块。

以上是网络上对 AOP 的简略解释。那么理论代码兴许是这样的

@Controller()
class Demo {@Route() Page() {}
}
复制代码

但很多时候，咱们仅仅是将某个 class 下的函数当作一个贮存数据的对象而已，而在确定运行这个函数时候拿出数据做自定义解决。能够通过 reflect-metadata 来理解更多装璜器的作用。

Angular 难以被国内承受很大一部分起因是它的理念太宏大，而其中的 DI(dependency inject)在应用时候则更加让人迷糊。其实除了 DI 还有一种依赖注入的思维叫 IOC。它的代表库为 inversify。它在 github 上领有 6.7K 的 star 数，在依赖注入的社区里，口碑十分好。咱们能够先通过这个库来理解下它对我的项目解构的益处。

例子如下：

@injectable()
class Demo {@inject(Service) private readonly service: Service;
  getCount() {return 1 + this.service.sum(2, 3);
  }
}
复制代码

当然，Service 曾经优先被注入到 inversify 的 container 内了，才能够通过 TypeClient 这样调用。

个别地，前端我的项目会通过这样的运行过程。

通过监听 hashchange 或者 popstate 事件拦挡浏览器行为。
设定以后取得的window.location 数据如何对应到一个组件。
组件如何渲染到页面。
当浏览器 URL 再次变动的时候，咱们如何对应到一个组件并且渲染。

这是社区的通用解决方案。当然，咱们不会再解说如何设计这个模式。咱们将采纳全新的设计模式来解构这个过程。

咱们聊的是前端的架构，为什么会聊到服务端的架构体系？

那是因为，其实设计模式并不局限在后端或者前端，它应该是一种比拟通用的形式来解决特定的问题。

那么兴许有人会问，服务端的路由体系与前端并不统一，有何意义?

咱们以 nodejs 的 http 模块为例，其实它与前端有点相似的。http 模块运行在一个过程中，通过 http.createServer 的参数回调函数来响应数据。咱们能够认为，前端的页面相当于一个过程，咱们通过监听相应模式下的事件来响应失去组件渲染到页面。

服务端多个 Client 发送申请到一个 server 端端口解决，为什么不能类比到前端用户操作浏览器地址栏通过事件来失去响应入口呢?

答案是能够的。咱们称这种形式为 virtual server 即基于页面级的虚构服务。

既然能够形象称一种服务架构，那当然，咱们能够齐全像 nodejs 的服务化计划聚拢，咱们能够将前端的路由解决的如 nodejs 端常见的形式，更加合乎咱们的用意和形象。

history.route('/abc/:id(d+)', (ctx) => {
  const id = ctx.params.id;
  return <div>{id}</div>;
  // 或者: ctx.body = <div>{id}</div>; 这种更加能了解
})
复制代码

如果是以上的书写形式，那么也能够解决根本的问题，然而不合乎咱们 AOP+IOC 的设计，书写的时候还是比拟繁琐的，同时也没有解构掉响应的逻辑。

咱们须要解决以下问题:

如何解析路由字符串规定?
如何利用这个规定疾速匹配到对应的回调函数?

在服务端有很多解析路由规定的库，比拟代表的是 path-to-regexp，它被应用在 KOA 等驰名架构中。它的原理也就是将字符串正则化，应用以后传入的 path 来匹配相应的规定从而失去对应的回调函数来解决。然而这种做法有一些瑕疵，那就是正则匹配速度较慢，当解决队列最初一个规定被匹配的时候，所有规定都将被执行过，当路由过多时候性能较差，这一点能够参看我之前写的 koa-rapid-router 超过 koa-router 性能的 100 多倍。还有一点瑕疵是，它的匹配形式是依照你编写程序匹配的，所以它具备肯定的程序性，开发者要十分留神。比方:

http.get('/:id(d+)', () => console.log(1));
http.get('/1234', () => console.log(2));
复制代码

如果咱们拜访/1234，那么它将打印出1，而非2。

为了解决性能以及优化匹配过程的智能性，咱们能够参考 find-my-way 的路由设计体系。具体请看官本人看了，我不解析。总之，它是一种字符串索引式算法，可能疾速而智能地匹配到咱们须要的路由。驰名的 fastify 就是采纳这个架构来达到高性能的。

咱们能够通过一些简略的装璜器就能疾速定义咱们的路由，实质还是采纳 find-my-way 的路由设计准则。

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<Context>) {const status = useReactiveState(() => props.status.value);
    return <div>Hello world! {status}</div>;
  }
}
// --------------------------
// 在 index.ts 中只有
app.setController(DemoController);
// 它就主动绑定了路由，同时页面进入路由 `/api/test` 的时候
// 就会显示文本 `Hello world! 200`。复制代码

可见，TypeClient 通过 AOP 理念定义路由非常简单。

当从一个页面跳转到另一个页面的时候，前一个页面的生命周期也随即完结，所以，路由是具备生命周期的。再此，咱们将整个页面周期拆解如下:

beforeCreate 页面开始加载
created 页面加载实现
beforeDestroy 页面行将销毁
destroyed 页面曾经销毁

为了示意这 4 个生命周期，咱们依据 React 的 hooks 特制了一个函数 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<Context>) {const status = useReactiveState(() => props.status.value);
    useContextEffect(() => {console.log('路由加载实现了');
      return () => console.log('路由被销毁了');
    })
    return <div>Hello world! {status}</div>;
  }
}
复制代码

其实它与 useEffect 或者 useLayoutEffect 有些相似。只不过咱们关注的是路由的生命周期，而 react 则关注组件的生命周期。

其实通过下面的 props.status.value 咱们能够猜测出，路由是有状态记录的，别离是 100 和200还有 500 等等。咱们能够通过这样的数据来判断以后路由处于什么生命周期内，也能够通过骨架屏来渲染不同的成果。

为了管制路由生命周期的运行，咱们设计了中间件模式，用来解决路由前置的行为，比方申请数据等等。中间件原则上采纳与 KOA 统一的模式，这样能够大大兼容社区生态。

const middleware = async (ctx, next) => {
  // ctx.....
  await next();}
复制代码

通过 AOP 咱们能够轻松援用这个中间件，达到页面加载结束状态前的数据处理。

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<Context>) {const status = useReactiveState(() => props.status.value);
    useContextEffect(() => {console.log('路由加载实现了');
      return () => console.log('路由被销毁了');
    })
    return <div>Hello world! {status}</div>;
  }
}
复制代码

不得不说这个是一个亮点。为什么要设计这样一个模式呢？次要是为了解决在中间件过程中对数据的操作可能及时响应到页面。因为中间件执行与 react 页面渲染是同步的，所以咱们设计这样的模式有利于数据的周期化。

咱们采纳了十分黑科技的计划解决这个问题：@vue/reactity

对，就是它。

咱们在 react 中嵌入了 VUE3 最新的响应式零碎，让咱们开发疾速更新数据，而放弃掉 dispatch 过程。当然，这对中间件更新数据是及其无力的。

这里我非常感谢 sl1673495 给到的黑科技思路让咱们的设计可能完满兼容 react。

咱们通过 @State(callback) 来定义 ContextStore 的初始化数据，通过 useContextState 或者 useReactiveState 跟踪数据变动并且响应到 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<Context>) {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 <div onClick={click}>Hello world! {status} - {count}</div>;
  }
}

function createState() {
  return {count: 0,}
}
复制代码

你能够看到一直点击，数据一直变动。这种操作形式极大简化了咱们数据的变动写法，同时也能够与 vue3 响应式能力看齐，补救 react 数据操作复杂度的短板。

除了在周期中应用这个黑科技，其实它也是能够独立应用的，比方在任意地位定义:

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

export const data = reactive({count: 0,})
复制代码

咱们能够在任意组件中应用

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 <div onClick={onClick}>{count}</div>
}
复制代码

以上的解说都没有设计 IOC 方面，那么上面将解说 IOC 的应用。

咱们先编写一个 Service 文件

import {Service} from '@typeclient/core';

@Service()
export class MathService {sum(a: number, b: number) {return a + b;}
}
复制代码

而后咱们能够在之前的 Controller 中间接调用:

import React from 'react';
import {Controller, Route, Context, useMiddleware, State} from '@typeclient/core';
import {useReactiveState} from '@typeclient/react';
import {MathService} from './service.ts';
@Controller('/api')
export class DemoController {@inject(MathService) private readonly MathService: MathService;

  @Route('/test')
  @useMiddleware(middleware)
  @State(createState)
  TestPage(props: Reat.PropsWithoutRef<Context>) {const status = useReactiveState(() => props.status.value);
    const count = useReactiveState(() => props.state.count);
    const click = useCallback(() => ctx.state.count++, [ctx.state.count]);
    const value = this.MathService.sum(count, status);
    useContextEffect(() => {console.log('路由加载实现了');
      return () => console.log('路由被销毁了');
    })
    return <div onClick={click}>Hello world! {status} + {count} = {value}</div>;
  }
}

function createState() {
  return {count: 0,}
}
复制代码

你能够看到数据的一直变动。

咱们为 react 的组件发明了一种新的组件模式，称 IOCComponent。它是一种具备 IOC 能力的组件，咱们通过useComponent 的 hooks 来调用。

import React from 'react';
import {Component, ComponentTransform} from '@typeclient/react';
import {MathService} from './service.ts';

@Component()
export class DemoComponent implements ComponentTransform {@inject(MathService) private readonly MathService: MathService;

  render(props: React.PropsWithoutRef<{ a: number, b: number}>) {const value = this.MathService.sum(props.a, props.b);
    return <div>{value}</div>
  }
}
复制代码

而后在任意组件中调用

import React from 'react';
import {Controller, Route, Context, useMiddleware, State} from '@typeclient/core';
import {useReactiveState} from '@typeclient/react';
import {MathService} from './service.ts';
import {DemoComponent} from './component';
@Controller('/api')
export class DemoController {@inject(MathService) private readonly MathService: MathService;
  @inject(DemoComponent) private readonly DemoComponent: DemoComponent;

  @Route('/test')
  @useMiddleware(middleware)
  @State(createState)
  TestPage(props: Reat.PropsWithoutRef<Context>) {const status = useReactiveState(() => props.status.value);
    const count = useReactiveState(() => props.state.count);
    const click = useCallback(() => ctx.state.count++, [ctx.state.count]);
    const value = this.MathService.sum(count, status);
    const Demo = useComponent(this.DemoComponent);
    useContextEffect(() => {console.log('路由加载实现了');
      return () => console.log('路由被销毁了');
    })
    return <div onClick={click}>
      Hello world! {status} + {count} = {value} 
      <Demo a={count} b={value} />
    </div>;
  }
}

function createState() {
  return {count: 0,}
}
复制代码

咱们齐全能够摈弃掉传统的中间件写法，而采纳能加解构化的中间件写法:

import {Context} from '@typeclient/core';
import {Middleware, MiddlewareTransform} from '@typeclient/react';
import {MathService} from './service';

@Middleware()
export class DemoMiddleware implements MiddlewareTransform {@inject(MathService) private readonly MathService: MathService;

  async use(ctx: Context, next: Function) {ctx.a = this.MathService.sum(1, 2);
    await next();}
}
复制代码

它反对 Slot 插槽模式，咱们能够通过 useSlot 取得 Provider 与 Consumer。它是一种通过音讯传送节点片段的模式。

const {Provider, Consumer} = useSlot(ctx.app);
<Provider name="foo">provider data</Provider>
<Consumer name="foo">placeholder</Consumer>
复制代码

而后编写一个 IOCComponent 或者传统组件。

// template.tsx
import {useSlot} from '@typeclient/react';
@Component()
class uxx implements ComponentTransform {render(props: any) {const { Consumer} = useSlot(props.ctx);
    return <div>
      <h2>title</h2>
      <Consumer name="foo" />
      {props.children}
    </div>
  }
}
复制代码

最初在 Controller 上调用

import {inject} from 'inversify';
import {Route, Controller} from '@typeclient/core';
import {useSlot} from '@typeclient/react';
import {uxx} from './template.tsx';
@Controller()
@Template(uxx)
class router {@inject(ttt) private readonly ttt: ttt;
  @Route('/test')
  test() {const { Provider} = useSlot(props.ctx);
    return <div>
      child ...
      <Provider name="foo">
        this is foo slot
      </Provider>
    </div>
  }
}
复制代码

你能看到的构造如下:

<div>
  <h2>title</h2>
  this is foo slot
  <div>child ...</div>
</div>
复制代码

咱们能够通过对 IOC 服务与 Middleware 还有组件进行不同纬度的解构，封装成对立的 npm 包上传到公有仓库中供公司外部开发应用。

类型

IOCComponent + IOCService
IOCMiddleware + IOCService
IOCMiddlewware
IOCService

准则

通用化
内聚合
易扩大

遵循这种准则的化能够使公司的业务代码或者组件具备高度的复用性，而且通过 AOP 可能很分明直观的体现代码即文档的魅力。

即保障所封装的逻辑、代码或者组件具体高度的通用化个性，对于不太通用的没必要封装。比如说，公司外部对立的导航头，导航头有可能被用到任意我的项目中做统一化，那么就非常适合封装为组件型模块。

通用的组件须要失去对立的数据，那么能够通过 IOCComponent + IOCService + IOCMiddleware 的模式将其包装，在应用的适宜只须要关注导入这个组件即可。还是举例通用导航头。比方导航头须要下拉一个团队列表，那么，咱们能够这样定义这个组件:

一个 service 文件:

// service.ts
import {Service} from '@typeclient/core';
@Service()
export class NavService {getTeams() {
    // ... 这里能够是 ajax 申请的后果
    return [
      {
        name: 'Team 1',
        id: 1,
      },
      {
        name: 'Team 2',
        id: 1,
      }
    ]
  }

  goTeam(id: number) {
    // ...
    console.log(id);
  }
}
复制代码

组件:

// component.ts
import React, {useEffect, setState} from 'react';
import {Component, ComponentTransform} from '@typeclient/react';
import {NavService} from './service';

@Component()
export class NavBar implements ComponentTransform {@inject(NavService) private readonly NavService: NavService;
  render() {const [teams, setTeams] = setState<ReturnType<NavService['getTeams']>>([]);
    useEffect(() => this.NavService.getTeams().then(data => setTeams(data)), []);
    return <ul>
      {teams.map(team => <li onClick={() => this.NavService.goTeam(team.id)}>{team.name}</li>)
      }
    </ul>
  }
}
复制代码

咱们将这个模块定义为@fe/navbar，同时导出这个个对象:

// @fe/navbar/index.ts
export * from './component';
复制代码

在任意的 IOC 组件中就能够这样调用

import React from 'react';
import {Component, ComponentTransform, useComponent} from '@typeclient/react';
import {NavBar} from '@fe/navbar';

@Component()
export class DEMO implements ComponentTransform {@inject(NavBar) private readonly NavBar: NavBar;
  render() {const NavBar = useComponent(this.NavBar);
    return <NavBar />
  }
}
复制代码

你能够发现只有加载这个组件，相当于申请数据都主动被载入了，这就十分有区别与一般的组件模式，它能够是一种业务型的组件解构计划。十分实用。

次要是让咱们对于设计这个通用型的代码或者组件时候放弃搞扩展性，比如说，巧用 SLOT 插槽原理，咱们能够预留一些空间给插槽，不便这个组件被应用不同地位的代码所传送并且替换掉原地位内容，这个的益处须要开发者自行领会。

咱们提供了一个 demo 来体现它的能力，而且能够从代码中看到如何解构整个我的项目。咱们的每个 Controller 都能够独立存在，使得我的项目内容迁徙变得非常容易。

框架: github.com/flowxjs/Typ…
我的项目模板: github.com/flowxjs/Typ…
简略的最佳实际: github.com/flowxjs/Typ…

大家能够通过以上的两个例子来理解开发模式。

新的开发理念并不是让你摒弃掉传统的开发方式和社区，而且提供更好的思路。当然，这种思路的好与坏，各有各的了解。然而我还是想申明下，我明天仅仅是提供一种新的思路，大家看看就好，喜爱的给个 star。非常感谢!

关于react.js:如何利用AOPIOC思想解构前端项目开发

AOP

IOC

从新梳理前端我的项目运行时

从新扫视服务端路由体系

革新路由设计

TypeClient 的路由设计

路由生命周期

中间件设计

设计周期状态治理 – ContextStore

利用 IOC 思维解构我的项目

Controller 服务解构

Component 解构

Middleware 解构

为 react 新增 Slot 插槽概念

解构我的项目的准则

通用化

内聚性

易扩大

演示

总结