web系列之Web Components

一诺滚雪球
417 阅读4分钟

1. 什么是Web Components

Web Component是一组用于创建可重用、封装和自定义的HTML元素的Web平台APIs。它们允许开发者创建自己的标签和组件，这些组件可以与任何其他HTML元素和JavaScript库一起工作，而不会产生冲突。 Web Components由以下几个主要技术组成：

  • Custom element（自定义元素） ：一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。
  • Shadow DOM（影子 DOM） ：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
  • HTML template（HTML 模板）：  <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

通过使用Web Components，开发者可以创建一致性、可维护性和可重用性更强的用户界面组件，这些组件能跨平台和框架适应多种场景。

2. 如何使用

npm i -g typescript

tsc --init

tsc -w

  1. 样式隔离
./
├─index.html
├─index.js
├─index.ts
└tsconfig.json

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./index.js"></script>
</head>
<body>
	<wu-jie url="www.baidu.com"></wu-jie>
	<div>我是外层div元素</div>
	<template id="wujie">
		<style>
			div {
				background: red;
			}
		</style>
		<div>我是template里面的div</div>
	</template>
</body>
</html>

index.ts

window.onload = () => {
    class Wujie extends HTMLElement {
            constructor() {
                    super()
                    // 进行绑定 创建shadowdom
                    let dom = this.attachShadow({
                            mode:"open"
                    })
                    let template = document.querySelector('#wujie') as HTMLTemplateElement
                    dom.appendChild(template.content.cloneNode(true))
                    console.log(this.getAttr('url'));

            }
            private getAttr(attr: string) {
                    // 读取参数
                    return this.getAttribute(attr)
            }

            //生命周期自动触发有东西插入
            connectedCallback () {
                            console.log('类似于vue 的mounted');
            }
            //生命周期卸载
            disconnectedCallback () {
                                    console.log('类似于vue 的destory');
            }
            //跟watch类似
            attributeChangedCallback (name:any, oldVal:any, newVal:any) {
                            console.log('跟vue 的watch 类似 有属性发生变化自动触发');
            }

    }
    // 进行挂载 不允许驼峰 类似于组件 原生写法
    window.customElements.define('wu-jie',Wujie)
}

image.png

image.png

3. 应用场景

Web Components在许多场景中都非常有用，以下是一些典型的应用场景：

  1. UI组件库：使用Web Components创建跨项目的可重用UI组件库，例如按钮、表单控件、导航栏等。这可以确保跨不同应用程序的一致性，并降低维护成本。

  2. Widget和嵌入式内容：开发可嵌入到第三方网站的小工具和内容，如社交媒体分享按钮、评论系统、天气小部件等。由于Web Components提供了封装和隔离，它们不会干扰或受到外部网站样式和脚本的影响。

  3. 复杂的单页面应用（SPA）：将应用程序分解为可维护的模块和组件，例如头部、尾部、侧边栏等。Web Components还可以与其他前端框架协同工作，如React、Vue或Angular，以提高可重用性。

  4. 跨框架组件：传统上，不同框架创建的组件（如React、Angular等）是无法在其他框架中共享和重用的。使用Web Components创建的组件天然地具有框架的无关性，因此可以在不同框架的环境下进行重用。

  5. 定制和扩展现有元素：有时，你可能需要扩展现有的HTML元素以添加新的功能。使用Web Components自定义元素，可以轻松地扩展现有元素的功能，同时兼容现有的HTML和CSS代码。

  6. 与现有的APIs和服务集成：Web Components可以将现有APIs和服务包装成一个自定义组件，使得集成和重用变得更容易。如创建一个自定义组件，获取地理位置并显示当前天气。

  7. 内容管理系统（CMS）和网站构建器：Web Components可以在内容管理系统（CMS）和网站构建器中作为可拖放和配置的组件，以帮助用户快速创建和自定义网站。用户可以直观地选择和组合不同的Web组件，以构建出满足他们需求的页面布局和设计。

  8. 设计系统和样式指南：Web Components可以用于实现设计系统和样式指南，这些系统和指南规定了最佳实践和共享组件，以确保整个公司或团队的开发人员在不同的项目中使用一致的设计和交互模式。

  9. 微前端：将大型前端应用拆分为独立的微前端，每个微前端负责应用的一部分功能。Web Components可以作为通用的组件库在各个微前端之间共享，同时受益于Shadow DOM的封装性。

  10. 渐进式增强和自定义功能：在现有项目中使用Web Components逐步引入新功能，或者自定义特定功能而不影响现有的代码。通过使用Web Components，你可以在不破坏现有代码的前提下添加新功能。

这些场景仅为Web Components的一部分应用示例，它们在许多其他领域也具有广泛的潜力。由于Web Components遵循Web标准，这意味着你可以更自由地与其他技术和库结合，根据需要扩展其应用范围。

avatar
文章
阅读
粉丝