M

MLOG

中文

探索 Web Components，一种浏览器原生的组件架构，用于创建可在不同 JavaScript 框架中使用的可复用 UI 元素。了解自定义元素、Shadow DOM、HTML 模板和模块。

Web Components：面向全球 Web 开发的浏览器原生组件架构

在不断发展的 Web 开发领域，基于组件的架构对于构建可扩展、可维护和可复用的 UI 元素至关重要。虽然像 React、Angular 和 Vue.js 这样的 JavaScript 框架提供了各自的组件模型，但 Web Components 提供了一种浏览器原生的组件化方法。这意味着您可以创建可复用的组件，这些组件可以无缝地在不同框架之间工作，甚至在没有任何框架的情况下也能运行。这使得 Web Components 成为全球 Web 开发的强大工具，确保了在不同项目和团队之间的一致性和可维护性。

什么是 Web Components？

Web Components 是一套 Web 标准，允许您创建可复用的、封装的 HTML 标签，用于网页和 Web 应用程序。它们建立在四个核心规范之上：

这些技术协同工作，使开发人员能够创建真正可复用的组件，这些组件可以轻松地共享并集成到各种项目中。浏览器对 Web Components 的支持非常好，涵盖了所有主流现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。

为什么要使用 Web Components？

在您的 Web 开发工作流中采用 Web Components 有几个令人信服的理由：

1. 可复用性

Web Components 是为复用而设计的。一旦定义，一个组件可以在单个页面内或跨不同项目多次使用。这提高了代码效率并减少了冗余。想象一下，一家在东京、伦敦和纽约设有办事处的公司需要一个标准化的日期选择器组件。通过 Web Components，他们可以创建一个组件并在所有区域性网站上复用它，确保全球用户体验的一致性。

2. 框架无关性

Web Components 不与任何特定的 JavaScript 框架绑定。它们可以与 React、Angular、Vue.js 一起使用，甚至可以与纯 HTML 和 JavaScript 一起使用。这种框架独立性使其成为使用不同技术栈的团队或需要对未来框架变化进行预防性设计的项目的宝贵资产。这使得组织能够在不重写核心 UI 组件的情况下在框架之间迁移或采用新框架。

3. 封装性

Shadow DOM 提供了强大的封装性，将组件的内部实现细节与页面的其余部分隔离开来。这可以防止样式冲突，并确保组件无论在其周围环境如何，都能表现出可预测的行为。例如，一个用于显示客户评论的 Web Component 可以有自己的样式，而不会受到主网站 CSS 的影响，反之亦然。

4. 可维护性

Web Components 的模块化特性使其更易于维护。只要组件的公共 API 保持不变，对其内部实现的更改不会影响应用程序的其他部分。这简化了组件随时间的调试、测试和更新。考虑一个复杂的数据可视化 Web Component；对其内部图表库的更新不会破坏页面上的其他组件。

5. Web 标准

Web Components 基于开放的 Web 标准，确保了长期的兼容性并降低了供应商锁定的风险。随着浏览器供应商不断改进对这些标准的支持，Web Components 将只会变得更加强大和通用。

6. 性能

因为 Web Components 由浏览器直接支持，所以与特定于框架的组件实现相比，它们通常可以提供更好的性能。浏览器高效地处理 Web Components 的渲染和生命周期管理，减少了与 JavaScript 框架相关的开销。

核心技术详解

让我们深入了解构成 Web Components 的每项核心技术的细节：

1. 自定义元素 (Custom Elements)

自定义元素允许您定义自己的 HTML 标签，并将其与定义其行为的 JavaScript 类关联起来。您可以创建像 <my-element>、<date-picker> 或 <product-card> 这样的元素，并带有自定义的逻辑和渲染。要定义一个自定义元素，您需要扩展 HTMLElement 类并使用 customElements.define() 方法进行注册。

示例：


class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '<p>来自我的自定义元素的问候！</p>';
  }
}

customElements.define('my-element', MyElement);

此代码定义了一个名为 <my-element> 的自定义元素，它会显示文本“来自我的自定义元素的问候！”。然后您可以在 HTML 中像这样使用此元素：


<my-element></my-element>

2. 影子 DOM (Shadow DOM)

Shadow DOM 为组件的内部结构、样式和行为提供封装。它创建了一个附加到组件的独立 DOM 树，但与主文档的 DOM 是隔离的。这可以防止 Shadow DOM 内的 CSS 样式和 JavaScript 代码影响页面的其余部分，反之亦然。可以把它想象成一个嵌套在主 HTML 文档中的迷你文档。

