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

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

相关推荐
Dolphin_海豚4 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件7 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions42 分钟前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe199142 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平44 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma771 小时前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在1 小时前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac