面向对象

对于面向对象的理解，在我看来，感觉更像是相同的一个过程，将参与到这个过程的对象分开来，并从这些被拆分开的不同的对象的角度去执行这件事。这样的拆分可以让原本的一件事可以由不同的对象进行操作，各司其职，有汇总储层一个整体，完成一个事情。

 

下面就用一个相对简单的选项卡案例来对比一下原始的写法与面向对象的写法之间的不同：

var ulis = document.querySelectorAll(".box ul li");

// console.log(ulis);

var olis = document.querySelectorAll(".box ol li");

这里用let定义变量，是为了防止后面出现下标用不了的现象

for(let i=0;i<ulis.length;i++){

    ulis[i].onclick= function (){

        for(let j=0;j<ulis.length;j++){

            // 将ul和ol列表中的元素添加class属性，并赋值为空

            ulis[j].className = ""

            olis[j].className = ""

        }

        // this代表点击的ul下的每个li的，即事件源，给事件源的class属性赋值一个class名，该属性值即让点击事件带有点击效果

        this.className = "current"

        // console.log(this);

        olis[i].className = "current"

        // olis[this.i].className = "current"

    };

}

 

面向对象的写法

/*

1、定义一个空的构造函数

2、new这个新定义的空的构造函数，

3、准备这一个对象就将效果做好

4、给对象添加属性 - 通常就是需要操作的那些元素

5、给需要操作的元素绑定事件

*/

function Tab(){

    // 4.给对象添加属性 - 通常就是需要操作的那些元素，

通过this对象的属性获取到所有的li

    this.ulis = document.querySelectorAll("ul li");

    this.olis = document.querySelectorAll("ol li");

相当于定义了一个第三方变量，循环中使用时方便进行重新赋值，获取的是带有属性的元素

    var that = document.querySelector("ul li.active");

    var that1 = document.querySelector("ol li.active");

    var _this = this; // 将这个对象赋值给_this变量 - 方便在事件函数中使用

    // 5.给需要操作的元素绑定事件

    for(let i=0;i<this.ulis.length;i++){

　　这里的this指的是一个对象

        this.ulis[i].onclick = function(){

            that.className = '';

　　　 this代表当前的事件源

            this.className = 'active'; 

            that = this;

            // console.log(i);

            that1.className = '';

            _this.olis[i].className = 'active'; // _this就代表外面的this

            that1 = _this.olis[i];

            // console.log(that);

        }

    }

}

// 2.new构造好的函数

var tab = new Tab()

// 3.准备这一个对象就将效果做好

console.log(tab);