从零开始手写基于Web Components组件

最新推荐文章于 2024-12-19 18:00:13 发布

原创

最新推荐文章于 2024-12-19 18:00:13 发布 · 672 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #typescript

本文详述如何从零开始使用HTML、JavaScript和TypeScript构建基于Web Components的组件库，涵盖了项目初始化、组件注册、生命周期、模板、插槽、Shadow DOM和兼容性等内容。通过实例讲解，包括创建默认按钮、实现水波纹特效以及添加type和disabled属性。适合前端开发者学习。

前言

本文将详细讲解如何用最基本的typescript，vite，less构建基于Web Components的组件，目前已实现Button，Icon，Image，Tabs，Input，Message组件。首先介绍项目的整体架构，如何开发第一个Web Components组件——Button，按钮的水波纹特效，实现按钮的disabled和type属性功能。看完一定有所收获~

一.建立项目

主要分为初始化项目和，如何进行开发调试

1.初始化项目

pnpm init

安装typescript,vite,less,vite-plugin-dts(用于生成ts类型声明文件)

pnpm i typescript vite less vite-plugin-dts -D

项目目录结构

utils：存放一些公共函数
index.ts: 打包入口

// index.ts
import './components/button/index.ts';

components: 组件目录，新建了button目录，button目录下有index.ts和index.less

// components/button/index.tsclass CustomElement extends HTMLElement {constructor() {super();}}customElements.define("r-button", CustomElement);

vite.config.ts: vite的配置文件

import { defineConfig } from "vite";
import { resolve } from "path";
import dts from 'vite-plugin-dts'

export default defineConfig({build: {minify: 'terser',sourcemap: true,lib: {entry: resolve(__dirname, "index.ts"),// 配置入口文件路径name: "ranui",fileName: "index",formats: ["es", "umd"], // 打包生成的格式},},plugins: [dts()]
});

2.开发和调试

在项目的根目录中创建一个index.html用于开发和调试，在head标签里面加入

 <script src="./index.ts" type="module"></script>

配置package.json脚步命令

"scripts": {"dev": "vite","build": "vite build",},

使用pnpm dev启动服务的时候，默认访问根目录下的index.html，然而index.html又引入组件库的入口文件index.ts。如果执行无误的话，body标签里面就可以使用我们自定义的标签了。这就可以开发和调试了。

<body><r-button>这是按钮</r-button>
</body>

自此项目结构搭建完毕，接下来就开始编写button组件代码。开始写之前先简单回顾下Web Components的一些基础知识。

二.`Web Components`简述

简单过一下开发Web Components的前置知识，首先是如何创建一个自定义的标签。已经完全掌握的可以跳过，直接看第三章。

1.注册自定义组件

 class CustomElement extends HTMLElement {constructor() {super(); // 必需// 组件被创建时执行的逻辑}// 组件的功能}customElements.define("r-button", CustomElement);

使用这个自定义组件

<r-button></r-button>

自定义组件必须使用中横线x-x。创建完了自定义标签，肯定需要加上一些自定义的逻辑和功能，这就会用到组件的生命周期，在对应的时刻，编写相应的逻辑。

2. 组件的生命周期

可以把一些逻辑放到对应的生命周期里，以便在特定的时刻执行。Web Components生命周期有constructor,attributeChangedCallback,connectedCallback,adoptedCallback,disconnectCallback。

 class CustomElement extends HTMLElement {constructor() {super(); // 必需// 组件被创建时执行的逻辑}// 组件的功能attributeChangedCallback(){}connectedCallback(){}adoptedCallback(){}disconnectCallback(){}}customElements.define("r-button", CustomElement);

使用方法：