插件顾名思义就是能在一个页面多处使用, 各自按自己的参数配置运行, 并且相互不会冲突.
会写javascript插件是进阶js高级的必经之路, 也是自己所学知识的一个典型的综合运用. 如果你还没头绪, 无从下手的话, 不用着急, 今天我们就一起来探讨一下插件的一般写法.
所需技能：
1.面向对象用法
2.闭包的理解
3.变量作用域的理解
以一个tab选项卡的为例:
第一步:我们需要写html结构, 假设结构如下:
html结构:
<ul id="tab_nav">
<li class="current">新闻</li>
<li>生活</li>
<li>体育</li>
<li>抽奖</li>
</ul>
<div id="tabs">
<div class="tab_items">
新闻
</div>
<div class="tab_items off">
生活
</div>
<div class="tab_items off">
体育
</div>
<div class="tab_items off">
抽奖
</div>
</div>
第二步:
写css代码, 这个在这里就省去了, 具体大家自己可以去写下, 简单. 具体看截图.
效果图
第三步:写js代码了.大概就分为这三步, 其中第三步是核心. 当然前两步也是很重要的, 结构的好坏会直接影响你的js实现方式.
主结构:
//构造函数, 以后每一个tab选项卡的实例都是由他来实例化的.
function Tab(){
//some code
}
//对象原型, 这里主要是一些功能方法.
Tab.prototype = {
//some code
}
用法:
new Tab('tab_nav', 'tabs', {可选参数}); //实例一个选项卡, 传入一些参数, 实现一些效果
new Tab('tab_nav2', 'tabs2', {可选参数}); //实例第二个选项卡, 传入一些参数, 实现一些效果
...
以上就是tab选项卡插件的主结构, 下面我们来具体实现.
js代码:
function Tab(){
this.init.apply(this, arguments); //用init函数初始化对象属性
}
Tab.prototype = {
init: function(ela, elb, paramObj){
//默认参数设置, triggerClass:当前选项的class名字, type:鼠标事件, delay:这个主要针对mouseover快速划过去的一个延时处理
this.defaultOptions = {
triggerClass : 'current',
type : 'mouseover',
delay : 150
};
this.options = this.extend(this.defaultOptions, paramObj || {});
this.oa = document.getElementById(ela);
this.ob = document.getElementById(elb);
this.triggerItem = this.oa.children;
this.listItem = this.ob.children;
this.tLen = this.triggerItem.length;
this.arr = [];
this.timer = null;
this.isIE = !-[1,]; //判断IE浏览器
var self = this;
this.options.delay = this.options.type === 'click' ? 0 : this.options.delay; //当type为click时, 就无延时, 反之则延时
//ie下过滤注释节点
if(this.isIE){
for(var i = 0, len = this.listItem.length; i < len; i++){
if(this.listItem[i].nodeType === 1){
this.arr.push(this.listItem[i]);
}
}
}
for(var i = 0; i < this.tLen; i++){
this.triggerItem[i]['on' + this.options.type] = this.change(i); //绑定事件
this.triggerItem[i].onmouseout = function(){clearTimeout(self.timer); self.timer = null;}; //绑定事件
}
},
extend: function(source, target){ //属性合并处理
for(var p in target){
if(target.hasOwnProperty(p)){
source[p] = target[p];
}
}
return source;
},
trim: function(str){
return str.replace(/^\s+/g, "").replace(/\s+$/g, "");
},
addClass: function(el, name){ //定义添加class函数, addClass(元素对象, class名字)
var arr = [],
str = el.className,
arr = str.split(/\s+/),
len = arr.length,
name = this.trim(name);
for(var i = 0; i < len; i++){
if(arr[i] === name){
return;
}
}
arr.splice(len, 1, name);
el.className = this.trim(arr.join(' '));
el = null;
},
removeClass: function(el, name){ //定义移除class函数, removeClass(元素对象, class名字)
var arr = [],
str = el.className,
arr = str.split(/\s+/),
len = arr.length,
name = this.trim(name);
for(var i = 0; i < len; i++){
if(arr[i] === name){
arr.splice(i,1);
el.className=arr.join(' ');
return;
}
}
},
change: function(d){ //选项卡实现
var self = this;
return function(){
self.timer = setTimeout(function(){
for(var i = 0; i < self.tLen; i++){
if(i === d){
self.addClass(self.triggerItem[d], self.options.triggerClass);
self.isIE ? self.arr[d].style.display = 'block' : self.listItem[d].style.display = 'block';
}
else{
self.removeClass(self.triggerItem[i], self.options.triggerClass);
self.isIE ? self.arr[i].style.display = 'none' : self.listItem[i].style.display = 'none';
}
}
}, self.options.delay);
}
}
}
用法
用法:
new Tab('tab_nav', 'tabs', {type:'click'});
new Tab('tab_nav2', 'tabs2', {triggerClass:'trigger'});
new Tab('tab_nav3', 'tabs3', {type:'mouseover', delay:200});
