简洁封装：单多选组件实践经验谈

前端

2024-02-12 16:20:30

引言
单多选组件是一种常见的交互元素，它允许用户在多个选项中进行选择。在实际开发中，我们经常会遇到需要使用单多选组件的情况，例如：

表单中的单选框和复选框
下拉列表中的单选和多选
标签云中的单选和多选
筛选器中的单选和多选

如果每次都需要从头开始编写单多选组件的代码，不仅会浪费时间，而且还会导致代码重复和维护困难。因此，将单多选组件进行封装是一个非常好的做法。

封装思路

单多选组件的封装主要包括以下几个方面：

结构封装： 将组件的结构代码封装成一个单独的模块，方便复用。
样式封装： 将组件的样式代码封装成一个单独的模块，便于维护。
交互封装： 将组件的交互代码封装成一个单独的模块，提高代码的可读性和可维护性。

封装实现

下面以一个简单的单多选组件为例，来说明如何进行封装。

结构封装

<div class="single-choice">
  <input type="radio" name="single-choice" value="option1" id="option1">
  <label for="option1">选项1</label>

  <input type="radio" name="single-choice" value="option2" id="option2">
  <label for="option2">选项2</label>

  <input type="radio" name="single-choice" value="option3" id="option3">
  <label for="option3">选项3</label>
</div>

<div class="multi-choice">
  <input type="checkbox" name="multi-choice" value="option1" id="option1">
  <label for="option1">选项1</label>

  <input type="checkbox" name="multi-choice" value="option2" id="option2">
  <label for="option2">选项2</label>

  <input type="checkbox" name="multi-choice" value="option3" id="option3">
  <label for="option3">选项3</label>
</div>

上面的代码是一个简单的单多选组件，它包含了一个单选组件和一个多选组件。我们可以将这个组件的结构代码封装成一个单独的模块，如下所示：

import { SingleChoice, MultiChoice } from './single-choice.js';

const singleChoice = new SingleChoice({
  el: document.querySelector('.single-choice')
});

const multiChoice = new MultiChoice({
  el: document.querySelector('.multi-choice')
});

这样，我们就将单多选组件的结构代码封装成了一个单独的模块，便于复用。

样式封装

.single-choice {
  display: flex;
  align-items: center;
}

.single-choice input[type="radio"] {
  margin-right: 5px;
}

.multi-choice {
  display: flex;
  align-items: center;
}

.multi-choice input[type="checkbox"] {
  margin-right: 5px;
}

上面的代码是单多选组件的样式代码，我们可以将它封装成一个单独的模块，如下所示：

import './single-choice.css';

这样，我们就将单多选组件的样式代码封装成了一个单独的模块，便于维护。

交互封装

class SingleChoice {
  constructor({ el }) {
    this.el = el;

    this.radios = this.el.querySelectorAll('input[type="radio"]');
    this.labels = this.el.querySelectorAll('label');

    this.radios.forEach((radio, index) => {
      radio.addEventListener('change', () => {
        this.radios.forEach((radio, index) => {
          radio.checked = false;
        });

        radio.checked = true;
      });
    });
  }
}

class MultiChoice {
  constructor({ el }) {
    this.el = el;

    this.checkboxes = this.el.querySelectorAll('input[type="checkbox"]');
    this.labels = this.el.querySelectorAll('label');

    this.checkboxes.forEach((checkbox, index) => {
      checkbox.addEventListener('change', () => {
        this.checkboxes[index].checked = !this.checkboxes[index].checked;
      });
    });
  }
}

上面的代码是单多选组件的交互代码，我们可以将它封装成一个单独的模块，如下所示：

export { SingleChoice, MultiChoice };

这样，我们就将单多选组件的交互代码封装成了一个单独的模块，提高了代码的可读性和可维护性。

使用封装后的组件

我们可以在其他地方使用封装后的单多选组件，如下所示：

<div id="app"></div>

<script src="./single-choice.js"></script>

<script>
  const app = document.querySelector('#app');

  const singleChoice = new SingleChoice({
    el: app.querySelector('.single-choice')
  });

  const multiChoice = new MultiChoice({
    el: app.querySelector('.multi-choice')
  });
</script>