JS——面向对象实例

来源：互联网发布：美国国籍知乎编辑：程序博客网时间：2024/06/09 18:36

面向过程的选项卡

<script type="text/javascript">    window.onload = function(){        var oDiv = document.getElementById("div1");        var oBtn = oDiv.getElementsByTagName("input");        var aDiv = oDiv.getElementsByTagName("div");        for (var i = 0 ;i < oBtn.length; i++){            oBtn[i].index = i;            oBtn[i].onclick = function(){                //清空内容                for(var i = 0; i < oBtn.length; i++){                    oBtn[i].className ='';                    aDiv[i].style.display = "none";                }                //为点击的按钮添加active                this.className = "active";                //为对应div加上display:block                aDiv[this.index].style.display = "block";            }        }    }</script><body>    <div id="div1">        <input type="button" class="active" value="a">        <input type="button" value="b">        <input type="button" value="c">        <div style = "display: block">aaaa</div>        <div>bbbb</div>        <div>cccc</div>    </div></body>

改写成面向对象

原则：

不能有函数嵌套，但可以有全局变量。

过程：

onload  ->  构造函数全局变量 ->  属性函数    ->  方法

实例：

//原来的onload，变成TabSwitch函数,把div的ID作为参数传进去function TabSwitch(id){        var _this = this;        //先获取最外层的div        var oDiv = document.getElementById(id);        //这些全局变量，都变成了TabSwitch对象上的属性        this.oBtn = oDiv.getElementsByTagName("input");        this.aDiv = oDiv.getElementsByTagName("div");        for (var i = 0 ;i < this.oBtn.length; i++){            this.oBtn[i].index = i;            this.oBtn[i].onclick = function(){                //下面定义的方法，是在TabSwitch对象上的，所以我们需要_this，而this指的是按钮                _this.fnClick(this);            };        }    }    //这里的oBtn其实就是上面的按钮    TabSwitch.prototype.fnClick = function (oBtn){        //清空内容        for(var i = 0; i < this.oBtn.length; i++){            this.oBtn[i].className ='';            this.aDiv[i].style.display = "none";        }        //为点击的按钮添加active        oBtn.className = "active";        //为对应div加上display:block        this.aDiv[oBtn.index].style.display = "block";    }

阅读全文

0 0