V2EX = way to explore V2EX 是一个关于分享和探索的地方
Sign Up Now For Existing Member Sign In
推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
This topic created in 930 days ago, the information mentioned may be changed or developed.
在开发一个 jssdk 时，想将登录、悬浮球等功能的 ui 界面通过 js 的方式创建，从而实现用户集成 sdk 时，只需要引入一个 js 文件和 css 文件就能使用 sdk 里的功能和界面
现在已有登录等功能的 html 和 js 代码，想改造成 js+css 的方式，目前想到的方式是用 js 创建 dom 元素，并且设置 innerHTML ，有什么更好的方式吗？
 | 1 musi Oct 10, 2023 web component |
 | 2 luckyc Oct 10, 2023 electron+react/vue 往这里考虑, 目前最优解. |
 | 3 codehz Oct 10, 2023  1 web-component+shadow dom 是最好的选择，里面可以确保你的 css 不和用户自己的 css 冲突 设置内部的 html 可以直接在 shadow-dom 里设置 innerHTML （除了直接插入<style>到 shadow-dom 以外，也可以用 adoptedStyleSheets 的 api 去设置 shadow dom 内的样式） |
 | 4 overdev Oct 10, 2023 1 web component 最优解，我司前段时间也有这种需求，我使用的是 lit ，世界用 rollup 打包一个 js 文件好了 |
 | 5 v2er4241 Oct 10, 2023 web component 还是第一次接触，学到了学到了 |
 | 6 zhuangzhuang1988 Oct 10, 2023 以前我用过 preact |
 | 7 bgm004 Oct 10, 2023 via Android svelte 之类框架实话干这个。 |
 | 8 ragnaroks Oct 10, 2023 react 打包成 web-component ，可直出 componet-name.js |
 | 9 zaxlct Oct 1, 2023 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 看起来是一个非常合适的解决方案。 |
Select Language