JS面向对象之单选框实现

让我来为大家详细讲解一下“JS面向对象之单选框实现”的完整攻略。

一、前置知识

在学习本文内容前，需要掌握以下基础知识：

1. HTML基础语法和标签的使用。
2. CSS基础知识和样式的设置。
3. JavaScript基础语法和DOM操作。

二、单选框组件的设计

在使用JavaScript实现单选框的选择和取消操作之前，我们需要先思考该组件的设计。首先，我们需要确定该组件需要具备什么功能和特性。例如，我们需要设计一个具有以下特点的单选框组件：

1. 可以创建多个单选框，并显示对应的标签；
2. 支持单选框的选择和取消操作；
3. 支持设置单选框的初始状态和事件回调函数。

基于上述需求，我们需要设计一个单选框组件，该组件可实现上述功能，允许开发者自由地调用和配置该组件。

三、使用面向对象的方式实现单选框

为了实现单选框组件的设计，我们可以使用JavaScript的面向对象的方式进行开发。具体来说，我们可以封装一个 Radio 类，该类用来管理单选框组件的创建和操作。该类中可以包含以下方法：

1. constructor() 构造方法，用于接收传入的参数并初始化组件。
2. _createRadios() 方法，用于根据传入的参数生成单选框和标签，并将其插入到指定位置。
3. _bindEvents() 方法，用于绑定单选框的事件监听器，以支持用户的选择和取消操作。
4. setChecked(value) 和 getChecked() 方法，用于设置和获取单选框的选中状态。
5. setOnChange(fn) 方法，用于设置单选框状态改变时的回调函数。

下面是具体的代码实现：

class Radio {
  constructor(selector, options) {
    this.container = document.querySelector(selector);
    this.options = options;
    this.radios = [];

    this._createRadios();
    this._bindEvents();
  }

  _createRadios() {
    const { data, name, checkedIndex } = this.options;

    data.forEach((item, index) => {
      const radio = document.createElement("input");
      radio.type = "radio";
      radio.name = name;
      radio.value = item.value;
      radio.checked = index === checkedIndex;

      const label = document.createElement("label");
      label.innerHTML = item.label;

      const div = document.createElement("div");
      div.appendChild(radio);
      div.appendChild(label);

      this.container.appendChild(div);
      this.radios.push(radio);
    });
  }

  _bindEvents() {
    this.radios.forEach((radio) => {
      radio.addEventListener("change", () => {
        if (this.onChange) {
          this.onChange(this.getChecked());
        }
      });
    });
  }

  setChecked(value) {
    const radio = this.radios.find((radio) => radio.value === value);
    if (radio) {
      radio.checked = true;
      if (this.onChange) {
        this.onChange(value);
      }
    }
  }

  getChecked() {
    const checkedRadio = this.radios.find((radio) => radio.checked);
    return checkedRadio ? checkedRadio.value : null;
  }

  setOnChange(fn) {
    this.onChange = fn;
  }
}

上述代码实现的单选框组件包含以下功能：

1. 通过 constructor() 方法接收传入的参数，并根据参数生成对应的单选框和标签；
2. 通过 _bindEvents() 方法绑定单选框的 change 事件监听器，并在用户选择或取消操作时触发回调函数；
3. 通过 setChecked(value) 方法设置指定单选框的选中状态，并在用户操作后触发回调函数；
4. 通过 getChecked() 方法获取当前选中的单选框的值；
5. 通过 setOnChange(fn) 方法设置单选框状态改变时的回调函数。

四、使用单选框组件

使用单选框组件非常简单，我们只需要在页面中引入单选框组件的JavaScript文件，并创建对应的实例即可。例如：

<div class="radio-container"></div>

<script src="./radio.js"></script>
<script>
  const data = [
    { label: "男", value: "male" },
    { label: "女", value: "female" },
  ];
  const options = {
    data: data,
    name: "gender",
    checkedIndex: 0,
  };

  const radioGroup = new Radio(".radio-container", options);
  radioGroup.setOnChange((value) => {
    console.log("当前选中的性别是：", value);
  });
</script>

上述代码中，我们引入了单选框组件的JavaScript文件，并在页面中创建了一个空的 div 元素，用于存放单选框组件。接着，我们根据需要的数据和选项创建了一个单选框组件的实例，通过 setOnChange() 方法设置当单选框选择状态改变时触发的回调函数。