原生js封装之路（一）

最新推荐文章于 2022-11-23 15:49:44 发布

爱学习的蚯蚓

最新推荐文章于 2022-11-23 15:49:44 发布

阅读量1.8k

点赞数 1

文章标签： js的插件封装 tab组件原生的js 插件 jq的tab组件

本文链接：https://blog.csdn.net/szl199107101035/article/details/77771076

版权

这几天比较空闲所以研究了一下封装的方法，对于我们这些小白来说，封装往往显得高大上，下面我就来讲解下我的封装之路。

原生js封装最简单的tab插件：

html 部分：写了两个包含框一个id为wrap一个为wraps

<div id="wrap">
	<ul id="diya">
		<li class="on">第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul>
    <br clear="all" />
	<div class="block">第一部分</div>
	<div class="none">第二部分</div>
	<div class="none">第三部分</div>
</div>
<div id="wraps">
	<ul id="diyas">
		<li class="on">第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul>
		<br clear="all" />
		<div class="block">第一部分</div>
		<div class="none">第二部分</div>
		<div class="none">第三部分</div>
</div>

css样式部分：

*{ padding:0; margin:0;}
.block{ display:block;}
.none{ display:none;}
#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
#diya,#diyas{ list-style:none;}
#diya li,#diyas li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
#diyas li:hover{ background:#CCC;}
#diya li.on,#diyas li.on{ background:#9C3;}
#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}

js部分：

首先定义一个插件函数

function tab (id,navul,eve){

}

获取id值下对应的导航元素，和显示元素(此处的id对应的是包含框的id,navul对应的是nav的id，eve对应的事件类型)

function tab(id,navul,eve){

	var divs = document.getElementById(id).getElementsByTagName('div');

	var lis = document.getElementById(navul).getElementsByTagName('li');

事件函数判断（目前只判断点击click和mouseover事件）

// 两个for循环的解释：列如去超市买面包，有多个超市多个面包种类，想要将所有的面包都看一遍
// 第一次循环表示进入到超市中，第二个循环表示查看超市中每个种类的面包
for(var i=0;i<lis.length;i++){
	//确定下标
	lis[i].indx=i;
	// 判断eve的状态并且设置默认的变换方式
	if(eve=="click" || eve==null){
		// 当前li的点击事件函数
		lis[i].οnclick=function(){
		  for(i=0;i<lis.length;i++){
		//      清除所有的nav的li的className
		    lis[i].className="";
		// 将所有的显示内容的div隐藏
		    divs[i].className="none"
		//  当前的li的className赋值为on
		    this.className="on";
		// 当前的div的className赋值为Block
		    divs[this.indx].className="block";
		    }
		  }
	}else if(eve=="mouseover"){
		  lis[i].οnmοuseοver=function(){
		    for(i=0;i<lis.length;i++){
		    lis[i].className="";
		    divs[i].className="none";
		     
		    this.className="on";
		    divs[this.indx].className="block";
		      }
		    }
		  }
	}

完整代码：可以复制代码去测试一下效果

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JS封装的选项卡TAB代码</title>
<style type="text/css">
*{ padding:0; margin:0;}
.block{ display:block;}
.none{ display:none;}
#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
#diya,#diyas{ list-style:none;}
#diya li,#diyas li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
#diyas li:hover{ background:#CCC;}
#diya li.on,#diyas li.on{ background:#9C3;}
#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
</style>
</head>
<body>
<div id="wrap">
	<ul id="diya">
		<li class="on">第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul>
    <br clear="all" />
	<div class="block">第一部分</div>
	<div class="none">第二部分</div>
	<div class="none">第三部分</div>
</div>
<div id="wraps">
	<ul id="diyas">
		<li class="on">第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul>
		<br clear="all" />
		<div class="block">第一部分</div>
		<div class="none">第二部分</div>
		<div class="none">第三部分</div>
</div>
</body>
</html>
<script type="text/javascript">
tab("wrap","diya","mouseover")    //对应的参数为包含框的id以及tab选项卡的id
tab("wraps","diyas")
function tab(id,navul,eve){
//tab效果封装，目前只有两种变换方式，一种为点击事件click（也是默认事件），另外一种为鼠标移过事件mouseover
var divs=document.getElementById(id).getElementsByTagName("div");
var lis=document.getElementById(navul).getElementsByTagName("li");
// 两个for循环的解释：列如去超市买面包，有多个超市多个面包种类，想要将所有的面包都看一遍
// 第一次循环表示进入到超市中，第二个循环表示查看超市中每个种类的面包
for(var i=0;i<lis.length;i++){
	//确定下标
	lis[i].indx=i;
	// 判断eve的状态并且设置默认的变换方式
	if(eve=="click" || eve==null){
		// 当前li的点击事件函数
		lis[i].οnclick=function(){
		  for(i=0;i<lis.length;i++){
		//      清除所有的nav的li的className
		    lis[i].className="";
		// 将所有的显示内容的div隐藏
		    divs[i].className="none"
		//  当前的li的className赋值为on
		    this.className="on";
		// 当前的div的className赋值为Block
		    divs[this.indx].className="block";
		    }
		  }
	}else if(eve=="mouseover"){
		  lis[i].οnmοuseοver=function(){
		    for(i=0;i<lis.length;i++){
		    lis[i].className="";
		    divs[i].className="none";
		     
		    this.className="on";
		    divs[this.indx].className="block";
		      }
		    }
		  }
	}
}
</script>

此处再添加上jq的tab组件的封装方法

html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab组件的封装</title>
	<script src="jquery-1.11.3.min.js"></script>
	<script src="tab.js"></script>
	<style>
	*{margin:0;padding:0;}
	ul{list-style:none;}
		.con{
			position:relative;
			width:600px;
			height:600px;
			background:#f00;
		}
		.title{
			position:absolute;
			top:0;
			left:0;
			background:#f00;
			color:#fff;
		}
		.title ul li{
			float:left;
			width:50px;
			height:50px;
			line-height:50px;
			border:1px solid #f00;
		}
		.detail{
			width:600px;
			height:550px;
			position:absolute;
			top:50px;
			left:0;
			background:#ddd;
		}
		.con1,.con2,.con3{
			position:absolute;
			top:0;
			left:0;
			width:600px;
			height:550px;
			color:#fff;
		}
		.con1{
			background:#f00;
		}
		.con2{
			background:yellow;
		}
		.con3{
			background:blue;
		}
		.active{
			background:#ddd;
			display:block;
		}
		.tab_item{
			display:none;
		}

	</style>
</head>
<body>
	<!--data-config传的配置参数-->
	<div class="con" id="tab" data-config='{  
            "type":"click",  
            "effect":"fade",  
            "show":1,  
            "auto":1000}'>
			<div class="title">
				<ul class="nav">
					<li class="active">tab1</li>
					<li>tab2</li>
					<li>tab3</li>
				</ul>
			</div>
			<div class="detail">
				<div class="con1 tab_item">第一页</div>
				<div class="con2 tab_item">第二页</div>
				<div class="con3 tab_item">第三页</div>
			</div>

		</div>
		<script>
			$('#tab').Tab(tab);
		</script>
