在做项目开发的时候，相信很多人都会经常遇到某些功能重复的使用，如果自己封装个插件，就不需要重复的去复制相同的代码来避免变量名冲突。
使用插件的优点有：
1、便于代码复用。
2、避免各个相同功能模块的干扰。
3、便于维护，可读性高。
插件的封装有原生的javascript和jquery这两种方式，这篇教程主要讲的是如何利用原生javascript来封装一个可复用的选项卡插件。
任何一个插件应该都是先把功能先写出来了，然后再开始进行封装的。那么，我们先把选项卡的功能先写出来，然后再进行封装。
css
body{
background-color: #655C89;
}
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.wrap{
margin-top: 10px;
width: 500px;
margin: 20px auto 0;
overflow: hidden;
}
.nav{
font-size: 0;
overflow: hidden;
}
.nav li{
display: inline-block;
font-size: 16px;
padding: 17px 30px;
background-color: #4E4A63;
color: #8478B3;
margin-right: 1px;
}
.nav li.active{
color: #776F97;
background-color: #FFFFFF;
}
.box{
width: 100%;
height: 300px;
background-color: #fff;
position: relative;
}
.box li{
text-align: center;
line-height: 300px;
font-size: 30px;
position: absolute;
width: 100%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.box li.show{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
html
<div class="wrap"> <ul class="nav nav1"> <li class="active">Tab1</li> <li>Tab2</li> <li>Tab3</li> </ul> <ul class="box box1"> <li class="show">我是池剑锋盒子1</li> <li>我是池剑锋盒子2</li> <li>我是池剑锋盒子3</li> </ul> </div>
js
var nav1 = document.querySelector('.nav1').children;
var box1 = document.querySelector('.box1').children;
for (var i = 0;i<nav1.length;i++){
nav1[i].index=i;
nav1[i].onclick=function(){
var isThis = this;
for(var k = 0; k < nav1.length; k++) {
nav1[k].className = '';
isThis.className = 'active';
box1[k].className = '';
box1[isThis.index].className = 'show';
}
}
};上面就是选项卡的完整例子了，效果如截图所示：
功能写完了，那么下一步就应该把js拿出来进行封装了。
在封装插件前，还需要了解以下知识点：
1、自执行函数
2、原型
3、构造函数
新建一个js文件，创建一个自执行函数来避免全局污染，然后设置默认参数（当然我们这里不需要），最后把方法添加到原型上去。
js封装成插件之后的代码
(function(win,doc){
var oDefault = {
// tabName:'我是默认参数'
}
function TabFun(option){
var self = this;
self = Object.assign(self,oDefault,option);
self.navName = doc.querySelector(option.navName).children;
self.boxName = doc.querySelector(option.boxName).children;
self.init();
}
TabFun.prototype ={
init:function(){ //暴露接口
var self = this;
for (var i = 0;i<self.navName.length;i++){
self.navName[i].index=i;
self.navName[i].onclick=function(){
var isThis = this;
for(var k = 0; k < self.navName.length; k++) {
self.navName[k].className = '';
isThis.className = self.navActive;
self.boxName[k].className = '';
self.boxName[isThis.index].className =self.boxShow;
}
}
};
}
}
win.TabFun = TabFun;
})(window,document)通过构造函数的方式调用已经添加到原型上的TabFun对象，并且把封装之后需要传的参数传过去即可。
四个参数分别是：按钮节点、按钮change、盒子节点、盒子change。
插件的调用方法
var Tab1 = new TabFun({
navName:'.nav1',
navActive:'active',
boxName:'.box1',
boxShow:'show'
})注：因为这里没必要设置默认值，所以这四个参数是必传的，不然会报错哦。
以上是选项卡的封装实例了，如果写的不好或者有误，欢迎指出。