深入理解jQuery插件開發(fā)總結(一)

由于這篇文章比較長啄枕,所以分了四個階段講浮创,從簡單的入門級到最后到綜合級油额,有些列子和圖片都是轉載其他博主的,希望對想寫插件對同學會有幫助稀拐。這里分享個好久之前寫的一個jquery插件(網(wǎng)站的功能引導插件汰聋,思路應該有些落伍了桑逝,僅供參考):

在這里插入圖片描述

https://github.com/BothEyes1993/pageWalk

(入門級)

一弧圆、插件的幾種寫法

首先,在具體說明編寫插件之前拢蛋,我們先假定一個使用場景:有一個HTML頁面桦他,頁面上放置了一個5行3列的表格。

<table id="newTable">
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
</table>

要實現(xiàn)的功能是:鼠標移到表格的某一行時谆棱,當前行高亮顯示快压,其他行正常圆仔。

利用JQuery插件實現(xiàn)上述功能蔫劣。常用的JQuery插件有如下幾種寫法:

1.對JQuery自身的擴展插件

這種插件是對JQuery自身的方法庫進行擴展的。在使用的時候通過$.MethodName()的方式直接使用脉幢。

$.extend({
    handleTableUI : function(table){
        var thisTable = $("#" + table);
        $(thisTable).find("tr").bind("mouseover", function () {
            $(this).css({ color: "#ff0011", background: "blue" });
        });
        $(thisTable).find("tr").bind("mouseout", function () {
            $(this).css({ color: "#000000", background: "white" });
        });
    }
});

說明: 當要對JQuery自身進行擴展的時候,需要采用$.extend();的形式進行開發(fā)嫌松,JQuery的extend()方法為我們提供了擴展
JQuery自身的方式,在extend()方法中萎羔,我們采用{...}的形式編寫具體的方法體液走。其中贾陷,最重要的是要定義我們自己的擴展方法缘眶,如示例中的
handleTableUI。定義的方式是:方法名 : function(參數(shù)){ 方法體
}昵宇。通過此種方式我們就可以定義JQuery自己的擴展方法磅崭,而且這個方法可以在web頁面通過智能提示顯示出來儿子。

頁面中調(diào)用的代碼如下:

<script type="text/javascript">
    $(document).ready(function () {
        $.handleTableUI("newTable");
    });
</script>
2瓦哎、 對JQuery對象的插件開發(fā)

形式1:

(function($){  
   $.fn.extend({  
    pluginName:function(opt,callback){  
              // Our plugin implementation code goes here.   
    }  
   }) 
})(jQuery);  

形式2:

(function($) {   
    $.fn.pluginName = function() {  
         // Our plugin implementation code goes here.  
    };  
})(jQuery);  

使用這種插件的擴展上面的實例

(function ($) {
    $.fn.setTableUI = function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        var options = $.extend(defaults, options);
        this.each(function(){
            var thisTable=$(this);
            $(thisTable).find("tr").bind("mouseover", function () {
                $(this).css({ color: "#ff0011", background: "blue" });
            });
            $(thisTable).find("tr").bind("mouseout", function () {
                $(this).css({ color: "#000000", background: "white" });
            });
        });
    };
})(jQuery);

說明:
當要對頁面元素進行JQuery擴展時,需要采用(function($){...})(JQuery);的方式進行開發(fā)柔逼。在“...”處蒋譬,定義我們自己的方法,定義方式是:$.fn.自定義方法名 = function(參數(shù)){...};的形式定義擴展方法的具體內(nèi)容愉适。在頁面調(diào)用的時候不同于對JQuery自身的擴展犯助。

具體調(diào)用代碼如下:

<script type="text/javascript">
    $(document).ready(function () {
        $("#newTable").setTableUI();
    });
</script>

二、編寫jQuery插件時维咸,一定要注意以下列出的地方

