淘宝订单模块的BEM实践指南：提升代码可读性和可维护性

2023-10-29 05:23:01

BEM 的奥秘：模块化代码的基石

BEM 是一种模块化的命名约定，用于为 Web 组件的 HTML、CSS 和 JavaScript 元素指定清晰、可维护的名称。它将组件分解为三个基本元素：块、元素和修饰符。

块（Block）： 独立的功能单元，拥有自己的行为和状态。
元素（Element）： 块的组成部分，执行特定功能。
修饰符（Modifier）： 用来改变块或元素的外观或行为。

淘宝订单模块实战：BEM 的力量

让我们将 BEM 应用于淘宝订单模块，以实际案例深入了解其强大功能。

HTML 结构

<div class="block-order">
  <div class="element-order-header">订单详情</div>
  <div class="element-order-items">
    <div class="item">
      <div class="item-name">商品名称</div>
      <div class="item-price">价格</div>
    </div>
  </div>
  <div class="element-order-footer">
    <div class="button-checkout">结算</div>
  </div>
</div>

在这个结构中，"block-order" 是主块，表示整个订单模块。"element-order-header"、"element-order-items" 和 "element-order-footer" 是块的元素，表示其不同部分的功能。"button-checkout" 是一个按钮，它是一个独立的块，拥有自己的行为。

CSS 样式

.block-order {
  padding: 10px;
  background-color: #fff;
}

.element-order-header {
  font-size: 18px;
  font-weight: bold;
}

.element-order-items {
  border-top: 1px solid #ccc;
  margin-top: 10px;
}

.element-order-footer {
  text-align: right;
}

.item {
  padding: 5px;
  border-bottom: 1px dotted #ccc;
}

.item-name {
  width: 50%;
}

.item-price {
  width: 50%;
  text-align: right;
}

.button-checkout {
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
}

通过 BEM 的命名方式，CSS 样式可以轻松地应用到模块的不同部分，提高代码的可读性和可维护性。

JavaScript 交互

// 获取订单模块
const orderBlock = document.querySelector('.block-order');

// 添加点击事件到结算按钮
const checkoutButton = orderBlock.querySelector('.button-checkout');
checkoutButton.addEventListener('click', () => {
  // 执行结算逻辑
});