示例：


class MyShadowElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const p = document.createElement('p');
    p.textContent = '这在 shadow DOM 内部！';
    shadow.appendChild(p);
  }
}

customElements.define('my-shadow-element', MyShadowElement);

在此示例中，attachShadow({ mode: 'open' }) 方法创建了一个 Shadow DOM 并将其附加到自定义元素。添加到 Shadow DOM 的内容与主文档是隔离的。

3. HTML 模板 (HTML Templates)

HTML 模板允许您定义可复用的 HTML 标记块，这些标记块在被显式克隆并插入到 DOM 之前不会被渲染。模板是使用 <template> 元素定义的。这对于定义组件的结构而不立即渲染它们非常有用。模板提供了一种定义惰性 DOM 子树的机制，这些子树会被解析但直到您明确实例化它们时才会被渲染。

示例：


<template id="my-template">
  <p>这来自模板！</p>
</template>


class MyTemplateElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('my-template');
    const templateContent = template.content.cloneNode(true);
    shadow.appendChild(templateContent);
  }
}

customElements.define('my-template-element', MyTemplateElement);

此代码检索模板，克隆其内容，并将其添加到自定义元素的 Shadow DOM 中。

4. ES 模块 (ES Modules)

ES 模块是以模块化方式组织和分发 JavaScript 代码的标准方法。您可以使用 ES 模块来导入和导出 Web Components，从而更容易地在不同项目中管理和复用它们。ES 模块允许您将代码分割成单独的文件，并根据需要导入它们。这提高了代码的组织性、可维护性和性能。

示例：

创建一个名为 my-component.js 的文件：


export class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '<p>来自我的组件模块的问候！</p>';
  }
}

customElements.define('my-component', MyComponent);

然后，在您的 HTML 文件中：


<script type="module" src="my-component.js"></script>
<my-component></my-component>

这将从 my-component.js 文件中导入 MyComponent 类，并将其注册为自定义元素。

构建一个简单的 Web Component：全球时间显示器

让我们创建一个简单的 Web Component，用于显示特定时区的当前时间。这个组件对于跨不同时区协作的团队非常有用。我们称之为 <global-time>。


