【学习笔记61】选项卡（面向对象）

一、案例分析

• 选项卡的面向对象是对选项卡面向过程的优化，当我们需要时直接调用即可

二、HTML和CSS代码

    <div id="box1">
        <ul class="header">
            <li class="active">header_1</li>
            <li>header_2</li>
            <li>header_3</li>
        </ul>
        <ol class="content">
            <li class="active">content_1</li>
            <li>content_2</li>
            <li>content_3</li>
        </ol>
    </div>
    <div id="box2">
        <ul class="header">
            <li class="active">header_1</li>
            <li>header_2</li>
            <li>header_3</li>
            <li>header_4</li>
        </ul>
        <ol class="content">
            <li class="active">content_1</li>
            <li>content_2</li>
            <li>content_3</li>
            <li>content_4</li>
        </ol>
    </div>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .header {
            width: 600px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: pink;
            display: flex;
        }

        .header li {
            width: 200px;
        }

        .content {
            width: 600px;
            height: 400px;
            line-height: 400px;
            text-align: center;
        }

        .header .active {
            background-color: aquamarine;
        }

        .content li {
            display: none;
            font-size: 50px;
        }

        .content .active {
            display: block;
            background-color: orange;
        }
    </style>

三、JS代码

        function Tabs(ele) {
            this.ele = document.querySelector(ele)
            this.hLi = [...this.ele.querySelectorAll('.header li')]
            this.cLi = [...this.ele.querySelectorAll('.content li')]

            /**
             *  因为将这函数内部的this会被指向返回出去的对象, 也可以理解指向t1或者t2
             * 
             *  因为调用init方法, 需要实例化之后在调用一下, 每次都调用, 虽然没问题, 但是比较麻烦
             * 
             *      我们可以利用this在这个位置统一调用
            */
            // console.log(this.init)
            this.init()
        }

        Tabs.prototype.init = function () {
            /**
             *  因为将来init函数是实例化对象调用的 ,所以该函数内部this指向该实例化对象
             * 
             *  又因为构造函数通过new实例化后 ,内部的this指向实例化对象
             * 
             *  所以, 我们可以在该函数内部 ,通过this访问到实例化对象身上的属性
            */
            let that = this
            this.hLi.forEach(function (item, index) {

                item.onclick = function () {
                    // 先把所有li取消类名
                    that.hLi.forEach(function (li, liIndex) {
                        li.classList.remove('active')
                        that.cLi[liIndex].classList.remove('active')
                    })
                    // 给自己添加类名
                    item.classList.add('active')
                    that.cLi[index].classList.add('active')
                }
            })
        }
        const t1 = new Tabs('#box1')   // 第一个选项卡;
        const t2 = new Tabs('#box2')   // 第二个选项卡;

        // console.log(t1)
        // console.log(t2)
        // t1.init()
        // t2.init()

四、封装

1、ES5 构造函数

function Tabs(ele) {
    this.ele = document.querySelector(ele);
    this.hLi = [...this.ele.querySelectorAll(".header li")];
    this.cLi = [...this.ele.querySelectorAll(".content li")];

    this.init();
}
Tabs.prototype.init = function () {
    let that = this;
    this.hLi.forEach(function (item, index) {
        item.onclick = function () {
            that.hLi.forEach(function (li, liIndex) {
                li.classList.remove("active");
                that.cLi[liIndex].classList.remove("active");
            });
            item.classList.add("active");
            that.cLi[index].classList.add("active");
        };
    });
};

2、ES6 CLASS

class Tabs {
    constructor(ele) {
        this.ele = document.querySelector(ele);
        this.hLi = [...this.ele.querySelectorAll(".header li")];
        this.cLi = [...this.ele.querySelectorAll(".content li")];

        this.init();
    }
    init() {
        let that = this;
        this.hLi.forEach(function (item, index) {
            item.onclick = function () {
                that.hLi.forEach(function (li, liIndex) {
                    li.classList.remove("active");
                    that.cLi[liIndex].classList.remove("active");
                });
                item.classList.add("active");
                that.cLi[index].classList.add("active");
            };
        });
    }
}

3、调用

• 前提是有HTML和CSS结构

    <script src="./Tabs.js"></script>
    <script>
        const t1 = new Tabs('#box1')   // 第一个选项卡
        const t2 = new Tabs('#box2')   // 第二个选项卡
    </script>