## 1.4\. 開始寫第一個插件
代碼位于plugin_first
[plugin_first](examples/jquery_plugin/plugin_first/jQuery.tab.html)
讓我們動手改造一下tab.js吧：
### 1.4.1\. 代碼
```
;(function($) {
$.fn.tab = function(options) {
// 將defaults 和 options 參數合并到{}
var opts = $.extend({},$.fn.tab.defaults,options);
return this.each(function() {
var obj = $(this);
$(obj).find('.tab_header li').on('mouseover', function (){
$(obj).find('.tab_header li').removeClass('active');
$(this).addClass('active');
$(obj).find('.tab_content div').hide();
$(obj).find('.tab_content div').eq($(this).index()).show();
})
});
// each end
}
//定義默認
$.fn.tab.defaults = {
};
})(jQuery);
```
這段代碼除了套用jQuery plugin模板外，就是幾處select變成基于obj的查找的selector，其他與之前無異。
是不是很簡單？
### 1.4.2\. 解釋一下配置項
```
// 將defaults 和 options 參數合并到{}
var opts = $.extend({},$.fn.tab.defaults,options);
```
### 1.4.3\. 緩存this
```
// 將defaults 和 options 參數合并到{}
var obj = $(this);
```
### 1.4.4\. select和$.fn
### 1.4.5\. 調用方式
```
<script>
$(function(){
$('.tab').tab();
});
</script>
```
是不是更簡單？
### 1.4.6\. jQuery plugin template
```
;(function($) {
$.fn.XXXXXX = function(options) {
// 將defaults 和 options 參數合并到{}
var opts = $.extend({},$.fn.XXXXXX.defaults,options);
return this.each(function() {
var obj = $(this);
...
});
// each end
}
//定義默認
$.fn.XXXXXX.defaults = {
};
})(jQuery);
```
### 1.4.7\. 插件特點
1. 有默認項
```
$.fn.XXXXXX.defaults
```
2. 基于selector
```
return this.each(function() {
var obj = $(this);
...
});
```
解讀：
* 有默認項，是約定大約配置，讓用戶用的時候如果沒有個性化需求，可以很簡單，安裝插件的默認配置走，如果有個性化需求，修改配置項，同樣很簡單
* 基于selector意味著你可以復用，給tag或class應用此插件，以便寫更少代碼，完成更多功能
**_親，你明白插件的好處了么？如果沒明白繼續往下看_**