1剂买、插件的推薦命名方法為:jquery.[插件名].js
2、所有的對象方法都應當附加到JQuery.fn對象上面癌蓖,而所有的全局函數(shù)都應當附加到JQuery對象本身上瞬哼。
3、在插件內(nèi)部租副,this指向的是當前通過選擇器獲取的JQuery對象坐慰,而不像一般方法那樣,內(nèi)部的this指向的是DOM元素用僧。
4结胀、可以通過this.each 來遍歷所有的元素

5赞咙、所有方法或函數(shù)插件,都應當以分號結尾糟港,否則壓縮的時候可能會出現(xiàn)問題攀操。為了更加保險寫,可以在插件頭部添加一個分號(着逐;)崔赌,以免他們的不規(guī)范代碼給插件帶來 影響。
6耸别、插件應該返回一個JQuery對象健芭,以便保證插件的可鏈式操作。
7秀姐、避免在插件內(nèi)部使用$作為JQuery對象的別名慈迈,而應當使用完整的JQuery來表示。這樣可以避免沖突省有。

8痒留、在JQuery命名空間下聲明只聲明一個單獨的名稱
9、接受options參數(shù)蠢沿,以便控制插件的行為
例如

// plugin definition 
$.fn.hilight = function(options) { 
  var defaults = { 
    foreground: 'red', 
    background: 'yellow' 
  }; 
  // Extend our default options with those provided. 
  var opts = $.extend(defaults, options); 
  // Our plugin implementation code goes here. 
}; 

我們的插件可以這樣被調(diào)用

$('#myDiv').hilight({ 
  foreground: 'blue' 
});

10伸头、暴露插件的默認設置 ,以便外面可以訪問
例如

.fn.hilight = function(options) {

  // Extend our default options with those provided.

  // Note that the first arg to extend is an empty object - 
  // this is to keep from overriding our "defaults" object. 
  var opts = $.extend({}, $.fn.hilight.defaults, options); 
  // Our plugin implementation code goes here. 
}; 
// plugin defaults - added as a property on our plugin function 
$.fn.hilight.defaults = { 
  foreground: 'red', 
  background: 'yellow' 
};  

11舷蟀、適當?shù)貙⒆雍瘮?shù)提供給外部訪問調(diào)用
12、保持私有函數(shù)
13扫步、支持元數(shù)據(jù)插件

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末河胎,一起剝皮案震驚了整個濱河市虎敦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌胚迫,老刑警劉巖擂橘,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異恼五,居然都是意外死亡哭懈,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門睬罗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來容达,“玉大人垂券,你說我怎么就攤上這事」阶Γ” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵熙揍,是天一觀的道長届囚。 經(jīng)常有香客問我削葱,道長淳梦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任首繁,我火速辦了婚禮弦疮,結果婚禮上蜘醋,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好啸罢,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著扰才,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蕾总。 梳的紋絲不亂的頭發(fā)上琅捏,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天柄延,我揣著相機與錄音,去河邊找鬼拦焚。 笑死,一個胖子當著我的面吹牛秕衙,可吹牛的內(nèi)容都是我干的僵刮。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼勇吊,長吁一口氣:“原來是場噩夢啊……” “哼汉规!你這毒婦竟也來了?” 一聲冷哼從身側響起针史,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤啄枕,失蹤者是張志新(化名)和其女友劉穎族沃,沒想到半個月后泌参,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體常空,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡窟绷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年兼蜈,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片为狸。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡辐棒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出泰涂,到底是詐尸還是另有隱情,我是刑警寧澤逼蒙,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布是牢,位于F島的核電站陕截,受9級特大地震影響,放射性物質發(fā)生泄漏农曲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一罚渐、第九天 我趴在偏房一處隱蔽的房頂上張望驯妄。 院中可真熱鬧合砂,春花似錦源织、人聲如沸微猖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽犁珠。三九已至,卻和暖如春余素,著一層夾襖步出監(jiān)牢的瞬間炊昆,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工视乐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留敢茁,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓渣聚,卻偏偏與公主長得像僧叉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子瓶堕,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容