基於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>