class GlobalTime extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.timezone = this.getAttribute('timezone') || 'UTC';
    this.format = this.getAttribute('format') || 'HH:mm:ss';
    this.updateTime();
    setInterval(() => this.updateTime(), 1000);
  }

  static get observedAttributes() { return ['timezone', 'format']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'timezone' || name === 'format') {
      this.updateTime();
    }
  }

  updateTime() {
    try {
    const now = new Date();
    const formatter = new Intl.DateTimeFormat('en-US', { timeZone: this.timezone, hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
    const formattedTime = formatter.format(now);
    this.shadow.innerHTML = `<span>${formattedTime} (${this.timezone})</span>`;
    } catch (e) {
        this.shadow.innerHTML = `<span style="color: red;">无效的时区： ${this.timezone}</span>`;
    }
  }
}

customElements.define('global-time', GlobalTime);

解释：

用法：


<global-time timezone="America/New_York"></global-time>
<global-time timezone="Europe/London"></global-time>
<global-time timezone="Asia/Tokyo"></global-time>
<global-time timezone="Invalid/Timezone"></global-time> <!-- 无效时区处理示例 -->

这将显示纽约、伦敦和东京的当前时间。“Invalid/Timezone” 示例演示了错误处理。

Web Component 开发的最佳实践

为了确保您的 Web Components 设计良好、可维护且可复用，请遵循以下最佳实践：

1. 定义清晰的公共 API

清晰地定义组件的公共 API，包括消费者可以用来与之交互的属性、特性和事件。这使得其他人更容易使用您的组件，并减少在您更新其内部实现时发生破坏性更改的风险。请彻底地文档化此 API。

2. 使用 Shadow DOM 进行封装

始终使用 Shadow DOM 来封装组件的内部结构、样式和行为。这可以防止与页面其余部分的冲突，并确保组件的行为是可预测的。除非绝对必要，否则避免使用“closed”模式，因为它会使调试和测试更加困难。

3. 谨慎处理属性 (Attributes) 和特性 (Properties)

使用属性 (attributes) 来配置组件的初始状态，使用特性 (properties) 来管理其运行时状态。在适当的情况下，将属性的更改反映到特性上，反之亦然，以保持组件的同步。使用 observedAttributes 和 attributeChangedCallback 来响应属性的更改。

4. 使用事件进行通信

使用自定义事件将组件的更改或操作传达给外部世界。这为组件与应用程序的其他部分进行交互提供了一种清晰且松散耦合的方式。使用 dispatchEvent(new CustomEvent('my-event', { detail: data })) 来分派自定义事件。

5. 编写单元测试

编写单元测试以确保您的组件按预期运行并防止回归。使用像 Jest 或 Mocha 这样的测试框架来编写您的测试。测试 Web Components 涉及验证它们是否正确渲染、响应用户交互以及按预期分派事件。

6. 为您的组件编写文档

为您的组件编写详尽的文档，包括其用途、API 和使用示例。使用像 JSDoc 或 Storybook 这样的文档生成器来创建交互式文档。良好的文档对于使您的组件可复用和可维护至关重要。

7. 考虑可访问性 (A11y)

确保您的 Web Components 对残障用户是可访问的。使用 ARIA 属性提供语义信息，并遵循可访问性最佳实践。使用屏幕阅读器等辅助技术测试您的组件。全球可访问性考虑至关重要；确保您的组件支持不同的语言和输入法。

8. 选择命名约定

为您的组件及其属性采用一致的命名约定。使用前缀以避免与现有 HTML 元素发生命名冲突（例如，my- 或 app-）。对元素名称使用短横线命名法（kebab-case）（例如，my-date-picker）。

9. 利用现有库

考虑使用提供构建 Web Components 的实用工具的现有库，例如 LitElement 或 Stencil。这些库可以简化开发过程并提供性能优化。它们可以减少样板代码并改善开发人员体验。

Web Components 与全球化开发：解决国际化和本地化问题

当为全球受众开发 Web Components 时，考虑国际化 (i18n) 和本地化 (l10n) 至关重要。i18n 是设计和开发能够适应不同语言和地区而无需进行工程更改的应用程序的过程。l10n 是将应用程序适应特定语言和地区的过程。Web Components 可以在创建支持 i18n 的应用程序中发挥重要作用。

1. 语言支持

使用 Intl API 根据用户的区域设置格式化日期、数字和货币。根据用户的语言偏好动态加载特定语言的资源（例如，翻译）。例如，可以增强 global-time 组件以用户的首选格式显示日期和时间。

2. 文本方向

支持从左到右 (LTR) 和从右到左 (RTL) 的文本方向。使用 CSS 逻辑属性（例如，使用 margin-inline-start 而不是 margin-left）以确保您的组件能正确适应不同的文本方向。使用阿拉伯语和希伯来语等 RTL 语言测试您的组件。

3. 日期和数字格式化

使用 Intl.DateTimeFormat 和 Intl.NumberFormat API 根据用户的区域设置格式化日期和数字。这确保了日期和数字以用户所在地区的正确格式显示。例如，日期“January 1, 2024”在美国 (01/01/2024) 和欧洲 (01.01.2024) 的格式是不同的。

4. 货币格式化

使用 Intl.NumberFormat API 根据用户的区域设置格式化货币。这确保了货币符号和小数分隔符以用户所在地区的正确方式显示。例如，货币金额“$1,234.56”在美国 ($1,234.56) 和德国 (1.234,56 €) 的格式是不同的。

5. 翻译管理

使用翻译管理系统来管理您的翻译。这使得随着时间的推移更新和维护您的翻译变得更加容易。像 i18next 和 Lokalise 这样的工具可以帮助管理翻译并动态加载它们。可以考虑使用一个 Web Component 来处理翻译文本的显示。

6. 文化考量

在设计组件时，要注意文化差异。例如，颜色和图像在不同文化中可能有不同的含义。避免使用可能对某些用户具有冒犯性的文化敏感内容。一个简单的例子：在某些文化中，红色表示好运，而在其他文化中，它代表危险。

Web Component 库和框架示例

有几个库和框架可以帮助您更高效地构建 Web Components：

结论

Web Components 为构建可复用的 Web UI 元素提供了一种强大而灵活的方式。它们的浏览器原生特性、框架无关性和封装能力使其成为现代 Web 开发的宝贵资产。通过理解核心技术并遵循最佳实践，您可以创建易于维护、复用并集成到各种项目中的 Web Components。随着 Web 标准的不断发展，Web Components 必将在 Web 开发的未来扮演越来越重要的角色。拥抱 Web Components，构建健壮、可扩展且面向未来的 Web 应用程序，以服务于全球受众。

Web Components：面向全球 Web 开发的浏览器原生组件架构 | MLOG