JavaScript——面向对象实例

面向对象的选项卡

把面向过程的程序,改写成面向对象的形式
原则
不能有函数套函数,但可以有全局变量
过程
onload —— 构造函数
全局变量 —— 属性
函数 —— 方法
改错
this、事件、闭包、传参
对象与闭包
通过闭包传递this
原函数程序:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<style type="text/css">
    #div1 input {
        background: white;
    }
    #div1 input.active {
        background: yellow;
    }
    #div1 div {
        width: 200px;
        height: 200px;
        background: #ccc;
        display: none;
    }
style>
<script type="text/javascript">
    window.onload = function (){
        var oDiv = document.getElementById('div1');
        var aBtn = document.getElementsByTagName('input');
        var aDiv = oDiv.getElementsByTagName('div');

        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;
            aBtn[i].onclick = function (){
                for (var i = 0; i < aBtn.length; i++) {
                    aBtn[i].className = '';
                    aDiv[i].style.display = 'none'
                };
                this.className = 'active';
                aDiv[this.index].style.display = 'block';
            }
        };
    }
script>
head>
<body>
    <div id="div1">
        <input class="active" type="button" value="aaa" />
        <input type="button" value="bbb" />
        <input type="button" value="ccc" />
        <div>aaadiv>
        <div>dscsdvcsdiv>
        <div>vfdvdadiv>
    div>
body>
html>

面向对象方法:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<style type="text/css">
    #div1 input {
        background: white;
    }
    #div1 input.active {
        background: yellow;
    }
    #div1 div {
        width: 200px;
        height: 200px;
        background: #ccc;
        display: none;
    }
style>
<script type="text/javascript">
    window.onload = function (){
        new TabSwitch('div1');
    }

    function TabSwitch(id){
        var _this = this;
        var oDiv = document.getElementById(id);
        this.aBtn = oDiv.getElementsByTagName('input');
        this.aDiv = oDiv.getElementsByTagName('div');

        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function (){
                _this.fnClick(this);
            }
        }
    }

    TabSwitch.prototype.fnClick = function (oBtn){
        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].className = '';
            this.aDiv[i].style.display = 'none'
        };
        oBtn.className = 'active';
        this.aDiv[this.index].style.display = 'block';
    }
script>
head>
<body>
    <div id="div1">
        <input class="active" type="button" value="aaa" />
        <input type="button" value="bbb" />
        <input type="button" value="ccc" />
        <div>aaadiv>
        <div>dscsdvcsdiv>
        <div>vfdvdadiv>
    div>
body>
html>

你可能感兴趣的:(JavaScript基础)