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

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

相关推荐
然我6 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子11 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹14 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器21 分钟前
指定阿里镜像原理
前端
枷锁—sha26 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha27 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜43 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux