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

举例：

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

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

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

分析：

两个盒子的共同点：

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

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

两个盒子的不同点：

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

思路：

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

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

实现代码：

HTML 部分：

<div id="div1">
    <p style="background-color: pink">点击切换</p>
    <button class="on">1</button>
    <button>2</button>
    <button>3</button>
    <div style="display: block">哈哈哈哈哈</div>
    <div>嘻嘻嘻嘻嘻</div>
    <div>嘿嘿嘿嘿嘿</div>
</div>

<div id="div2">
    <p style="background-color: pink">自动切换</p>
    <button class="on">1</button>
    <button>2</button>
    <button>3</button>
    <div style="display: block">哈哈哈哈哈</div>
    <div>嘻嘻嘻嘻嘻</div>
    <div>嘿嘿嘿嘿嘿</div>
</div>

CSS 部分：

<style>
        #div1>div,
        #div2>div{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            display: none;
            margin-bottom: 30px;
        }
        #div1 button,
        #div2 button{
            width: 50px;
            height: 30px;
        }
        .on{
            background-color: red;;
        }
        p{
            width: 200px;
        }
    </style>

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();