SEMI DESIGN 源码学习(七)浅谈 Foundation / Adapter

前言

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 文档中分别解释了 FoundationAdapter 的作用。

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 DefaultAdapterBaseFoundation

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

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

相关推荐
~废弃回忆 �༄17 分钟前
CSS中相对定位使用详情
前端·css·css中相对定位使用详情
团酱30 分钟前
控制台报错:The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
开发语言·javascript·sass
inxunoffice31 分钟前
批量压缩与优化 Excel 文档,减少 Excel 文档大小
前端·excel
清羽_ls36 分钟前
react useEffect函数清除副作用函数执行时机
前端·javascript·react.js
蜜獾云39 分钟前
nginx: [error] invalid PID number ““ in “/usr/local/nginx/logs/nginx.pid“
java·前端·nginx
奶糖 肥晨1 小时前
基于 Vue 和 Element Plus 的时间范围控制与数据展示
前端·vue.js·elementui
難釋懷1 小时前
JavaScript数据类型简介
前端·javascript
怣疯knight1 小时前
网页缩放的html代码
前端·html
AntonCook1 小时前
前端AI探索之大模型变智能体
前端·ai 编程
Riesenzahn2 小时前
TypeScript中支持的访问修饰符有哪些?
前端·javascript