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

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

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码7 小时前
1.
react.js·node.js·angular.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app