jquery 插件的实现和优化

1。menus 实现：

$.fn.menu=function(options){
		var $this=$(this);
		var cross='<div class="zhiniu_crossup"><div class="zhiniu_crossup_sub"></div></div>';
		var crossRight='<div class="zhiniu_crossright"><div class="zhiniu_crossright_sub"></div></div>';
		var html='<div class="zhiniu_dropdown_menu"></div>';
		var ul='<ul class="zhiniu_dropdown_menu_ul"></ul>';
		var li='<li class="zhiniu_dropdown_menu_li"></li>';
		var liSpace='<li class="zhiniu_dropdown_menu_li_space"></li>';
		var tubs={
			'setting':'<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>',
			'penceil':'<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>',
			'video':'<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>',
			'article':'<span class="glyphicon glyphicon-list" aria-hidden="true"></span>',
			'logout':'<span class="glyphicon glyphicon-log-out zhiniu_dropmenu_exit" aria-hidden="true"></span>'
		}
		//*********************in case exist********************\\
		if($('.zhiniu_dropdown_menu').length>0){
			$('.zhiniu_dropdown_menu').remove();
		}

		$(document.body).append(html);

		var location=options.location,crossDirect=options.cross;
		var marginleft=location[0]||0,margintop=location[1]||0;
		$('.zhiniu_dropdown_menu').css(
			{'position':'absolute','left':($this.offset().left+marginleft)+'px','top':($this.offset().top+margintop)+'px'}
		);
		//***********************init DOM *****************************\\
		switch(crossDirect){
			case 'right':$('.zhiniu_dropdown_menu').append(crossRight);break;
			default:$('.zhiniu_dropdown_menu').append(cross);
		}

		$('.zhiniu_dropdown_menu').append(ul);
		var menus=options.menus || {};

		if(menus instanceof Array){
			for(var i=0;i<menus.length;i++){
				if(i!=0){
					$('.zhiniu_dropdown_menu_ul').append(liSpace);
				}
				var liObj=$(li).html('<a href="javascript:void(0);">'+(tubs[menus[i].type]?tubs[menus[i].type]:'')+menus[i].content+'</a>').get(0);
				if(menus[i].handler && menus[i].handler.length>0){
					$(liObj).bind('click',menus[i].handler[0].click);
				}
				$('.zhiniu_dropdown_menu_ul').append(liObj);
			}
		}
		$('.zhiniu_dropdown_menu').bind('mouseleave',function(){$(this).remove();});
		$('.zhiniu_dropmenu_exit').parent('a').addClass('zhiniu_dropmenu_exit');
		$('.zhiniu_dropmenu_exit').click(function(){
			$('.zhiniu_dropdown_menu').remove();
		});
	};

2.面向对象的优化

