學習jQuery外掛開發

前端開發免不了使用形形色色的外掛,讀過用過還是不夠深刻,一直想拿出時間專門理一理開發外掛的大體思路,終於落實了

規則就像是文化,各行各業中都有約定俗稱的辦事套路,jQuery外掛開發也是這樣,來看最基本的結構

;(function($){       //分號是為了跟其他開發者合併程式碼時不至於出現語法錯誤,加上是好習慣
$.fn.plugin=function(options){
var defaults={
}
var options=$.extend({},defaults,options);//{}是為了保留defaults物件,可以不寫
this.each(function(){
});
}
})(jQuery)

好了,現在有個小的demo作為學習驅動力,demo要求:寫一個5行5列的table,tr為奇數的行顯示紅色,為偶數的行顯示綠色,滑鼠滑過的行顯示黃色。

好了,表格出來了,開始入正題

;(function($){  
                $.fn.table=function(options){
                    var defaults={
                        evenRowClass:'evenRow',
                        oddRowClass:'oddRow',
                        mouseOverRowClass:'mouseOverRow'
                    }
                    var options=$.extend(defaults,options);
                    this.each(function(){
                        $(this).find("tr:even").addClass(options.evenRowClass);//找到奇數行併為其新增紅色樣式
                        $(this).find("tr:odd").addClass(options.oddRowClass);//找到偶數行併為其新增綠色樣式
                        /*
                         * 滑鼠滑過時新增黃色樣式
                         * 滑鼠離開時移除黃色樣式
                         */
                        $(this).find('tr').mouseover(function(){
                            $(this).addClass(options.mouseOverRowClass);
                        }).mouseout(function(){
                            $(this).removeClass(options.mouseOverRowClass);
                        });
                          
                    });
                }
                
            })(jQuery)

效果

到此外掛是不是開發完成了呢,有沒有改進的地方,假如我麼把滑鼠滑過效果改為滑鼠點選又該如何呢

為了方便程式碼修改,增強程式碼靈活性,我這樣寫

;(function($){  
                $.fn.table=function(options){
                    var defaults={
                        evenRowClass:'evenRow',
                        oddRowClass:'oddRow',
                        mouseOverRowClass:'mouseOverRow',
                        eventIn:'mouseover',
                        eventOut:'mouseout'
                    }
                    var options=$.extend(defaults,options);
                    this.each(function(){
                        var _this=$(this);//避免重複獲取DOM
                        _this.find("tr:even").addClass(options.evenRowClass);//找到奇數行併為其新增紅色樣式
                        _this.find("tr:odd").addClass(options.oddRowClass);//找到偶數行併為其新增綠色樣式
                        /*
                         * 滑鼠滑過時新增黃色樣式
                         * 滑鼠離開時移除黃色樣式
                         */
                        _this.find("tr").bind(options.eventIn,function(){
                            $(this).addClass(options.mouseOverRowClass);
                        });
                        _this.find("tr").bind(options.eventOut,function(){
                            $(this).removeClass(options.mouseOverRowClass);
                        });
                          
                    });
                }
                
            })(jQuery)

這樣再修改事件型別時就方便多了,只需要改變defaults中的eventIn和eventOut

html程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-table-1.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
tr{
cursor: pointer;
}
td{
width: 40px;
text-align: center;
}
.evenRow{
color: red;
}
.oddRow{
color: green;
}
.mouseOverRow{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>身高</td>
<td>體重</td>
</tr>
<tr>
<td>小紅</td>
<td>13</td>
<td>女</td>
<td>155</td>
<td>48kg</td>
</tr>
<tr>
<td>小明</td>
<td>16</td>
<td>男</td>
<td>175</td>
<td>56kg</td>
</tr>
<tr>
<td>小白</td>
<td>14</td>
<td>男</td>
<td>173</td>
<td>52kg</td>
</tr>
<tr>
<td>小雨</td>
<td>16</td>
<td>女</td>
<td>163</td>
<td>50kg</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('table').table();
})
</script>
</body>
</html>

我們再來看一個demo

簡單的選項卡效果如何寫成外掛的形式呢,很簡單,套路是一樣的,看程式碼

;(function($){
$.fn.tab=function(options){
var defaults={
current:'current' 
}
var options=$.extend(defaults, options);
this.each(function(){
var _this=$(this);
_this.find('li').click(function(){
$(this).addClass(options.current).siblings().removeClass(options.current);
var _index=$(this).index();
_this.find('#content').children().eq(_index).show().siblings().hide();
})
})
}
})(jQuery)

好了,程式碼有問題嗎,是不是最優化,邏輯功能部分是不是有些變數還有可能改變或者說有沒有為程式碼提供改變的便利。

;(function($){
$.fn.tab=function(options){
var defaults={
current:'current',
tabNav:'li',
tabContent:'#content'
}
var options=$.extend(defaults, options);
this.each(function(){
var _this=$(this);
_this.find(options.tabNav).click(function(){
$(this).addClass(options.current).siblings().removeClass(options.current);
var _index=$(this).index();
_this.find(options.tabContent).children().eq(_index).show().siblings().hide();
})
})
}
})(jQuery)

看出程式碼調整的部分了嗎,就是把可變的量放到defaults中單獨定義,不要在邏輯程式碼中寫死,不同的開發者有不同的命名習慣,外掛的使用自然也要有靈活性。

好了,給出html程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-tab-1.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#tab{
margin: 12px;
}
ul li{
width: 100px;
float: left;
display: inline-block;
text-align: center;
border: 1px solid gray;
border-right: none;
list-style: none;
cursor: pointer;
}
li:last-child{
border-right: 1px solid gray;
}
#content{
clear: both;
width: 302px;
height: 100px;
border: 1px solid darkgray;
border-top: none;
}
#content div{
display: none;
}
.current{
background: green;
color: whitesmoke;
font-weight: 700;
border-bottom: none;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li>商品</li>
<li>評論</li>
<li>商家</li>
</ul>
<div id="content">
<div>這裡是商品</div>
<div>這裡是評論</div>
<div>這裡是商家</div>
</div>
</div>
<script type="text/javascript">
$('#tab').tab();
</script>
</body>
</html>

到此,算是初涉jQuery外掛開發,有個基本的路數把握,思想方向性的東西已經明朗,接下來對於外掛的理解乃至編寫會更加得心應手。