</body>
</html>






js部分（可以直接外部引用）

(function($){
	
	function Tab(tab){
		this.tab = tab;
		var me = this; //留住this
		this.config={
			type:'click',
			effect:'default'
		};
		
		console.log(this.config.type);
		//将自己设置的参数和默认的config合并保留最新的
		this.getConfig()&&$.fn.extend(this.config,this.getConfig());
		this.tabNav = this.tab.find('.nav li');
		this.tabItem= this.tab.find('.tab_item');
		if(this.config.type == 'click'){
			this.tabNav.bind(this.config.type,function(e){
				me.currentChange($(this));
			})
		}else{
			this.tabNav.bind('mouseover',function(){
					me.currentChange($(this));
			})
		}
	}

	Tab.prototype={
		// 获得配置参数
		getConfig:function(){
			var config = this.tab.attr('data-config');
			if(config&&config!=null){
				return($.parseJSON(config));
			}else{
				return null;
			}
		},
		currentChange:function(cur){
			var index = cur.index();
			cur.addClass('active').siblings().removeClass('active');
			if(this.config.effect==="default"){  
	                this.tabItem.eq(index).addClass("active").siblings().removeClass("active");//为当前元素添加active，移除兄弟元素的active  
	         }else if(this.config.effect==="fade"){  
	                this.tabItem.eq(index).stop().fadeIn().siblings().stop().fadeOut();  
	         }  
		}
	}
	

// 扩展参数到jQuery方法上,实现链式调用，如$('xx').Tab().css()  
    $.fn.extend({  
        Tab:function(){  
            this.each(function(){  
                new Tab($(this));  
            });  
            return this; //jQuery链式调用  
        }  
    });  
    // 注册全局变量  
    window.Tab=Tab;  

})(jQuery)