简介

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

但抽象封装同时包含 「结构、样式、功能」 的自定义 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

（完）