面向對象tab欄例子分析 - pssp－IT工程師數位筆記本

文章出處

<!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';
});

高階函數，大家可以搜索一下，這里不做介紹。

這里主要想說是面向對象就是把一個大的代碼塊拆分成很多個小的代碼塊，如果是一個功能就是一個代碼塊，另外一個功能就是另外一個代碼塊，然后可以把一些公用的方法弄成一個函數庫。

文章列表