摘要：普通寫法轉(zhuǎn)換過程先變型盡量不要出現(xiàn)函數(shù)嵌套函數(shù)可以有全局變量把中不是賦值的語句放到多帶帶函數(shù)中改成面向?qū)ο笕肿兞烤褪菍傩院瘮?shù)就是方法中創(chuàng)建對象改指向事件或定時器問題現(xiàn)要求再創(chuàng)建一個選項卡，自動輪播，只需新增修改和新增一個方法

html:

    
    
    
    
111
    
222
    
333
 

css:

#div1 div{width: 200px; height: 200px;border:1px #000 solid; display: none;}
.active{background:#f00;}

js:

// 普通寫法

    window.onload = function () {
        var oParent = document.getElementById("div1");
        var aInput = oParent.getElementsByTagName("input");
        var aDiv = oParent.getElementsByTagName("div");
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].index = i;
            aInput[i].onclick = function () {
                for (var i = 0; i < aInput.length; i++) {
                    aInput[i].className = "";
                    aDiv[i].style.display = "none"
                }
                this.className = "active";
                aDiv[this.index].style.display = "block"
            }
        }
    }
    

轉(zhuǎn)換過程
-先變型 盡量不要出現(xiàn)函數(shù)嵌套函數(shù),可以有全局變量,把onload中不是賦值的語句放到多帶帶函數(shù)中

    var oParent = null;
    var aInput = null;
    var aDiv = null;
    window.onload = function () {
        oParent = document.getElementById("div1");
        aInput = oParent.getElementsByTagName("input");
        aDiv = oParent.getElementsByTagName("div");
        init();
    }

    function init() {
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].index = i;
            aInput[i].onclick = change;
        } 
    }

    function change() {
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].className = "";
            aDiv[i].style.display = "none"
        }
        this.className = "active";
        aDiv[this.index].style.display = "block"
    }
    

//改成面向?qū)ο?
全局變量就是屬性 函數(shù)就是方法 onload中創(chuàng)建對象 改this指向(事件或定時器問題)

    window.onload = function () {
       var t1 = new Tab()
       t1.init();
    }
    function Tab() {
        this.oParent = document.getElementById("div1");
        this.aInput = this.oParent.getElementsByTagName("input");
        this.aDiv = this.oParent.getElementsByTagName("div");
    }
    Tab.prototype.init = function () {
        var This = this;
        for (var i = 0; i < this.aInput.length; i++) {
            this.aInput[i].index = i;
            this.aInput[i].onclick = function (){
                This.change(this);
            }
        } 
    }
    Tab.prototype.change = function (obj) {
        for (var i = 0; i < this.aInput.length; i++) {
            this.aInput[i].className = "";
            this.aDiv[i].style.display = "none"
        }
        obj.className = "active";
        this.aDiv[obj.index].style.display = "block"
    }
    

現(xiàn)要求再創(chuàng)建一個選項卡，自動輪播，只需新增div2 修改init和新增一個autoPlay方法

    window.onload = function () {
       var t1 = new Tab("div1")
       t1.init();
       var t2 = new Tab("div2")
       t2.init();
       t2.autoPlay();
    }
    function Tab(id) {
        this.oParent = document.getElementById(id);
        this.aInput = this.oParent.getElementsByTagName("input");
        this.aDiv = this.oParent.getElementsByTagName("div");
        this.iNow = 0;
    }

    Tab.prototype.autoPlay = function () {
        var This = this;
        setInterval(function () {
            if(This.iNow == This.aInput.length-1) {
                This.iNow = 0;
            }else {
                This.iNow++;
            }
            for (var i = 0; i < This.aInput.length; i++) {
                This.aInput[i].className = "";
                This.aDiv[i].style.display = "none"
            }
            This.aInput[This.iNow].className = "active";
            This.aDiv[This.iNow].style.display = "block"
        }, 2000)
    }