用 Custom Elements 实现购物车组件并封装为 Library-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要自定义一些组件来满足项目需求。而 Custom Elements 是一种用于创建可重用的自定义 HTML 元素的技术，能够帮助我们更加高效地开发和管理组件。本文将介绍如何使用 Custom Elements 实现一个购物车组件，并封装为 Library。

Custom Elements 简介

Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义 HTML 元素并将其封装到一个独立的模块中。通过 Custom Elements，我们可以创建一个完整的组件，包括 HTML、CSS 和 JavaScript，并将其封装为一个自定义元素，这样就能够在页面中像使用标准 HTML 元素一样使用它。

Custom Elements 有两种类型：autonomous custom element 和 customized built-in element。前者可以完全自定义元素的行为和样式，后者则是在现有的 HTML 元素基础上进行扩展。

实现购物车组件

我们将使用 Custom Elements 实现一个简单的购物车组件，包含以下几个功能：

展示购物车中的商品列表
添加商品到购物车
从购物车中删除商品
计算购物车中商品的总价

创建 Custom Element

首先，我们需要创建一个 Custom Element，可以使用 ES6 中的 class 关键字来定义。在这个类中，我们需要继承 HTMLElement，并实现 connectedCallback() 方法，该方法会在元素插入到 DOM 中时被调用。

// javascriptcn.com 代码示例
class ShoppingCart extends HTMLElement {
  constructor() {
    super();

    // 初始化购物车
    this.items = [];

    // 创建购物车元素
    const shadow = this.attachShadow({ mode: 'open' });
    const cart = document.createElement('div');
    cart.classList.add('cart');

    // 添加购物车元素到 Shadow DOM 中
    shadow.appendChild(cart);
  }

  connectedCallback() {
    // TODO: 实现购物车组件的功能
  }
}

// 定义 custom element
customElements.define('shopping-cart', ShoppingCart);

在上面的代码中，我们创建了一个 ShoppingCart 类，并在构造函数中初始化了购物车。然后，我们使用 attachShadow() 方法创建了一个 Shadow DOM，并将购物车元素添加到其中。最后，我们使用 customElements.define() 方法将 ShoppingCart 类定义为一个 Custom Element。

实现购物车组件的功能

接下来，我们需要在 connectedCallback() 方法中实现购物车组件的功能。

展示购物车中的商品列表

我们可以添加一个 render() 方法来渲染购物车中的商品列表。在这个方法中，我们可以遍历购物车中的商品，并将它们添加到购物车元素中。

// javascriptcn.com 代码示例
render() {
  const cart = this.shadowRoot.querySelector('.cart');
  cart.innerHTML = '';

  this.items.forEach(item => {
    const product = document.createElement('div');
    product.classList.add('product');
    product.innerHTML = `
      <span>${item.name}</span>
      <span>${item.price}</span>
      <button data-id="${item.id}">删除</button>
    `;
    cart.appendChild(product);
  });
}

在上面的代码中，我们使用 querySelector() 方法获取购物车元素，并清空它的内容。然后，我们遍历购物车中的商品，创建一个含有商品名称、价格和删除按钮的元素，并将它们添加到购物车元素中。

添加商品到购物车

我们可以添加一个 addItem() 方法来添加商品到购物车。在这个方法中，我们可以向 items 数组中添加一个新的商品，并调用 render() 方法重新渲染购物车。

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

从购物车中删除商品

我们可以添加一个 removeItem() 方法来从购物车中删除商品。在这个方法中，我们可以使用 data-id 属性来获取要删除的商品的 ID，并从 items 数组中删除该商品，并调用 render() 方法重新渲染购物车。

removeItem(id) {
  this.items = this.items.filter(item => item.id !== id);
  this.render();
}

计算购物车中商品的总价

我们可以添加一个 getTotalPrice() 方法来计算购物车中商品的总价。在这个方法中，我们可以遍历购物车中的商品，并将它们的价格相加。

getTotalPrice() {
  return this.items.reduce((total, item) => total + item.price, 0);
}

使用购物车组件

现在，我们已经实现了一个简单的购物车组件。我们可以在页面中使用它，只需要添加一个 shopping-cart 元素即可。

<shopping-cart></shopping-cart>

然后，我们可以使用 JavaScript 来添加商品到购物车、删除商品和计算总价。

// javascriptcn.com 代码示例
const cart = document.querySelector('shopping-cart');

// 添加商品到购物车
cart.addItem({ id: 1, name: '商品1', price: 100 });
cart.addItem({ id: 2, name: '商品2', price: 200 });

// 删除商品
cart.removeItem(1);

// 计算总价
console.log(cart.getTotalPrice());

封装为 Library

现在，我们已经实现了一个完整的购物车组件。如果我们需要在多个项目中使用它，我们可以将其封装为一个 Library，并发布到 npm 上。

我们可以使用 Rollup 来打包我们的 Library，并使用 Babel 来转换 ES6 代码。

首先，我们需要添加一个 package.json 文件，并安装我们需要的依赖。

// javascriptcn.com 代码示例
{
  "name": "shopping-cart",
  "version": "1.0.0",
  "description": "A simple shopping cart component using Custom Elements",
  "main": "dist/shopping-cart.js",
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "rollup": "^2.56.3",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-terser": "^7.0.2"
  }
}

然后，我们需要创建一个 rollup.config.js 文件来配置 Rollup。

// javascriptcn.com 代码示例
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/shopping-cart.js',
    format: 'umd',
    name: 'ShoppingCart'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
      presets: [
        ['@babel/preset-env', { modules: false }]
      ]
    }),
    terser()
  ]
};

在上面的代码中，我们将 src/index.js 作为入口文件，并将打包后的文件输出到 dist/shopping-cart.js。我们使用 rollup-plugin-babel 来将 ES6 代码转换为 ES5 代码，并使用 rollup-plugin-terser 来压缩代码。

最后，我们可以将购物车组件封装为一个 Library，并发布到 npm 上。

import ShoppingCart from './ShoppingCart';

export default ShoppingCart;

npm login
npm publish

总结

本文介绍了如何使用 Custom Elements 实现一个购物车组件，并封装为 Library。Custom Elements 可以帮助我们更加高效地开发和管理组件，而封装为 Library 可以方便我们在多个项目中使用。希望本文对你有所帮助！

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