模块化编程——单选框封装--12.14

---

一、基类组件Componet.js

用来创建指定元素，并设置父容器。

export default class Component extends EventTarget{
    elem;
    constructor(type){
        super();
        this.elem=document.createElement(type);
    }
    appendTo(parent){
        if(typeof parent==="string") parent=document.querySelector(parent);
        if(parent)parent.appendChild(this.elem);
        return parent;
    }
}

二、多选框类，CheckBox.js

1.引入父类

代码如下（示例）：

import Component from "./Component.js";

2.CheckBox.js

其中，initStyle()设置初始化样式，setStyle()修改点击后的样式。disatch()触发事件。
代码如下（示例）：

export default class CheckBox extends Component{
    _checked=false;
    constructor(label){
       super("div");
       this.elem.innerHTML=`
        <div class='icon'></div>
        <div class='label'>${label}</div>
       `
       this.elem.style.display="flex";
       this.initStyle();
       this.elem.addEventListener("click",e=>this.clickHandler(e));
    }
    initStyle(){
        Object.assign(this.elem.firstElementChild.style,{
            width:"14px",
            height:"14px",
            backgroundImage:"url(./img/new_icon.png)",
            backgroundPositionX:"-238px",
            backgroundPositionY:"-37px",
            marginTop:"3px",
            marginRight:"5px"
       });
    }
    clickHandler(e){
        this.setChecked(!this._checked);
        this.dipatch();
    }
    dipatch(){
        var evt=new Event("change");
        evt.checked=this._checked;
        this.dispatchEvent(evt);
    }
    setChecked(bool){
        this._checked=bool;
        this.setStyle();
    }
    setStyle(){
        Object.assign(this.elem.firstElementChild.style,{
            backgroundPositionX:this._checked ? "-128px" : "-238px",
            backgroundPositionY:this._checked ? "-126px" : "-37px",
       });
    }
}

---

三、单选框类

export default class Radio extends CheckBox{
    // 存储不同组的选中的信息，组名
    group;
    // 添加一个静态属性，用来存储每组中的不同value
    // list={sex:['男','女'],hobby:['唱歌'，'跳舞']};
    static group_list={};
    constructor(label,group){
        super(label);
        // 继承父类生成个div；
        this.group=group;
        if(!Radio.group_list[group]){
            // console.log(this.group,'不存在');
            // 不存在 将group添加到静态属性中。将当前选中的对象，赋值给当前group
            Radio.group_list[group]=this;
            // 添加选中状态
            this.setChecked(true);
        }
    }
    // 更改当前div点击事件
    clickHandler(e){
        // 将之前group中存储的对象，取消选中状态
        if(Radio.group_list[this.group]) Radio.group_list[this.group].setChecked(false);
        // 更改当前group中存储的对象为当前点击对象,并设置选中状态为true
        Radio.group_list[this.group]=this;
        this.setChecked(true);
        this.dipatch();//抛发事件
    }

    // 初始化样式
    initStyle(){
        Object.assign(this.elem.firstElementChild.style,{
            width:"18px",
            height:"18px",
            backgroundImage:"url(./img/new_icon.png)",
            backgroundPositionX:"-195px",
            backgroundPositionY:"-104px",
            marginTop:"2px",
            marginRight:"8px"
       });
    }

    // 更改样式
    setStyle(){
        Object.assign(this.elem.firstElementChild.style,{
            backgroundPositionX:this._checked ? "-175px" : "-195px"
       });
    }

---

四、 HTML

    <script type='module'>
        import Radio from './js/Radio.js';
        var arr=['男','女'];
        arr.forEach(item=>{
            var rb=new Radio(item,'sex');
            rb.appendTo('body');
        })
    </script>