【原創】jquery插件開發-對象級別

痛點的場景

好比：以tab切換爲例，一個頁面中，不少地方有tab切換，

• 第一種場景：你可能會針對不一樣的dom，重複不少的$("你的dom對象")function（{....}）;  初級應對方式 
• 第二種場景：也許你會寫一個通用的function，用each去遍歷，把dom對象做爲參數傳遞進來，也能夠只用一個function來解決。這是一種進步的解決方案，至少實現了代碼的可複用； 中級應對方式  
• 第三種場景：可是另一種狀況，你就實現不了。好比：我要每一個tab的皮膚不同，須要自定義，或者，tab菜單項的鼠標事件，我要由click改成mouseovre，此刻，你是否是得從新一段代碼？那麼插件就是----> 較理想的應對方式 

 

插件的優勢

• 面向對象是一種思惟方法，代碼維護容易，擴展方便，提升代碼的複用，
• 面向對象插件：提煉共性，配置個性。

插件開發步驟

1. 需求提煉，分解
2. 實現和調用。

插件組成元素

插件開發實例

先來個完成的圖片：

需求提煉：

    【大柴-tab-1.0功能實現】：

1. tab，菜單的鼠標事件：click和mouseover，可配置；
2. tab，菜單個數，須要自適應，平均分佈菜單項；
3. tab，菜單背景，字色和整個tab外邊框色可配置；

 代碼以下：

js文件 tab.1.0.js 

;(function($){
	$.fn.tab = function(options) {
	   /*可配置項-參數/屬性*/
	    var defaults = {
	        mouseType:'click',
	        tab_border:'1px solid #e8e8e8',
	        tab_menu_bg:'#f1f1f1',
	        tab_menu_color:'#8b8b8b'
	    }
	    
	    var options = $.extend(defaults, options);
	    
	    /*執行方法*/
	    return this.each(function() {
	    	var _this = $(this);
        	var get_li=$(this).find(".tab-menu ul li");
        	
        	/*平均寬度*/
        	var li_len=$(this).find("li").length;
        	var tab_width= _this.width();
        	get_li.width(tab_width/li_len);
        	
        	/*UI皮膚*/
        	_this.css("border",options.tab_border)
        	get_li.css({background:options.tab_menu_bg,color:options.tab_menu_color})
        	
        	/*切換*/
		  	get_li.bind(options.mouseType,function(){ 
		      	$(this).addClass("current").siblings().removeClass("current");
		      	var index = get_li.index(this);
		        _this.find(".tab-content div").eq(index).show().siblings().hide(); 
		  	});
    	});
	}
})(jQuery);

頁面 調用 js

/*插件調用*/
$(function(){
	
	/*初始化配置*/
	$("#tab_01").tab({
		mouseType:'mouseover',
		tab_border:'1px solid #a4cae9',
		tab_menu_bg:'#9fd1fc',
		tab_menu_color:'#126bb7'
	});
    /*.....

    爲了代碼簡潔，其餘2個tab初始化省去了

    若有多個tab，可多個初始化，如：

    $("#tab_02").tab({.....});

    .....*/
	
})

html dom 結構：

<!--插件-tab-dom結構-開始-->
<div class="tab" id="tab_01">
	<div class="tab-menu">
		<ul>
			<li class="current">機修</li>
			<li>保養</li>
			<li>美容</li>
			<li>輪胎</li>
		</ul>
	</div>
	<div class="tab-content">
		<div class="current">機修內容</div>
		<div>保養內容保養</div>
		<div>美容內容美容</div>
		<div>輪胎內容輪胎</div>
	</div>
</div>
<!--插件-tab-dom結構-結束-->

....

....後面能夠跟多個tab，只要id不同便可。
    我最上面的完成的動圖是初始化配置了3個tab，
    而且分別定義了不一樣顏色。

css文件 tab.1.0.css

/*插件-tab1.0----BigChai*/
*{ margin: 0; padding: 0;}

/*tab-容器*/
.tab{ margin-bottom: 15px; border: 1px solid #e8e8e8;}	

/*tab-菜單*/
.tab .tab-menu ul{ list-style-type: none; margin-bottom: 0 !important;}
.tab .tab-menu ul li{ float:left;  height: 32px; font-size: 14px; font-family: "microsoft yahei"; line-height: 32px; text-align: center; color:#8b8b8b; background: #f1f1f1; cursor: pointer;}
.tab .tab-menu ul li.current{ color: #3d3d3d; background: #fff !important;}

/*tab-內容*/
.tab .tab-content{ clear: both;}
.tab .tab-content > div{ padding: 15px; display: none; font-size: 12px;}
.tab .tab-content > div.current{ display: block;}

css文件建議用less來編寫，特別是維護大的項目的可拓展性和維護性考慮上。