两种方式封装，第一种是自定义对象里的混合模式（原型模式和构造函数模式结合），第二种是CLASS类定义对象。
以封装选项卡功能为例
👇HTML和CSS部分
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#tab {
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
}
#tab .btns {
display: flex;
justify-content: space-between;
text-align: center;
}
.btns li {
width: 33%;
height: 80px;
line-height: 80px;
background: black;
color: white;
cursor: pointer;
}
.btns li:hover {
opacity: 0.3;
}
.content {
margin-top: 50px;
font-size: 40px;
}
.content li:not(:first-of-type) {
display: none;
}
</style>
<body>
<div id="tab">
<ul class="btns">
<li>首页</li>
<li>新闻</li>
<li>关于我们</li>
</ul>
<ul class="content">
<li>我是首页内容</li>
<li>我是新闻内容</li>
<li>我是关于我们内容</li>
</ul>
</div>
</body>
混合模式
function Tab(el){
//获取到选项卡最大的容器
this.el=document.querySelector(el);
//获取所有按钮
this.btns= this.el.querySelector('.btns').children;
//获取内容
this.content = this.el.querySelector('.content').children;
}
Tab.prototype.init=function(){
var leng = this.btns.length;
var that = this;
for(var i=0;i<leng;i++){
this.btns[i].index=i;
this.btns[i].addEventListener('click',function(){
for(var j=0;j<leng;j++){
that.content[j].style.display='none';
}
that.content[this.index].style.display='block';
})
}
}
var tab = new Tab('#tab');
tab.init();
console.log(tab);
class定义对象（ES6语法，推荐！）
- 优点：
1、class 写法更加简洁、含义更加明确、代码结构更加清晰。
2、class 尽管也是函数，却无法直接调用。
3、class 不存在变量提升。
4、class 为污染 window 等全局变量。
5、class 函数体中的代码始终以严格模式执行
class Tab{
init(){
var leng = this.btns.length;
//因为下面的点击事件里的this会指向btns，所以要用that变量捕获this，让this指向实例化对象
var that = this;
//循环第一次获取到每个选项卡按钮
for(var i = 0; i < leng; i++) {
//储存btns的下标值
this.btns[i].index = i;
//添加点击事件
this.btns[i].addEventListener('click', function() {
//循环第二次获取到每个选项卡内容
for(var j = 0; j < leng; j++) {
//将所有内容的display设置为none
that.content[j].style.display = 'none';
}
//根据上面获取到选项卡按钮下标值显示相应的内容
that.content[this.index].style.display = 'block';
})
}
}
}
class Tabchild extends Tab{
constructor(el){
super();
//获取最大的盒子
this.el = document.querySelector(el);
//获取按钮，.btns是按钮的爸爸，加上.children就是指向按钮
this.btns = this.el.querySelector('.btns').children;
//获取内容
this.content = this.el.querySelector('.content').children;
}
}
var tab = new Tabchild('#tab');
tab.init();
网友评论