对于页面中某些重复元素要设置相同或类似的动态属性，为了尽量减少代码重复，我们可以利用JS面向对象的构造函数思想来封装组件。
举例：
页面中两个盒子，一个盒子通过鼠标点击，可以切换显示的内容。另一个盒子自动切换显示的内容。
面向对象思想封装组件 - 1.png
面向对象思想封装组件 - 2.png
分析：
两个盒子的共同点：
盒子的布局完全相同，子节点相同
切换显示内容的动态事件相同
两个盒子的不同点：
触发事件的方式不同，一个是点击事件，一个是自动触发(页面加载)
思路：
我们通过一个构造函数，以盒子的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();