function Menu(ele,opts){
		var defaults={
			w:'100px',
			h:'100px',
			location:[-100,-20],
			cross:'right'
		};
		this.$elemt=ele;
		this.opts=$.extend({},defaults,opts);
		this.html={
			cross:'<div class="zhiniu_crossup"><div class="zhiniu_crossup_sub"></div></div>',
			crossRight:'<div class="zhiniu_crossright"><div class="zhiniu_crossright_sub"></div></div>',
			html:'<div class="zhiniu_dropdown_menu"></div>',
			ul:'<ul class="zhiniu_dropdown_menu_ul"></ul>',
			li:'<li class="zhiniu_dropdown_menu_li"></li>',
			liSpace:'<li class="zhiniu_dropdown_menu_li_space"></li>'
		};
		this.tubs={
			'setting':'<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>',
			'penceil':'<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>',
			'video':'<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>',
			'article':'<span class="glyphicon glyphicon-list" aria-hidden="true"></span>',
			'logout':'<span class="glyphicon glyphicon-log-out zhiniu_dropmenu_exit" aria-hidden="true"></span>'
		}
	}

	Menu.prototype={
		init:function(){
			//*****in case of exists*****\\
			var that = this;
			return that.$elemt.each(function(){
				if($('.zhiniu_dropdown_menu').length>0){
					$('.zhiniu_dropdown_menu').remove();
				}

				$(document.body).append(that.html.html);

				var marginleft=that.opts.location[0],
					margintop=that.opts.location[1];

				$('.zhiniu_dropdown_menu').css(
					{'position':'absolute','left':(that.$elemt.offset().left+marginleft)+'px','top':(that.$elemt.offset().top+margintop)+'px'}
				);

				//***********************init DOM *****************************\\
				switch(that.opts.cross){
					case 'right':$('.zhiniu_dropdown_menu').append(that.html.crossRight);break;
					default:$('.zhiniu_dropdown_menu').append(that.html.cross);break;
				}

				$('.zhiniu_dropdown_menu').append(that.html.ul);

				var menus=that.opts.menus || {};

				if(menus instanceof Array){
					for(var i=0;i<menus.length;i++){
						if(i!=0){
							$('.zhiniu_dropdown_menu_ul').append(that.html.liSpace);
						}
						var liObj=$(that.html.li).html('<a href="javascript:void(0);">'+(that.tubs[menus[i].type]?that.tubs[menus[i].type]:'')+menus[i].content+'</a>').get(0);
						if(menus[i].handler && menus[i].handler.length>0){
							$(liObj).bind('click',menus[i].handler[0].click);
						}
						$('.zhiniu_dropdown_menu_ul').append(liObj);
					}
				}
				$('.zhiniu_dropdown_menu').bind('mouseleave',function(){$(this).remove();});
				$('.zhiniu_dropmenu_exit').parent('a').addClass('zhiniu_dropmenu_exit');
				$('.zhiniu_dropmenu_exit').click(function(){
					$('.zhiniu_dropdown_menu').remove();
				});

			});
		}
	}

	$.fn.menu=function(){
		var that=this;
		var opts=arguments[0];
		var menu = new Menu(that,opts);
		return menu.init();
	}

　　2.tooltips 实现：

var $this=this;
		//position data\\
		var pos_left=$this.offset().left+$this.parent().width()+'px',
			pos_top =$this.offset().top+$this.height()/5+'px';

		//predelete tip\\
		var _id='zhiniu_tooltipccc'+$this.attr('id');
		$('#'+_id).remove();

		var args=arguments;			//1:content,2:time
		if(arguments.length>0){
			var content=args[0],time=args[1];

			//********initDom********\\
			$(document.body).append('<div class="zhiniu_tooltip" id="'+_id+'"></div>');
			$('#'+_id).html(content+'<div class="zhiniu_tooltip_space"></div>').css({
				left:pos_left,
				top:pos_top
			})

			if(time && time!=0){
				//*******handle time,time up remove********\\
				$('#'+_id).animate({display:'none'},time*1000,function(){
					$('#'+_id).remove();
				})
			}

		}

　　

2.面向对象的优化

