前端远端SDK组件加载方案

2024-08-29 16:28

本文主要是介绍前端远端SDK组件加载方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景

  作者维护的可视化搭建平台所提供的投放数据配置表单是基于搭建物料中配置的JSON Schema经过统一的渲染生成的,这就意味着:表单项的类型是预先约定好的,虽然这可以满足业务绝大部分的诉求,但是总有一些高度定制的配置项需要支持业务自定义。作为一个通用的平台,内部耦合业务逻辑是个很愚蠢的办法,所以便开了业务自定义扩展渲染组件的口子。

原理

  支持UMD类型的像InputSelect这些基础组件一样的可用于表单渲染的组件通过cdn远程加载。

组件设计

  要想使用UMD的组件首先要做一个容器组件用于渲染。同时该容器组件又要用于表单渲染。所以组件props设计如下:

interface PropsType {render?: {name: string;  // library name entry: string; // 自定义渲染组件 umd 格式 urlstyle: string; // 自定义渲染组件 css文件};value: any;onChange: (value: any) => void;[x: string]: any; // 业务自定义参数
}

render参数用于组件渲染,其他参数用于组件逻辑

组件核心逻辑

CustomRender

const CustomRender: React.FC<PropsType> = (props) => {const {render,...otherProps} = props;const [Com, setCom] = useState<any>();useEffect(() => {if (!render?.entry) {return;}(async () => {// 加载UMD组件const C = await importScript(render?.entry, render?.name);// 加载组件样式render?.style && importStyle(render?.style);setCom(() => C);})();}, [render?.entry]);return (<ErrorBoundary fallback={<div>配置项加载失败</div>}><div>{Com ? <Com {...otherProps} /> : <div>加载中...</div>}</div></ErrorBoundary>);
};

importScript

export const importScript = (() => {// 自执行函数,创建一个闭包,保存 cache 结果const cache: { [x: string]: any } = {};return (url: string, name?: string) => {// 如果有缓存,则直接返回缓存内容if (cache[url]) return Promise.resolve(cache[url]);return new Promise((resolve, reject) => {// 保存最后一个 window 属性 keyconst lastWindowKey = Object.keys(window).pop();// 创建 scriptconst script = document.createElement('script');script.setAttribute('src', url);document.head.appendChild(script);// 监听加载完成事件script.addEventListener('load', () => {document.head.removeChild(script);// 最后一个新增的 key,就是 umd 挂载的,可自行验证const newLastWindowKey = name || Object.keys(window).pop();console.log('newLastWindowKey', newLastWindowKey);// 获取到导出的组件const res = lastWindowKey !== newLastWindowKey ? window[newLastWindowKey] : {};const Com = res.default ? res.default : res;cache[url] = Com;resolve(Com);});// 监听加载失败情况script.addEventListener('error', (error) => {reject(error);});});};
})();

importStyle

export const importStyle = (() => {return (url: string) => {if (document.querySelector(`link[href='${url}']`)) {return;}return new Promise((resolve, reject) => {// 创建 linkconst link = document.createElement('link');link.setAttribute('rel', 'stylesheet');link.setAttribute('href', url);document.head.appendChild(link);// 监听加载完成事件link.addEventListener('load', () => {resolve(link);});// 监听加载失败情况link.addEventListener('error', (error) => {reject(error);});});};
})();

这篇关于前端远端SDK组件加载方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1118369

相关文章

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验(UX)是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时,提供良好的用户体验(UX)是至关重要

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

Java解析JSON的六种方案

《Java解析JSON的六种方案》这篇文章介绍了6种JSON解析方案,包括Jackson、Gson、FastJSON、JsonPath、、手动解析,分别阐述了它们的功能特点、代码示例、高级功能、优缺点... 目录前言1. 使用 Jackson:业界标配功能特点代码示例高级功能优缺点2. 使用 Gson:轻量

Redis KEYS查询大批量数据替代方案

《RedisKEYS查询大批量数据替代方案》在使用Redis时,KEYS命令虽然简单直接,但其全表扫描的特性在处理大规模数据时会导致性能问题,甚至可能阻塞Redis服务,本文将介绍SCAN命令、有序... 目录前言KEYS命令问题背景替代方案1.使用 SCAN 命令2. 使用有序集合(Sorted Set)

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

MyBatis延迟加载的处理方案

《MyBatis延迟加载的处理方案》MyBatis支持延迟加载(LazyLoading),允许在需要数据时才从数据库加载,而不是在查询结果第一次返回时就立即加载所有数据,延迟加载的核心思想是,将关联对... 目录MyBATis如何处理延迟加载?延迟加载的原理1. 开启延迟加载2. 延迟加载的配置2.1 使用

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

Android WebView的加载超时处理方案

《AndroidWebView的加载超时处理方案》在Android开发中,WebView是一个常用的组件,用于在应用中嵌入网页,然而,当网络状况不佳或页面加载过慢时,用户可能会遇到加载超时的问题,本... 目录引言一、WebView加载超时的原因二、加载超时处理方案1. 使用Handler和Timer进行超

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义