基于jquery的ES6面向对象选项卡

时间 2019-12-09

原文原文链接

ES5中的面向对象相信你们都很是熟悉，包括一系列的配置参数，方法，自定义事件等，如今简单介绍一下es6面向对象的一些知识还有一个基于jquery的ES6面向对象选项卡的写法。html

ES6中提供了基于类class的面向对象语法。但class其实是ES6提供的一颗语法糖，JavaScript是一门基于原型的面向对象语言。jquery

// 父类
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方法，也就是配置参数。es6

Test类除了构造函数方法或者说是配置参数外，还定义了两个 fn实例方法和create类方法。实例方法由实例来调用，类方法只能有类来调用。在ES6中定义类中的方法的时候，前面不须要加上 function关键字，直接把写函数定义就好了。另外，虽然类是对象的形式，可是每一个方法之间不须要加逗号，由于加了会报错，类中的方法所有是定义在原型上。

ES6中 class能够经过 extends关键字来实现继承，子类也能够定义本身的构造函数或者配置参数。

在了解了ES6中面向对象的基础知识以后，为了方便写代码，咱们引入jquery，下面咱们能够来写一个ES6的面向对象的选项卡组件。

<!DOCTYPE html>
<html lang="en">
<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 id="allTabs">
        <div>
            <button class="tabIndex">1</button>
            <button class="tabIndex">2</button>
            <button class="tabIndex">3</button>
        </div>
        <div>
            <div class="tabContent" style="display: block;">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面向对象选项卡组件，有兴趣的朋友能够本身改写或者新增成不一样的组件组件，若是你以为这个文章对你有帮助，就请点个赞吧^_^ide