function Tooltips(eme,opt){
		this.$elemt=eme;
		var defaults={
			color:'#ff0000',
			time:2
		};
		this.opts=$.extend({},defaults,opt);
	}

	Tooltips.prototype={
		init:function(){
			var that = this,
				$this = that.$elemt;
			return that.$elemt.each(function(){

				var	pos_left=$this.offset().left+$this.parent().width()+'px',
					pos_top =$this.offset().top+$this.height()/5+'px';

				//*****in case of exists*****\\
				var _id='zhiniu_tooltipccc'+($this.attr('id')||$this.attr('className')||$this.attr(tagName));
				$('#'+_id).remove();

				var content=that.opts[0],time=that.opts[1] || that.opts.time ;

				//********initDom********\\
				$(document.body).append('<div class="zhiniu_tooltip" id="'+_id+'"></div>');
				$('#'+_id).html(content+'<div class="zhiniu_tooltip_space"></div>').css({
					left:pos_left,
					top:pos_top
				})

				if(time && time!=0){
					//*******handle time,time up remove********\\
					$('#'+_id).animate({display:'none'},time*1000,function(){
						$('#'+_id).remove();
					})
				}

			});

		}
	};
	$.fn.tooltips=function(){
		var that = this,
			opts = arguments;

		var tooltips=new Tooltips(that,opts);
		return tooltips.init();

　　

　　3.alert实现

var msg=arguments[0];
		var wh=arguments[1] || [200,100];
		var w=wh[0],h=wh[1];
		var alertBGDIV='<div class="zhiniu_alert_bg"></div>';
		var alertMSGDIV='<div class="zhiniu_alert_msg"><div class="alert alert-danger" role="alert" style="margin:0;text-align:center"></div><div class="zhiniu_alert_yes">确定</div></div>';
		var body=$(document.body);
		var screenWidth=body.width(),screenHeight=body.height();
		var left=(screenWidth-w)/2,top=(screenHeight-h)/2;

		//*********remove bgdiv*************\\
		$('.zhiniu_alert_bg').remove();
		$('.zhiniu_alert_msg').remove();

		body.append(alertBGDIV);
		body.append(alertMSGDIV);
		$('.zhiniu_alert_msg').css({
			width:w+'px',
			height:h+'px',
			left:left+'px',
			top:top+'px'
		})
		$('.alert-danger').html(msg);
		$('.zhiniu_alert_bg').bind('click',function(){
			$('.zhiniu_alert_msg').remove();
			$('.zhiniu_alert_bg').remove();
		});
		$('.zhiniu_alert_yes').bind('click',function(){
			$('.zhiniu_alert_msg').remove();
			$('.zhiniu_alert_bg').remove();
		});

　　3.优化

function Alert(ele,opt){
		this.$elemt = ele;
		this.w=(opt[1]|| [200,100])[0];
		this.h=(opt[1]|| [200,100])[1];
		this.msg = opt[0] || '请稍侯...';
	//	this.opts=$({},{msg:'请稍等...',wh:[200,100]},);
		this.elem={
			alertBGDIV:'<div class="zhiniu_alert_bg"></div>',
			alertMSGDIV:'<div class="zhiniu_alert_msg"><div class="alert alert-danger" role="alert" style="margin:0;text-align:center"></div><div class="zhiniu_alert_yes">确定</div></div>'
		};
		this.init();
	}

	Alert.prototype={
		init:function(){
			var that = this;

			var $body= $(document.body);
			var screenWidth=$body.width(),
				screenHeight=$body.height();
			var w = that.w,h = that.h;
			var left=(screenWidth-w)/2,
				top=(screenHeight-h)/2;

			//*********remove bgdiv*************\\
			$('.zhiniu_alert_bg').remove();
			$('.zhiniu_alert_msg').remove();

			$body.append(that.elem.alertBGDIV);
			$body.append(that.elem.alertMSGDIV);

			$('.zhiniu_alert_msg').css({
				width:w+'px',
				height:h+'px',
				left:left+'px',
				top:top+'px'
			})

			this.initEvents();
		},
		initEvents:function(){
			var that = this;
			$('.zhiniu_alert_bg,.zhiniu_alert_yes').bind('click',function(){
				that.close();
			});
			/*
			$('.zhiniu_alert_yes').bind('click',function(){
				that.close();
			});
			*/
		},
		close:function(){
			$('.zhiniu_alert_msg').remove();
			$('.zhiniu_alert_bg').remove();
		},
		alert:function(){
			var that = this;
			//return that.$elemt.each(function(){
			$('.alert-danger').html(that.msg);
			//});
		}
	}
	$.alert=function(){
		var alt = new Alert(this,arguments);
		return alt.alert();

　　完成。用面向对象的思想去处理插件的时候，要给插件添加功能会更方便。