WEB COMPONENT TUTORIAL

简介

在实际应用开发中,对重复代码或具有相同特征的代码进行 「抽象、封装、复用」 往往能够降低代码耦合度,使代码逻辑清晰,容易维护

但抽象封装同时包含 「结构、样式、功能」 的自定义 UI 控件对于初级开发者往往比较困难,一不小心就会使代码变得一团糟

Google 公司掌握着 Chrome 浏览器,他们给广大开发者以 API 的形式提供了部分浏览器权限,以允许开发者自定义具有特定样式和功能的浏览器原生组件(目前已经可以用于生产环境)

开发者只需将他们在项目之外自定义的 UI 控件引入项目,就可以以 html 标签的形式进行使用

这就是Web_Components

优点

  1. 跨框架:任何 web 项目都可使用,无论你是使用 Vue/React 等前端组件式框架还是使用原生技术进行项目开发

  2. 使用体验和浏览器默认提供的 html 标签一模一样,简单直接,符合直觉,代码量小

  3. 使用 Shadow DOM 将组件的内部实现和外部代码相隔离(也就无命名冲突等问题)

现有很多成品组件可供使用

webcomponents.org

Vue 的 SFC(单文件组件)正是借鉴于 Web_Components

那就写一个 Web_Component 吧

目标:Eating your own dog food

成果

https://github.com/Brannua/wc-scroll-button

我的所有笔记书都使用了该组件

组件命名的注意事项

根据规范,自定义组件必须包含连词线,以区别于浏览器内置的 HTML 标签

另外,你需要确保代码托管平台(eg:GitHub)和组件发布平台(eg:npmjs)无同名组件

RTFSC
1
2
3
4
./
├── index.html # 用于展示组件使用效果的页面
├── index.js # 组件封装于此
└── ...

of course, 我写的是 ES6 模块,结构框架如下

1
2
3
4
5
6
7
8
9
10
11
// index.js
class XXX extends HTMLElement {
constructor() {
super();
alert('开始开发吧~');
}
}
export default XXX;

// 告诉浏览器每一个 <your-component-name /> 都是 XXX 的实例
window.customElements.define("your-component-name", XXX);

代码写好测试无误之后,就该发布上线了~

发布

to npmjs.

1
npm init -y
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// package.json
{
"name": "xxx",
"version": "x.x.x",
"description": "xxx",
"keywords": ["xxx", "xxx", ...],
"main": "xxx",
"homepage": "https://github.com/xxx/xxx",
"author": "xxx <xxx@xxx.com>",
"license": "xxx",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx/xxx.git"
},
"bugs": {
"url": "https://github.com/xxx/xxx/issues"
}
}

请确保你注册了npmjs账户,且邮箱验证通过

1
2
npm login
npm publish

如果你对组件进行了升级维护需要发布更新

1
2
3
npm login
npm version patch
npm publish

如何将组件引入项目

请参考Module 的加载实现

外部资源

http://www.ruanyifeng.com/blog/2019/08/web_components.html

https://developer.mozilla.org/en-US/docs/Web/Web_Components

(完)