JavaScript——面向对象实例

最新推荐文章于 2022-11-10 12:22:00 发布

可芭乐

最新推荐文章于 2022-11-10 12:22:00 发布

阅读量940

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript基础文章标签： javascript 面向对象

本文链接：https://blog.youkuaiyun.com/a839371666/article/details/54971023

JavaScript基础专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何将一个简单的选项卡切换功能从面向过程的编程方式转换为面向对象的方式，并详细解释了转换过程中遵循的原则及步骤。通过实例对比，展示了面向对象编程带来的清晰性和可维护性提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面向对象的选项卡

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<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>aaa</div>
        <div>dscsdvcs</div>
        <div>vfdvda</div>
    </div>
</body>
</html>

面向对象方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<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>aaa</div>
        <div>dscsdvcs</div>
        <div>vfdvda</div>
    </div>
</body>
</html>