Web Components 使用体验

最新推荐文章于 2024-08-19 17:04:41 发布

yuanyxh

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量534

点赞数 16

文章标签：前端 javascript web

本文链接：https://blog.csdn.net/yuanfgbb/article/details/141303784

版权

前言

前一段时间公司的 web forms 项目中有几个页面需要修改，老项目大家都懂的，原生 html、jquery 一把梭，组件化、模块化是没有的，改起来有多难受谁改谁知道。为了自己的开发体验及后续考虑，上手了自己以前没用过的 web components，这篇文章就来聊一下个人的使用体验和看法。

Web Components 基础

MDN 对于 Web Components 的定义：

Web 组件是一套不同的技术，允许您创建可重复使用的自定义元素（其功能与您的其余代码隔离开来）并在您的 Web 应用程序中使用它们。

他的简单使用：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      {
        // 可复用的模板
        const template = window.document.createElement('template');

        // 内部的 style 选择器只会选择自定义元素内的元素
        template.innerHTML = `
          <style>
            input {
              padding: 4px 6px;
              outline: none;
              border: none;
              box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
              border-radius: 4px;
            }
          </style>

          <input type="text" />
        `;

        // 自定义元素
        class WInput extends HTMLElement {
          // 定义需要观察的属性集
          static observedAttributes = ['color', 'size'];

          // 实例被构造时调用，比如通过 document.createElement 或书写标签
          constructor() {
            super();

            // 将影子 DOM 附加到自定义元素
            this.root = this.attachShadow({ mode: 'open' });
            // 将模板拷贝到影子 DOM
            this.root.appendChild(template.content.cloneNode(true));
          }

          // 被添加到文档时调用
          connectedCallback() {}

          // 从文档中删除时调用
          disconnectedCallback() {}

          // 移动到新文档时调用
          adoptedCallback() {}

          // observedAttributes 属性集中属性值变化时调用
          attributeChangedCallback(name, oldValue, newValue) {
            console.log(`Attribute ${name} has changed.`);
          }
        }

        // 定义元素
        window.customElements.define('w-input', WInput);
      }
    </script>

    <w-input></w-input>
  </body>
</html>

渲染出来的效果：

关于 Web Components 的完整知识可以看 MDN 官网文档 Web_Components，这里不再赘述。

使用体验

老项目表单居多，所以基于 Web Components 封装了常用的表单组件，如 Input、Select、AutoComponent 等，带来的好处显而易见，不说兼容性、微前端项目中作为可通用的组件这些不常见的场景，最能直观感受的好处就是可复用、样式统一，只需要封装一次可以多处使用，且具有高内聚的特性，新的功能、修复 bug 可以在组件内部解决。

但同时还需要看到他的局限性，理解他与 UI 框架的区别，Web Components 与 React、Vue 这类框架不同，他只提供了组织结构的一种方式，没有 UI 框架的数据驱动、响应式等概念，仍需要编写命令式代码来操作 DOM，这也是开发 Web Components 体验较为不好的一点。

使用 knockoutjs 可以一定程度上减少手动操作 DOM 的代码。

Knockout 是一个 JavaScript 库，可帮助您使用干净的底层数据模型创建丰富、响应迅速的显示和编辑器用户界面。只要您的 UI 部分需要动态更新（例如，根据用户的操作或外部数据源的更改而更改），KO 都可以帮助您更简单、更易于维护地实现它。

使用 Knockout 实现一个简单的例子：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
    <script>
      {
        const template = window.document.createElement('template');

        template.innerHTML = `
          <style>
            input {
              padding: 4px 6px;
              outline: none;
              border: none;
              box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
              border-radius: 4px;
            }
          </style>

          <input class="w-input" type="text" />
        `;

        class WInput extends HTMLElement {
          static observedAttributes = ['color', 'size'];

          constructor() {
            super();

            this.root = this.attachShadow({ mode: 'open' });
            this.root.appendChild(template.content.cloneNode(true));

            // 侦听输入
            this.input = this.root.querySelector('.w-input');
            this.input.addEventListener('input', this.onInput);
          }

          // 暴露 value 属性供 Knockout 访问
          get value() {
            return this.input.value;
          }

          set value(v) {
            this.input.value = v;
          }

          onInput = () => {
            // 派发 change 事件供 Knockout 访问
            this.dispatchEvent(new InputEvent('change'));
          };

          connectedCallback() {}

          // 从文档中删除时调用
          disconnectedCallback() {
            this.input.removeEventListener('change', this.onInput);
          }

          adoptedCallback() {}

          attributeChangedCallback(name, oldValue, newValue) {
            console.log(`Attribute ${name} has changed.`);
          }
        }

        // 定义元素
        window.customElements.define('w-input', WInput);
      }
    </script>

    <div>
      <!-- 绑定 username -->
      <label>
        name:
        <w-input data-bind="value: username"></w-input>
      </label>
      <br />
      <br />

      <!-- 绑定 password -->
      <label>
        password:
        <w-input data-bind="value: password"></w-input>
      </label>
    </div>

    <p>输入的用户名是： <span data-bind="text: username"></span></p>
    <p>输入的密码是： <span data-bind="text: password"></span></p>

    <script>
      // 声明 model
      const model = {
        username: ko.observable(''),
        password: ko.observable('')
      };

      // 执行绑定
      ko.applyBindings(model);
    </script>
  </body>
</html>

得到的效果如下：

对 Knockout 感兴趣的可以自行去官网查看。

除了需要大量的 DOM 操作导致的开发体验差外，个人认为还有一点体验不好的就是过于封闭，组件化开发遵守开闭原则诚然是好的，但对于 css 而言有点太过了，我们知道在 React、Vue 项目开发时经常会需要修改组件库内部的样式，一般通过 css 选择器选择内部元素来覆盖默认样式，但对于影子 DOM 中的元素来说无效：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <!-- 修改内部 input 的 color -->
  <style>
    input {
      color: red;
    }

    .w-input input {
      color: red;
    }

    w-input input {
      color: red;
    }

    w-input {
      color: red;
    }

    .w-input {
      color: red;
    }
  </style>

  <body>
    <script>
      {
        const template = window.document.createElement('template');

        template.innerHTML = `
          <style>
            input {
              padding: 4px 6px;
              outline: none;
              border: none;
              box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
              border-radius: 4px;
            }
          </style>

          <input class="w-input" type="text" />
        `;

        class WInput extends HTMLElement {
          static observedAttributes = ['color', 'size'];

          constructor() {
            super();

            this.root = this.attachShadow({ mode: 'open' });
            this.root.appendChild(template.content.cloneNode(true));
          }

          connectedCallback() {}

          disconnectedCallback() {
            this.input.removeEventListener('change', this.onInput);
          }

          adoptedCallback() {}

          attributeChangedCallback(name, oldValue, newValue) {
            console.log(`Attribute ${name} has changed.`);
          }
        }
        window.customElements.define('w-input', WInput);
      }
    </script>

    <w-input class="w-input" style="color: red;"></w-input>
  </body>
</html>