使用 Custom Elements 和 Model-View-ViewModel 构建可扩展的 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

Web 应用的开发过程中，我们经常需要构建可扩展的组件，以便于在不同的页面和应用中重复使用。传统的开发方式往往需要编写大量的 JavaScript 和 HTML 代码，而这些代码往往难以复用和维护。为了解决这个问题，我们可以使用 Custom Elements 和 Model-View-ViewModel（MVVM）架构来构建可扩展的 Web 应用。

Custom Elements

Custom Elements 是 Web Components 规范的一部分，它允许我们创建自定义的 HTML 元素，并将其封装在一个独立的组件中。使用 Custom Elements，我们可以创建具有自定义行为和样式的 HTML 元素，这些元素可以像普通的 HTML 元素一样使用和组合。

创建 Custom Elements

要创建一个 Custom Element，我们需要使用 window.customElements.define 方法，该方法接受两个参数：元素名称和元素类。元素名称必须是一个连字符分隔的小写字符串，例如 my-element。元素类必须继承自 HTMLElement 类，并实现 connectedCallback 和 disconnectedCallback 方法。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    // 在构造函数中可以初始化元素的状态和属性
  }

  connectedCallback() {
    // 元素被插入到文档中时调用
  }

  disconnectedCallback() {
    // 元素从文档中移除时调用
  }
}

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

使用 Custom Elements

创建完 Custom Element 后，我们可以像使用普通的 HTML 元素一样使用它。例如：

<my-element></my-element>

我们还可以为 Custom Element 添加属性和事件，例如：

<my-element foo="bar" on-click="handleClick"></my-element>

在元素类中，我们可以通过 this.getAttribute('foo') 方法获取属性值，通过 this.dispatchEvent(new Event('click')) 方法触发事件。

Model-View-ViewModel

Model-View-ViewModel 是一种常用的前端架构模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。模型表示应用程序的数据和业务逻辑，视图表示应用程序的用户界面，视图模型则是连接模型和视图的桥梁。

MVVM 架构

在 MVVM 架构中，视图模型负责将模型中的数据转换为视图中的数据，同时也负责将视图中的事件转换为模型中的操作。视图模型通常由 JavaScript 类实现，它们可以使用观察者模式来监听模型中的数据变化和视图中的事件。

// javascriptcn.com 代码示例
class ViewModel {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    this.model.addObserver(this);
    this.view.addEventListener('click', this.handleClick.bind(this));
  }

  update() {
    const data = this.model.getData();
    const viewModel = this.transform(data);
    this.view.update(viewModel);
  }

  handleClick(event) {
    const data = this.view.getData(event);
    this.model.setData(data);
  }

  transform(data) {
    // 将模型中的数据转换为视图中的数据
  }
}

使用 MVVM 架构

使用 MVVM 架构可以将应用程序分为三个部分，使得每个部分都可以独立开发、测试和维护。例如，在一个购物车应用程序中，我们可以将购物车数据封装在一个模型中，将购物车列表视图封装在一个视图中，将购物车逻辑封装在一个视图模型中。

// javascriptcn.com 代码示例
class CartModel {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
    this.notifyObservers();
  }

  removeItem(index) {
    this.items.splice(index, 1);
    this.notifyObservers();
  }

  getData() {
    return this.items;
  }

  setData(data) {
    this.items = data;
    this.notifyObservers();
  }

  addObserver(observer) {
    // 添加观察者
  }

  removeObserver(observer) {
    // 移除观察者
  }

  notifyObservers() {
    // 通知观察者
  }
}

class CartView {
  constructor(element) {
    this.element = element;
  }

  update(viewModel) {
    // 更新视图
  }

  getData(event) {
    // 获取视图中的数据
  }
}

class CartViewModel {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    this.model.addObserver(this);
    this.view.addEventListener('click', this.handleClick.bind(this));
  }

  update() {
    const data = this.model.getData();
    const viewModel = this.transform(data);
    this.view.update(viewModel);
  }

  handleClick(event) {
    const data = this.view.getData(event);
    this.model.setData(data);
  }

  transform(data) {
    // 将模型中的数据转换为视图中的数据
  }
}

const cartModel = new CartModel();
const cartView = new CartView(document.querySelector('#cart'));
const cartViewModel = new CartViewModel(cartModel, cartView);

构建可扩展的 Web 应用

使用 Custom Elements 和 MVVM 架构可以使我们更容易构建可扩展的 Web 应用。我们可以将应用程序的不同部分封装在不同的 Custom Element 中，使用 MVVM 架构来连接它们。这样，我们就可以在不同的页面和应用中重复使用这些组件，同时也可以更方便地维护和扩展应用程序。

例如，在一个电商应用程序中，我们可以将商品列表封装在一个 Custom Element 中，将购物车列表封装在另一个 Custom Element 中，然后使用 MVVM 架构来连接它们。这样，我们就可以在不同的页面和应用中重复使用这些组件，同时也可以更方便地维护和扩展应用程序。

<product-list></product-list>
<cart-list></cart-list>

// javascriptcn.com 代码示例
class ProductListModel {
  constructor() {
    this.products = [];
  }

  getProducts() {
    return this.products;
  }

  setProducts(products) {
    this.products = products;
  }
}

class ProductListView {
  constructor(element) {
    this.element = element;
  }

  update(viewModel) {
    // 更新视图
  }

  getData(event) {
    // 获取视图中的数据
  }
}

class ProductListViewModel {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    this.view.addEventListener('click', this.handleClick.bind(this));
  }

  handleClick(event) {
    // 处理视图中的事件
  }
}

class CartListModel {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  removeItem(index) {
    this.items.splice(index, 1);
  }

  getItems() {
    return this.items;
  }

  setItems(items) {
    this.items = items;
  }
}

class CartListView {
  constructor(element) {
    this.element = element;
  }

  update(viewModel) {
    // 更新视图
  }

  getData(event) {
    // 获取视图中的数据
  }
}

class CartListViewModel {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    this.model.addObserver(this);
    this.view.addEventListener('click', this.handleClick.bind(this));
  }

  update() {
    const items = this.model.getItems();
    const viewModel = this.transform(items);
    this.view.update(viewModel);
  }

  handleClick(event) {
    const data = this.view.getData(event);
    this.model.removeItem(data.index);
  }

  transform(items) {
    // 将模型中的数据转换为视图中的数据
  }
}

window.customElements.define('product-list', class extends HTMLElement {
  constructor() {
    super();

    this.model = new ProductListModel();
    this.view = new ProductListView(this);
    this.viewModel = new ProductListViewModel(this.model, this.view);
  }
});

window.customElements.define('cart-list', class extends HTMLElement {
  constructor() {
    super();

    this.model = new CartListModel();
    this.view = new CartListView(this);
    this.viewModel = new CartListViewModel(this.model, this.view);
  }
});

总结

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656019bad2f5e1655da48767