如何设计一个前端框架

Posted 2021-04-05 听Eason聊成长

在前端开发过程中，为了将业务逻辑和界面显示卸耦，需要采用一些架构设计手段。同时要求一些与 UI 无关的业务处理逻辑最好能重用，模块之间层次分明。如果让你来设计一个前端开发架构，是否能达到这样的目标呢？

在js 前端，已经有了像 React 和 Vue 这样出色的前端开发框架。在桌面应用，还是很少见优秀的前端开发框架。花了点时间，思考了一下。

关键类定义

ActionType （Action 常量类型）

ActionArg（Action 参数类）

Action（描述类，包含 ActionType 和 ActionArg）

ActionHandlerCallback(ActionHandler 中调用的回调函数，一般通过此回调函数用于更新 UI，回调函数在 UI 类中实现)

ActionHandler（Action 的处理逻辑实现类，用ActionType和ActionHandlerCallback初始化，暴露 excute 方法，接收 Action 参数）

ActionDispatcher（Action 转发类，暴露dispatch方法）

调用流程

UI 类初始化过程，初始化ActionDispatcher，用UI 类的ActionHandlerCallback和ActionType实例化各个ActionHandler，并且注册到ActionDispatcher中。

UI 类的事件处理器，从控件中获取数据和输入，构建Action实例调用ActionDispatcher的dispatch方法。

ActionDispatcher的 dispatch方法接收 Action 实例，根据 Action 中的ActionType 找到对应的 ActionHandler去调用excute方法。

ActionHandler 从 Action 中提取 ActionArg 去做业务处理，业务处理后，如果发现ActionHandlerCallback不为空，则调用ActionHandlerCallback。

ActionHandlerCallback接收业务处理结果作为参数，更新主界面。

基础约束

ActionHandlerCallback主要作用是更新UI 界面，与UI 类内聚，可以直接在UI 类实现，但ActionHandlerCallback在ActionHandler的excute方法中可以调用，达到 UI 显示和业务处理分离的目的。

UI 类中的一个事件处理器可以对应创建一个 ActionType 常量，一个ActionType一般对应一个Action类实例，然后对应一个ActionHandler。

所有的 Action逻辑调用都通过ActionDispatcher的 dispatch方法，就不依赖ActionHandler的具体实现。并且可以在dispatch方法中进行切面逻辑控制。

有外部接口调用，可以再创建 Service 类调用外部接口，ActionHandler的excute方法可以调用Service中的方法。

按业务功能分包，UI 类、ActionType、ActionArg、Action、ActionHandler都放在同样一个业务功能包里。

其他问题与改进。

是否在ActionHandler中调用其他功能包的Action 处理逻辑？

显然上面的设计方案是不行。因为UI 类初始化过程，初始化ActionDispatcher，用UI 类的ActionHandlerCallback和ActionType实例化各个ActionHandler，这里对 UI类有了依赖。

为了能调用其他功能包的Action 处理逻辑。ActionHandler需要在应用首次运行时就进行注册。最好能自动扫描所有的ActionHandler，自动实例化注册。

同时ActionHandler中不能再包含ActionHandlerCallback。那么这个时候可以将ActionHandlerCallback放到Action实例中，ActionHandler也就可以获得ActionHandlerCallback了。如果调用的是其他业务功能包中的Action逻辑，则不必设置ActionHandlerCallback参数。

这样虽然解决了问题，但是Action描述类却变得复杂了，包含了ActionType、ActionArg、ActionHandlerCallback等。是否有其他更好的处理方式？ActionHandler需要要更新 UI 时候，发布一个自定义的 UI 更新事件。UI 类实例监听这些事件，则更新自己的 UI 界面。回调函数方式类似 React，事件机制类似 Vue。这两种方式都是为了不同层次之间能卸耦。

另外一个问题，为了 Action 的处理逻辑能够复用，一个 ActionHandler 的中excute方法，如果能调用其他的Action 处理逻辑，需要获取它们的处理结果状态时又该怎么办？

简单的办法就是，让ActionDispatcher的dispatch方法有个泛化的返回结果值。

如果要让 UI 也形成组件，不同界面能共用相同的 UI 组件，又该怎么做呢？