使用 Custom Elements 和 TypeScript 创建动态 Web 组件-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，组件化是非常重要的一个概念。它能够将一个复杂的应用程序拆分成小的、可重用的组件，使得应用程序更加易于开发和维护。而 Custom Elements 和 TypeScript 则是两个非常流行的技术，它们可以帮助我们更好地创建动态 Web 组件。

Custom Elements

Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义的 HTML 元素，这些元素可以拥有自己的属性和方法，并且可以被其他开发者使用和扩展。Custom Elements 可以被认为是一种更加灵活的组件化方式，因为它不依赖于任何特定的框架或库。

创建 Custom Elements

要创建 Custom Elements，我们需要使用 window.customElements.define 方法来注册一个新的元素。这个方法接受两个参数：元素名称和元素的定义。元素名称应该以连字符分隔的小写字母命名，例如 "my-element"。元素的定义则需要继承自 HTMLElement 类，并且需要实现 connectedCallback 和 disconnectedCallback 方法。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  connectedCallback() {
    console.log("MyElement connected");
  }

  disconnectedCallback() {
    console.log("MyElement disconnected");
  }
}

window.customElements.define("my-element", MyElement);

现在我们就可以在 HTML 中使用这个自定义元素了：

<my-element></my-element>

自定义元素的属性和方法

自定义元素可以拥有自己的属性和方法。要定义一个属性，我们需要在元素的定义中使用 Object.defineProperty 方法，并且需要实现 attributeChangedCallback 方法来监听属性变化。要定义一个方法，则直接在元素的定义中添加即可。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ["name"];
  }

  get name() {
    return this.getAttribute("name");
  }

  set name(value: string) {
    this.setAttribute("name", value);
  }

  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
    if (name === "name") {
      console.log(`name changed from ${oldValue} to ${newValue}`);
    }
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

window.customElements.define("my-element", MyElement);

现在我们就可以在 HTML 中使用这个自定义元素的属性和方法了：

<my-element name="World"></my-element>
<script>
  const el = document.querySelector("my-element");
  console.log(el.name); // "World"
  el.sayHello(); // "Hello, World!"
</script>

TypeScript

TypeScript 是 JavaScript 的超集，它提供了静态类型检查、类和接口等面向对象的特性，可以帮助我们更好地组织和维护代码。TypeScript 也是 Angular、Vue.js 和 React 等流行框架的默认语言。

安装 TypeScript

要使用 TypeScript，我们需要先安装它。可以使用 npm 命令来进行安装：

npm install -g typescript

编写 TypeScript 代码

在 TypeScript 中，我们需要使用 .ts 文件来编写代码。TypeScript 代码可以直接使用 JavaScript 代码，但是我们可以使用 class、interface 等关键字来定义类型和接口。

// javascriptcn.com 代码示例
interface Person {
  name: string;
  age: number;
}

class Student implements Person {
  constructor(public name: string, public age: number) {}

  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

const student = new Student("Tom", 18);
student.sayHello();

编译 TypeScript 代码

在编写完 TypeScript 代码后，我们需要将它编译成 JavaScript 代码，才能在浏览器中运行。可以使用 tsc 命令来进行编译：

tsc file.ts

这个命令会将 file.ts 编译成 file.js 文件。如果我们想要自动地编译 TypeScript 代码，可以使用 tsc --watch 命令来进行监视。

现在我们已经了解了 Custom Elements 和 TypeScript 的基本用法，让我们来看看如何使用它们来创建动态 Web 组件。

创建一个自定义元素

首先，我们需要创建一个自定义元素。我们可以使用 TypeScript 来定义元素的属性和方法：

// javascriptcn.com 代码示例
interface MyElementProps {
  name?: string;
}

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ["name"];
  }

  get name(): string | undefined {
    return this.getAttribute("name");
  }

  set name(value: string | undefined) {
    if (value !== undefined) {
      this.setAttribute("name", value);
    } else {
      this.removeAttribute("name");
    }
  }

  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
    if (name === "name") {
      console.log(`name changed from ${oldValue} to ${newValue}`);
    }
  }

  sayHello() {
    console.log(`Hello, ${this.name ?? "World"}!`);
  }
}

创建一个 React 组件

接下来，我们可以创建一个 React 组件，来使用这个自定义元素。我们可以使用 React.forwardRef 方法来创建一个可以接受 ref 的组件，并且可以使用 TypeScript 来定义组件的属性和方法：

// javascriptcn.com 代码示例
import React, { forwardRef, Ref } from "react";

interface MyComponentProps extends MyElementProps {
  onSayHello?: () => void;
}

const MyComponent = forwardRef(function MyComponent(
  props: MyComponentProps,
  ref: Ref<MyElement>
) {
  const { name, onSayHello, ...restProps } = props;

  function handleClick() {
    const el = ref.current;
    if (el !== null) {
      el.sayHello();
      if (onSayHello !== undefined) {
        onSayHello();
      }
    }
  }

  return (
    <div {...restProps}>
      <my-element ref={ref} name={name} />
      <button onClick={handleClick}>Say Hello</button>
    </div>
  );
});

使用组件

现在我们已经创建了一个自定义元素和一个 React 组件，让我们来试着使用它们。

// javascriptcn.com 代码示例
import React, { useRef } from "react";

export default function App() {
  const ref = useRef<MyElement>(null);

  function handleSayHello() {
    console.log("Hello from App!");
  }

  return (
    <div>
      <MyComponent ref={ref} name="World" onSayHello={handleSayHello} />
    </div>
  );
}

总结

通过使用 Custom Elements 和 TypeScript，我们可以更加方便地创建动态 Web 组件。Custom Elements 提供了自定义元素的能力，可以让我们创建更加灵活的组件。TypeScript 则提供了静态类型检查和面向对象的特性，可以让我们更好地组织和维护代码。希望本文对你有所帮助，谢谢阅读！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650953eb95b1f8cacd40f618