JavaScript知识梳理 -从面向过程到面向对象（四）

面向对象案例

1.选项卡切换案例

1.1.css样式

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 400px;
        height: 300px;
        margin: 200px 0 0 800px;
        border: 1px solid #000;
    }
    .tits{
        width: 400px;
        height: 40px;

    }
    .tits li{
        width: 98px;
        height: 38px;
        float: left;
        border: 1px solid #000000;
        font-size: 20px;
        line-height: 38px;
        text-align: center;
        list-style: none;
    }
    .content{
        width: 400px;
        height: 260px;
        position: relative;

    }
    .content li{
        width: 400px;
        height: 260px;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 40px;
        line-height: 260px;
        text-align: center;
        list-style: none;
    }
    .box .tits .titsShow{
        background: pink;
    }
    .box .content .contentShow{
        display: block;
    }
</style>

1.1.html结构

<div class="box">
    <ul class="tits ">
        <li class="titsShow">音乐</li>
        <li>新闻</li>
        <li>娱乐</li>
        <li>电影</li>
    </ul>
    <ul class="content">
        <li class="contentShow">音乐</li>
        <li>新闻</li>
        <li>娱乐</li>
        <li>电影</li>
    </ul>
</div>

1.3.javaScript代码

//1.面向过程的方法去写
<script>
    //获取元素
    var tits = document.querySelectorAll('.tits li');
    var cons = document.querySelectorAll('.content li');
    var prevIndex = 0;
    //给元素添加绑定事件
    for(var i = 0;i < tits.length;i++){
        tits[i].index=i;
        tits[i].onclick=function(){
            console.log('我被点击了')
            //给上一个元素清除leiming
            tits[prevIndex].className="";
            cons[prevIndex].className="";
            //给元素添加类名
            tits[this.index].className="titsShow";
            cons[this.index].className="contentShow";
            //更新全局的prevIndex
            prevIndex = this.index;
        }
    }
</script>

//2.面向对象的方法去写
把变量变成对象的属性，此时tish指向对象，对象上的原型上方法只有对象的实例才能调用，也就是说，原型方法上的this指向调用者。
(function(){
    //写一个切换函数
    function Tab (tits,cons){
        this.tits = tits;
        this.cons = cons;
        this.prevIndex = 0;
    }
    //写一个切换类名的函数
    Tab.prototype.setClass=function(dom,oClass){
        dom.className=oClass;
    }
    //事件处理机制
    Tab.prototype.bindEvent=function(){
        var _this=this;
        for(var i = 0;i<this.tits.length; i++){
            this.tits[i].index=i;
            this.tits[i].onclick =function(){
                _this.clickHandler(this.index) 
            }
        }
    }
    //点击事件
    Tab.prototype.clickHandler=function(index){
        //上次选中的元素的类名清空
        this.setClass(this.tits[this.prevIndex],'')
        this.setClass(this.cons[this.prevIndex],'')
        //给本次选中的元素添加类名
        this.setClass(this.tits[index],"titsShow");
        this.setClass(this.cons[index],"contentShow");
        //更新元素下标
        this.prevIndex=index;
    }
    //创建一个初始话函数，返回示例对象，方便链式调用
    Tab.prototype.init=function(){
        this.bindEvent()
        return  this
    }
    //创建一个工厂函数(创建实例化对象，不需要用户再new了)
    function factory (d,c){
        return new Tab(d,c).init()
    }
    window.$=factory;//对外暴露一个接口

})()
var tits = document.querySelectorAll('.tits li');
var cons = document.querySelectorAll('.content li');
$(tits,cons)

！！！ 以上是DaXiong本人对前端知识的理解总结，如内容知识有错误可以留言修改。

！！！如果以上内容帮助到了你，点击一下赞或者收藏吧！