这几天比较空闲所以研究了一下封装的方法，对于我们这些小白来说，封装往往显得高大上，下面我就来讲解下我的封装之路。
原生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)