【JavaScript从入门到精通】第二十六课 JS面向对象实例

此内容来自开课吧石川微信公众号

这节课我们将花一节课的时间来介绍一个JS面向对象的实例:面向对象的选项卡。我们前面已经写过一个选项卡,我们使用一个小方法,将以前面向过程的程序,改写为面向对象的形式。

首先我们来准备一个面向过程的选项卡:

<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
        #div1 input {background:white;}
        #div1 input.active {background:yellow;}
        #div1 div {width:200px; height:200px; background:#CCC; display:none;}
        </style>
        <script>
        window.onload=function ()
        {
            var oDiv=document.getElementById('div1');
            var aBtn=oDiv.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 style="display:block;">aaa</div>
        <div>dfsadf</div>
        <div>erwqerwe</div>
        </div>
    </body>
</html>

效果如下:

【JavaScript从入门到精通】第二十六课 JS面向对象实例

为了将这个程序改写为面向对象的形式,我们先来分析这个程序中几个比较重要的部分:window.onload,变量和函数。

在改写面向对象时,我们需要遵循一个原则:不能有函数嵌套。可以看到,我们的onclick事件现在嵌套在window.onload事件函数内,所以我们需要把整个函数先拿出去。可aBtn和aDiv变量是定义在window.onload内的,应该怎么办呢?

方法很简单,我们将aBtn和aDiv变量拿出来作为全局变量储存即可。

var aBtn=null;var aDiv=null;window.onload=function (){
    var oDiv=document.getElementById('div1');
    aBtn=oDiv.getElementsByTagName('input');
    aDiv=oDiv.getElementsByTagName('div');
    for(var i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=fnClick;
    }};function fnClick(){
    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';}

解决了函数嵌套问题,接下来我们需要分析各部分功能的对应关系。简单来说,我们对程序的对应关系分析如下:

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

如需转载,烦请注明出处:https://www.qdskill.com/javascript/4432.html

发表评论

登录后才能评论