面向对象tab栏例子分析

时间：2022-07-05 17:04:19
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		ul{

			margin:0;

			padding:0;

		}

		li{

			list-style:none;

			width:218px;

			height:200px;

			box-shadow:0 0 0 1px #ccc;

			display:none;

		}

		a{

			display:inline-block;

			padding:10px 20px;

			border:1px solid #ccc;

			text-decoration:none;

			margin-left:-1px;

		}

		.action{

			display:block;

		}

	</style>

</head>

<body>

<!--

	1.程序具有良好的结构。本文档所关注的核心。

	2.容易理解，代码公用性强

-->

	<div id="box">

		<div class="class1">

			<a href="javascript:;">游戏

			<a href="javascript:;">平台

			<a href="javascript:;">服务</a>

		</div>

		<div class="class2">

			<ul>

				<li class="action">游戏平台</li>

				<li>平台平台</li>

				<li>服务平台</li>

			</ul>

		</div>

	</div>

	<div id="box2">

		<div class="class1">

			<a href="javascript:;">游戏

			<a href="javascript:;">平台

			<a href="javascript:;">服务</a>

		</div>

		<div class="class2">

			<ul>

				<li class="action">游戏平台</li>

				<li>平台平台</li>

				<li>服务平台</li>

			</ul>

		</div>

	</div>

	<script defer="defer">

		// 初始化

		function Util(){

		}

		// 获取元素

		Util.prototype.getDom = function(dom){

			return document.querySelectorAll(dom);

		};

		// 点击事件

		Util.prototype.click = function(dom,callback){

			var doms = this.getDom(dom);

			if(!doms.length){

				doms.addEventListener('click',callback(this,0));

			}

			for(var i=0;i<doms.length;i++){

				(function(index){

					doms[i].addEventListener('click',function(){

						callback(this,index);

					})

				}(i))

			}

		};

		// 显示

		Util.prototype.show = function(dom){

			this.isDisplay(true,dom);

		};

		// 隐藏

		Util.prototype.hide = function(dom){

			this.isDisplay(false,dom);

		};

		// 显示隐藏

		Util.prototype.isDisplay = function(is,dom){

			if(is){

				if(!dom.length){

					dom.style.display = 'block';

					return false;

				}

				for(var i=0;i<dom.length;i++){

					dom[i].style.display = 'block';

				}

			}else{

				if(!dom.length){

					dom.style.display = 'none';

					return false;

				}

				for(var i=0;i<dom.length;i++){

					dom[i].style.display = 'none';

				}

			}

		};

		// 当前显示其他隐藏

		Util.prototype.action = function(doms,index){

			this.hide(this.getDom(doms));

			this.show(this.getDom(doms)[index]);

		};

		// tab栏组件

		Util.prototype.tab = function(doms1,doms2){

			var _this = this;

			this.click(doms1,function(item,index){

				_this.action(doms2,index);

			})

		};

		var util = new Util();

		// util.click('#box>.class1>a',function(item,index){

		// 	util.action('#box>.class2 li',index);

		// 	// util.hide(util.getDom('#box>.class2 li'));

		// 	// util.show(util.getDom('#box>.class2 li')[index]);

		// })

		// 点击a标签让对应的li显示

		util.tab('#box>.class1>a','#box>.class2 li');

		util.tab('#box2>.class1>a','#box2>.class2 li');

	</script>

</body>

</html>

　　这段代码并不能说是完全用面向对象思想写的，怎么说呢，我们来看看，它一共分成了以下几个部分：创建一个构造函数，给这构造函数的原型上添加了一些方法，连tab栏也一道封装到了那个构造函数里面，这样从整体上来看的话，这整个功能更像是一个工具函数。因此并不能说它是一个完整的面向对象的例子，于是写完之后发现不对劲，这更本就不像面向对象，重新写了一个，就是底下的这个例子，棒棒的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        ul{

            margin:0;

            padding:0;

        }

        li{

            list-style:none;

            width:218px;

            height:200px;

            box-shadow:0 0 0 1px #ccc;

            display:none;

        }

        a{

            display:inline-block;

            padding:10px 20px;

            border:1px solid #ccc;

            text-decoration:none;

            margin-left:-1px;

        }

        .action{

            display:block;

        }

    </style>

