继承式-单选框-雪碧图变化位置实现

单选（图片生成选中与不选中）
HTML文件+js文件(CheckBox.js+CheckBoxVo.js+Radio.js)

单选文件.HTML

<script type="module">// module是模块  单词解析：n. [计] 模块；组件；模数  英 /'mɒdjuːl/ 
//这个单选框是由之前写的多选框利用继承方式进行编写的，这个是封装好的组件了，通过传参可以实现更改该
    import CheckBoxVo from "./js/CheckBoxVo.js";//  导入...来自....
    import Radio from "./js/Radio.js";

    var ckvo=new CheckBoxVo();
    ckvo.name="hobby";
    ckvo.imgUrl="./img/common.png";
    ckvo.width="49px";
    ckvo.height="49px";
    ckvo.checkedOffsetX="-296px";
    ckvo.checkedOffsetY="-241px";
    ckvo.uncheckedOffsetX="-245px";
    ckvo.uncheckedOffsetY="-241px";

    
   for(var i=0;i<10;i++){  //这是创建div
    let ck=new Radio(ckvo);
    ck.appendTo(document.body);//把div放入body中
   }

//    ck是一个对象,对象下有elem属性,这个属性就是div
</script>

checkBox.js

export default class CheckBox {//本文件是多选框
    _checked = false;
    // 构造函数,new的时候执行这个函数
    constructor(ckvo) {  //构造函数，白话;一个工厂，生产车间，
        this.ckvo=ckvo;
        this.elem = this.createCheck(ckvo);//执行下面方法，传入参数，运行结束饭后赋值给，elem
        this.name=ckvo.name;   
        this.elem.self=this;//指向，
        this.elem.setAttribute("name",this.name);
    }
    createCheck(ckvo) {
        if (this.elem) return this.elem;//判断，this.elem，存在布尔值为真
        let div = document.createElement("div");//创建dom元素
        Object.assign(div.style, {  //复制样式，div的style。左边是是目标，右边是源
            width: ckvo.width,
            height: ckvo.height,
            backgroundImage: `url(${ckvo.imgUrl})`,
            backgroundPositionX: ckvo.uncheckedOffsetX,
            backgroundPositionY: ckvo.uncheckedOffsetY,
            margin: "5px"
        });
        div.addEventListener("click", e => {  //箭头函数写法，事件侦听
            // 这里this因为使用了箭头函数,this就是箭头函数外的this指向,
            // this在这里是实例化的对象
            // this.checked=值调用了set checked()方法
           this.checkClickHandler();
        });
        return div;
    }

    checkClickHandler(){
        this.checked = !this.checked;//开关模式，（取反）
        var evt = new Event("change");//变化 改变  change
        evt.obj = this;  //this
        evt.checked = this.checked;
        document.dispatchEvent(evt);
    }

    set checked(value) {
        // 当新设置的值和以前的一样时,节省效率不再进入执行
        if (this._checked === value) return;
        this._checked = value;
        Object.assign(this.elem.style, {
            // value是一个布尔值
            backgroundPositionX: value ? this.ckvo.checkedOffsetX : this.ckvo.uncheckedOffsetX,
            backgroundPositionY: value ? this.ckvo.checkedOffsetY : this.ckvo.uncheckedOffsetY,
        });
    }
    get checked() {
        return this._checked;
    }
    // 将check这个div放在父容器中
    appendTo(parent) {
        parent.appendChild(this.elem);
    }
}

CheckBoxVo.js

export default class CheckBoxVo{//导出模块，  VO是对象模型
    constructor(){  //构造函数，   
        this.name="";
        this.imgUrl="";
        this.width="20px";
        this.height="20px";
        this.checkedOffsetX="0px"; //初始值的设置
        this.checkedOffsetY="0px";
        this.uncheckedOffsetX="0px";
        this.uncheckedOffsetY="0px";
        //上面设置的是初始值，后期通过传参来改变对象的
    }
}

//模块化开发中，利用的是一个内容通过import 导入可能存在bug，就是加载时，调用的是缓存中的内容、所以要通过关闭浏览器再打开看测试

Radio.js

import CheckBox from "./CheckBox.js";

export default class Radio extends CheckBox{//继承，Radio  继承 CheckBox
    constructor(name){
        super(name);//超了的方法
    }
    checkClickHandler(){
        this.checked = true;
        var evt = new Event("change");//改变change
        evt.obj = this;
        evt.checked = this.checked;
        document.dispatchEvent(evt);//抛发。。。改变change
    }
    set checked(value){  //设置  
        if(value){
            var elems=document.getElementsByName(this.name); //通过Name获取的div
            for(let i=0;i<elems.length;i++){//遍历目的，div.self.checked=false  ,m没有没有点击中的赋值false
                if(elems[i].self!==this){//在  CheckBox.js文件中有 this.elem.self=this;//指向，
                    elems[i].self.checked=false;
                }
            }
        }
        // 这里获取的是所有的Div;
        super.checked=value;//超类的
    }
}