js 生成 html 的 ui 界面有什么好的方式？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 412 天前的主题，其中的信息可能已经有所发展或是发生改变。

在开发一个 jssdk 时，想将登录、悬浮球等功能的 ui 界面通过 js 的方式创建，从而实现用户集成 sdk 时，只需要引入一个 js 文件和 css 文件就能使用 sdk 里的功能和界面

现在已有登录等功能的 html 和 js 代码，想改造成 js+css 的方式，目前想到的方式是用 js 创建 dom 元素，并且设置 innerHTML ，有什么更好的方式吗？

9 条回复 • 2023-10-11 07:16:02 +08:00

musi

2023-10-10 16:12:24 +08:00

web component

l4ever

2023-10-10 16:32:57 +08:00

electron+react/vue
往这里考虑, 目前最优解.

codehz

2023-10-10 16:34:18 +08:00

web-component+shadow dom 是最好的选择，里面可以确保你的 css 不和用户自己的 css 冲突
设置内部的 html 可以直接在 shadow-dom 里设置 innerHTML
（除了直接插入<style>到 shadow-dom 以外，也可以用 adoptedStyleSheets 的 api 去设置 shadow dom 内的样式）

overdev

2023-10-10 16:40:17 +08:00

web component 最优解，我司前段时间也有这种需求，我使用的是 lit ，世界用 rollup 打包一个 js 文件好了

klo424

2023-10-10 19:07:58 +08:00

web component 还是第一次接触，学到了学到了

zhuangzhuang1988

2023-10-10 19:21:17 +08:00

以前我用过 preact

Track13

2023-10-10 22:58:29 +08:00 via Android

svelte 之类框架实话干这个。

ragnaroks

2023-10-10 23:17:03 +08:00

react 打包成 web-component ，可直出 componet-name.js

zaxlct

2023-10-11 07:16:02 +08:00

GPT4 的回答：
使用 Web Component 是开发 JS SDK 中这种 UI 功能（如登录、悬浮球等）的一个非常好的方案。Web Component 的封装和隔离性特点非常适合构建这种可以轻易集成到任何网站的组件。它允许你将 HTML 、CSS 和 JavaScript 打包在一起，从而简化集成过程。

### 优点：

1. **封装性**: Web Component 的封装性可以保证它不会影响到用户已有的代码和样式。
2. **兼容性**: Web Component 是基于 Web 标准的，因此它无需依赖特定框架或库。
3. **可重用性和可维护性**: 组件化的结构使得 Web Component 非常适合在多个项目中重用，也便于维护。

### 考虑的方面：

1. **浏览器支持**: 虽然大多数现代浏览器都支持 Web Component ，但如果你需要支持老版本的浏览器，可能需要使用 polyfills 。
2. **文件大小**: 如果你嵌入了大量的资源（如图片、字体等），Web Component 的文件大小可能会变得相对较大。

总体来说，基于你的需求（只需要引入一个 JS 文件和一个 CSS 文件来使用 SDK 功能），Web Component 看起来是一个非常合适的解决方案。