谈谈javascript插件的写法

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>

主结构: //构造函数, 以后每一个tab选项卡的实例都是由他来实例化的.
function Tab(){
//some code
}
//对象原型, 这里主要是一些功能方法.
Tab.prototype = {
//some code } 用法:
new Tab('tab_nav', 'tabs', {可选参数}); //实例一个选项卡, 传入一些参数, 实现一些效果
new Tab('tab_nav2', 'tabs2', {可选参数}); //实例第二个选项卡, 传入一些参数, 实现一些效果
...

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