基于jquery的ES6面向对象选项卡
ES5中的面向对象相信大家都非常熟悉，包括一系列的配置参数，方法，自定义事件等，现在简单介绍一下es6面向对象的一些知识还有一个基于jquery的ES6面向对象选项卡的写法。
ES6中提供了基于类class的面向对象语法。但class实际上是ES6提供的一颗语法糖，JavaScript是一门基于原型的面向对象语言。
// 父类
class Test {
// 构造器
constructor (arg1, arg2) {
this.arg1 = arg1;
this.arg2 = arg2;
}
// 实例方法
fn () {
console.log('fn');
}
// 类方法
static create () {
console.log('create');
}
}
//实例调用实例方法
var t1 = Test();
t1.fn();//fn
//类调用类方法
Test.create();//create
// 子类
class TestCopy extends Test {
constructor (arg1, arg2,arg3) {
// super关键词调用父类来继承
super(arg1, arg2);
this.arg3 = arg3;
}
}上面的代码定义了一个Test类， 可以看到里面有一个constructor方法， 这就是构造方法，也可以叫做构造器，而this关键字则代表实例对象。也就是说，ES5中的构造函数Test， 对应的是ES6中Test类中的constructor方法，也就是配置参数。
Test类除了构造函数方法或者说是配置参数外，还定义了两个fn实例方法和create类方法。实例方法由实例来调用，类方法只能有类来调用。在ES6中定义类中的方法的时候，前面不需要加上function关键字，直接把写函数定义就行了。另外，虽然类是对象的形式，但是每个方法之间不需要加逗号，因为加了会报错，类中的方法全部是定义在原型上。
ES6中class可以通过extends关键字来实现继承，子类也可以定义自己的构造函数或者配置参数。
在了解了ES6中面向对象的基础知识之后，为了方便写代码，我们引入jquery，下面我们可以来写一个ES6的面向对象的选项卡组件。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tabContent{
width:300px;
height:300px;
border:1px solid #ccc;
display: none;
}
.active{
background: #f60;
}
.active111{
background: #06f;
}
</style>
</head>
<body>
<div >
<div>
<button class="tabIndex">1</button>
<button class="tabIndex">2</button>
<button class="tabIndex">3</button>
</div>
<div>
<div class="tabContent" >111111</div>
<div class="tabContent">222222</div>
<div class="tabContent">333333</div>
</div>
</div>
<script src="./jquery-3.2.1.min.js"></script>
<script>
class Tab{
constructor(){
this.settings = {
allTabs:'',
index:0,
classname:'active',
time:0,
tabAction:function(){}
};
this.tabIndex = '';
this.tabContent = '';
this.timer = null;
}
static create(){
console.log('tab选项卡初始化成功');
}
init(option){
$.extend(this.settings,option);
if(this.settings.allTabs != ''){
this.tabIndex = this.settings.allTabs.find('.tabIndex');
this.tabContent = this.settings.allTabs.find('.tabContent');
this.tabToDo(this);
this.tabHandle();
if(this.settings.time != 0){
this.tabAutoShow().tabPauseContent();
}
}else{
console.error('检测到未指定父级元素');
}
return this;
}
tabToDo(_this){
_this.tabIndex.eq(_this.settings.index).addClass(_this.settings.classname).siblings().removeClass(_this.settings.classname);
_this.tabContent.eq(_this.settings.index).show().siblings().hide();
}
tabHandle(){
var _this = this;
this.tabIndex.on('click',function(){
_this.settings.index = $(this).index();
_this.settings.tabAction(_this.settings.index);
$(_this).trigger('getIndexAction',_this.settings.index);
_this.tabToDo(_this);
})
}
tabGetContent(){
return this.tabContent.eq(this.settings.index).html();
}
tabPauseContent(){
var _this = this;
this.tabIndex.on('mouseover',function(){
clearInterval(_this.timer);
}).on('mouseout',function(){
_this.tabAutoShow();
});
this.tabContent.on('mouseover',function(){
clearInterval(_this.timer);
}).on('mouseout',function(){
_this.tabAutoShow();
});
}
tabAutoShow(){
this.timer = setInterval(() => {
this.settings.index ++;
if(this.settings.index == this.tabIndex.length){
this.settings.index = 0;
}
this.tabToDo(this);
}, this.settings.time);
return this;
}
}
var allTabs = $('#allTabs');
var index = 0;
var t1 = new Tab();
Tab.create();
var option = {
allTabs:allTabs,
index:index,
classname:'active111',
time:1000,
tabAction:function(index){
console.log(t1.tabGetContent());
}
};
t1.init(option);
$(t1).on('getIndexAction',function(event,index){
console.log(index);
});
</script>
</body>
</html>上面就是一个简单版的基于jquery的ES6面向对象选项卡组件，有兴趣的朋友可以自己改写或者新增成不同的组件组件，如果你觉得这个文章对你有帮助，就请点个赞吧^_^