SEMI DESIGN 源码学习（七）浅谈 Foundation / Adapter

贝蕾亚2023-10-05 23:06

前言

SEMI DESIGN 的组件几乎都使用的 Foundation/Adapter 架构，本文尝试一探究竟。

BaseFoundation 源码位于 packages/semi-foundation/base/foundation.ts

注释说明这种架构借鉴了 material-components-web

material-components-web/packages/mdc-base/foundation.ts

在 material-components-web 文档中分别解释了 Foundation 和 Adapter 的作用。

`Foundation`

The Foundation contains the business logic that best represents Material Design, without actually referring to any DOM elements. The Foundation delegates to Adapter methods for any logic requiring DOM manipulation.

Foundation 包含了框架的业务逻辑，没有引用任何实际的 DOM 元素。同时 Foundation 代理了 Adapter 全部修改 DOM 的方法。

`Adapter`

The Adapter is an interface with all the methods the Foundation needs to implement Material Design business logic. There can be many implementations of the Adapter, allowing for interoperability with different frameworks.

Adapter 是一个接口，其中包含 Foundation 实现框架业务逻辑所需的所有方法。适配器可以有许多实现，允许与不同框架交互。

material-components-web/docs/code/architecture.md

由此可知组件的业务逻辑是 Adapter 实现的，然后 Foundation 代理了 Adapter 的方法，最后组件使用 Foundation 去调用这些方法。

再看 SEMI DESIGN DefaultAdapter 和 BaseFoundation

`DefaultAdapter`

一个接口，比 material-components 添加了更多获取组件状态的方法，以及组件的数据缓存方法。

ts 复制代码

export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>> {
    getContext(key: string): any;
    getContexts(): any;
    getProp(key: string): any;
    getProps(): P;
    getState(key: string): any;
    getStates(): S;
    setState<K extends keyof S>(s: Pick<S, K>, callback?: any): void;
    getCache(c: string): any;
    getCaches(): any;
    setCache(key: any, value: any): void;
    stopPropagation(e: any): void;
    persistEvent: (event: any) => void
}

`BaseFoundation`

核心是 _adapter 属性，用来调用 Adapter 实现的方法，也添加了更多获取组件数据的 getter。

使用这种架构可以保持框架组件方法的统一性，使得框架更好拓展和维护，本文完。