JS 构造函数思想在DOM事件上的应用

对于页面中某些重复元素要设置相同或类似的动态属性，为了尽量减少代码重复，我们可以利用JS面向对象的构造函数思想来封装组件。

举例：

页面中两个盒子，一个盒子通过鼠标点击，可以切换显示的内容。另一个盒子自动切换显示的内容。

面向对象思想封装组件 - 1.png

面向对象思想封装组件 - 2.png

分析：

两个盒子的共同点：

1. 盒子的布局完全相同，子节点相同

2. 切换显示内容的动态事件相同

两个盒子的不同点：

触发事件的方式不同，一个是点击事件，一个是自动触发(页面加载)

思路：

我们通过一个构造函数，以盒子的id为参数，构造出一个实例对象，这个对象可以调用构造函数上的方法来实现动态事件。

在构造函数中，我们把两个盒子的共同的属性放到构造函数的属性里，将点击事件和自动触发事件分别作为两个方法，放到构造函数的原型 prototype 上。

实现代码：

HTML 部分：

    
点击切换
    1
    2
    3
    
哈哈哈哈哈
    
嘻嘻嘻嘻嘻
    
嘿嘿嘿嘿嘿



    
自动切换
    1
    2
    3
    
哈哈哈哈哈
    
嘻嘻嘻嘻嘻
    
嘿嘿嘿嘿嘿

CSS 部分：

JS 部分：

 function Change(id) {
        this.box = document.querySelector(id); 
        this.btns = this.box.querySelectorAll('button');
        this.divs = this.box.querySelectorAll('div');
        this.num = 0;
     // 改变按钮样式和下面的显示内容，是通用方法，放在属性里
        this.itemChange = (index)=> {
            this.divs.forEach((item)=>{
                item.style.display = 'none';
            });
            this.divs[index].style.display = 'block';

            this.btns.forEach((item) => {
                item.classList.remove('on');
            });
            this.btns[index].classList.add('on');
        };
    }
    //点击改变
    Change.prototype.go = function () {
        this.btns.forEach((item,index) => {
            item.onclick = () =>{
                this.itemChange(index)
            }
        });
    };
    // 自动改变，用定时器实现
    Change.prototype.autogo = function(){
        setInterval(()=>{
            this.num ++;
            if (this.num > this.btns.length - 1){this.num = 0}
            this.itemChange(this.num);
        }, 500)
    };

    // 生成盒子1的实例，调用相应动态方法
    let box1 = new Change('#div1');
    box1.go();

    // 生成盒子2的实例，调用相应动态方法
    let box2 = new Change('#div2');
    box2.autogo();