## 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应用此插件，以便写更少代码，完成更多功能
**_亲，你明白插件的好处了么？如果没明白继续往下看_**