</head>

<body>

<!--

    1.程序具有良好的结构。本文档所关注的核心。

    2.容易理解，代码公用性强

-->

    <div id="box">

        <div class="class1">

            <a href="javascript:;">游戏

            <a href="javascript:;">平台

            <a href="javascript:;">服务</a>

        </div>

        <div class="class2">

            <ul>

                <li class="action">游戏平台</li>

                <li>平台平台</li>

                <li>服务平台</li>

            </ul>

        </div>

    </div>

    <div id="box2">

        <div class="class1">

            <a href="javascript:;">游戏

            <a href="javascript:;">平台

            <a href="javascript:;">服务</a>

        </div>

        <div class="class2">

            <ul>

                <li class="action">游戏平台</li>

                <li>平台平台</li>

                <li>服务平台</li>

            </ul>

        </div>

    </div>

    <script defer="defer">

        // 初始化

        function Util(){

        }

        // 获取元素

        Util.prototype.getDom = function(dom){

            return document.querySelectorAll(dom);

        };

        // 添加事件

        Util.prototype.toggleOn = function(dom,way,callback){

            var doms = this.getDom(dom);

            if(!doms.length){

                doms.addEventListener(way,callback(this,0));

            }

            for(var i=0;i<doms.length;i++){

                (function(index){

                    doms[i].addEventListener(way,function(){

                        callback(this,index);

                    })

                }(i))

            }

        };

        // 显示元素

        Util.prototype.show = function(dom){

            this.isDisplay(true,dom);

        };

        // 隐藏元素

        Util.prototype.hide = function(dom){

            this.isDisplay(false,dom);

        };

        // 显示隐藏元素

        Util.prototype.isDisplay = function(is,dom){

            if(is){

                if(!dom.length){

                    dom.style.display = 'block';

                    return false;

                }

                for(var i=0;i<dom.length;i++){

                    dom[i].style.display = 'block';

                }

            }else{

                if(!dom.length){

                    dom.style.display = 'none';

                    return false;

                }

                for(var i=0;i<dom.length;i++){

                    dom[i].style.display = 'none';

                }

            }

        };

        // 让当前那个元素显示

        Util.prototype.action = function(doms,index){

            this.hide(this.getDom(doms));

            this.show(this.getDom(doms)[index]);

        };

        // tab组件

        function Tab(doms1,doms2){

            var util = new Util();

            this.doms1 = doms1;

            this.doms2 = doms2;

        };

        // tab切换

        Tab.prototype.toggleTab = function(way,callback){

            var util = new Util();

            var _this = this;

            util.toggleOn(this.doms1,way,function(item,index){

                if(callback){callback(util.getDom(_this.doms1),item,index)};

                util.action(_this.doms2,index);

            })

        };

        // 实例1

        var tab = new Tab('#box>.class1>a','#box>.class2 li');

        tab.toggleTab('mouseout');

        // 实例2

        var tab2 = new Tab('#box2>.class1>a','#box2>.class2 li');

        tab2.toggleTab('mouseover',function(items,item,index){

            for(var i=0;i<items.length;i++){

                items[i].style.color = '';

            }

            item.style.color = 'red';

        });

    </script>

</body>

</html>

这段代码和之前那段不同之处在于我把tab重新创建了一个构造函数，因为tab本来就是独立的，这段代码还有一个还有一个好处就是我使用了高阶函数，使用起来特别爽。

就是这一段：

　　

for(var i=0;i<doms.length;i++){

    (function(index){

        doms[i].addEventListener(way,function(){

            callback(this,index);

        })

     }(i))

}

　　

使用如下：

　　

var tab2 = new Tab('#box2>.class1>a','#box2>.class2 li');

        tab2.toggleTab('mouseover',function(items,item,index){

            for(var i=0;i<items.length;i++){

                items[i].style.color = '';

            }

            item.style.color = 'red';

});

　　

高阶函数，大家可以搜索一下，这里不做介绍。

这里主要想说是面向对象就是把一个大的代码块拆分成很多个小的代码块，如果是一个功能就是一个代码块，另外一个功能就是另外一个代码块，然后可以把一些公用的方法弄成一个函数库。

相关文章