jQuery入門筆記之（七）插件

插件(Plugin)也成爲 jQuery 擴展(Extension)，是一種遵循必定規範的應用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種，由來自世界各地的開發者共同編寫、驗證和完善。而對於jQuery開發者而言，直接使用這些插件將快速穩定架構系統，節約項目成本。

一． 插件概述

插件是以 jQuery 的核心代碼爲基礎，編寫出複合必定規範的應用程序。也就是說，插件也是 jQuery 代碼，經過 js 文件引入的方式植入便可。
插件的種類不少，主要大體能夠分爲：UI 類、表單及驗證類、輸入類、特效類、Ajax類、滑動類、圖形圖像類、導航類、綜合工具類、動畫類等等。
引入插件是須要必定步驟的，基本以下：

1. 必須先引入 jquery.js 文件，並且在全部插件以前引入；

2. 引入插件；

3. 引入插件的周邊，好比皮膚、中文包等。

好比最經常使用到的表單驗證插件：validate，除了最基本的插件文件jquery.validate.min.js以外，還有着messages_zh.js等等各國的語言包能夠供你使用。

如何使用該插件在這裏就不進行描述了，能夠去看看慕課網上的視頻jQuery插件——Validation Plugin，裏面詳細的描述了這個插件的各類配置項，以及擴展。

舉一反三，一個優秀的插件，詳細的說明文檔必不可少，詳細的看說明文檔能，而且在本地進行測試能讓你快速的入門各類插件的使用。

還有各類各樣的別人編寫好的插件能夠供你使用：好比管理cookie的插件--cookie等等。

插件能夠去jQuery官網的插件模塊進行查找The jQuery Plugin Registry

二. 自定義插件

前面咱們使用了別人提供好的插件，使用起來很是的方便。若是市面上找不到本身滿意的插件，而且想本身封裝一個插件提供給別人使用。那麼就須要本身編寫一個 jQuery 插件了。

插件種類

按照功能分類，插件的形式能夠分爲一下三類：

1. 封裝對象方法的插件；（也就是基於某個 DOM 元素的 jQuery 對象，局部性，使用最多）

2. 封裝全局函數的插件；（全局性的封裝）

3. 選擇器插件。(相似與.find()，例如：color(red)來選擇全部的紅色元素之類)

插件的基本要點

主要用以以解決各類由於插件致使的衝突、錯誤等問題，包括以下：

1. 插件名推薦使用 jQuery.[插件名].js，以避免和其餘 js 文件或者其餘庫相沖突（可使用alert($.[插件名])驗證是否存在該全局方法）；

2. 局部對象附加 jQuery.fn 對象上，全局函數附加在 jQuery對象自己上（可使用alert($(selector).[插件名])驗證是否存在該局部方法）；

3. 插件內部，this 指向是當前的局部對象（經過選擇器獲取的jQuery對象）；

4. 能夠經過 this.each 來遍歷全部元素；

5. 全部的方法或插件，必須用分號結尾，避免出現問題（爲了更穩妥，可在插件頭部先加上一個分號）；

6. 插件應該返回的是 jQuery 對象，以保證可鏈式操做；

7. 避免插件內部使用$，若是要使用，使用閉包把傳遞 jQuery 進去，使插件內部繼續使用$做爲jQuery的別名。

;(function($){//這裏將$符做爲匿名函數的形參
/*在此處編寫代碼，可以使用$做爲jQuery的縮寫別名*/
})(jQuery);//這裏將jQuery做爲實參傳遞給匿名函數了

編寫一個插件

假設咱們的插件需求是：實現一個下拉菜單，在移入該元素時，把對應的下拉列表展示出來，移出時收回。而且能夠設置其展開時的文字顏色。

根據慣例，咱們在編寫插件時，能夠對於html結構有所約束。如今假設咱們的頁面上有以下HTML結構：

<ul class="list">
    <li>導航列表1
        <ul class="nav">
            <li>導航列表1</li>
            <li>導航列表2</li>
            <li>導航列表3</li>
            <li>導航列表4</li>
            <li>導航列表5</li>
            <li>導航列表6</li>
        </ul>
    </li>
    <li>導航列表2
        <ul class="nav">
            <li>導航列表1</li>
            <li>導航列表2</li>
            <li>導航列表3</li>
            <li>導航列表4</li>
            <li>導航列表5</li>
            <li>導航列表6</li>
        </ul>
    </li>
</ul>
<!-- 默認已經引入jquery -->

在這裏，咱們就對咱們的插件實現效果有了第一個要求，必須在對於須要hover展示的元素內部下面創建ul列表，且className必須爲nav。（插件內部都是根據該條件來作文章）

下面就能夠開始編寫咱們的插件了。保存爲jQuery.nav.js，（符合上面所說的要求，默認已經導入）

;(function($){
    $.extend({ //插件定義在全局方法上
        "nav" : function (color){//傳參，這裏只是拋磚引玉，在您編寫的時候，參數選項能夠更加豐富，例如傳入json對象等等
            $('.nav').css({//對展開的下拉列表設置樣式，此處在下面進行詳細說明
                "list-style" : "none",
                "margin" : 0,
                "padding" : 0,
                "display" : "none",
                "color":color//由用戶控制hover時，展示出來列表的文字顏色
            });
            $('.nav').parent().hover(//這裏用到了.nav的父節點（就是hover到的元素）
                //由於咱們只能在插件要求的範圍內進行設定，如果使用了外部的選擇器，就違背了這個原則
                function (){
                    $(this).find(".nav").stop().slideDown("normal");//注意咱們在這裏使用了jquery的動畫方法
                },function (){
                    $(this).find(".nav").stop().slideUp("normal");//注意stop()的使用，否則會有相似手風琴效果的出現，但那並非咱們須要的
                });
        }
    });
})(jQuery);

注意：這裏使用css方法只是爲了方便，在真實插件編寫過程當中，若存在如此大量的css樣式編寫時，推薦在外部定義css樣式，例如可改寫爲：
插件依賴的css，需和插件一塊兒導入html中

.hover{/*插件必須樣式*/
    list-style: none;
    margin:0;
    padding: 0;
    display: none;
}

在插件內部修改。

$('.nav').addClass("hover");//將CSS與jQuery分離開來
$('.nav').css("color",color);//存在用戶設置時啓用，不存在就不用了（進行判斷）

剛剛說的都是插件的js文件，最後要起到效果，別忘了頁面的js中加上那麼一句話（當前插件定義在全局方法上）

$(function  (){
    $.nav("#999");//調用插件實現的全局方法，而且設置其展示背景顏色爲#999。
});

就這樣，咱們的全局插件就編寫，並且調用完成了，在你的頁面刷新看看，是否是已經有了效果呢？

可是，由於咱們的方法定義在全局上，如今只要頁面中出現了咱們插件所規定的結構，就會存在hover展示效果，可是有時咱們每每想要的不是這樣，咱們但願它在局部，在我指定的元素調用。因此咱們須要對其進行一些改造，讓其變成局部方法，其實也很簡單：

;(function($){
    $.fn.extend({//定義爲局部方法
        "nav" : function (color){
            $(this).find('.nav').addClass('hover');//上面已經說過了,此時this指向調用該方法的元素
            $(this).find('.nav').css("color",color);//在當前元素下，增長了一次find篩選，實如今對應的元素中執行。
            $(this).find('.nav').parent().hover(
                function (){
                    $(this).find(".nav").stop().slideDown("normal");
                },function (){
                    $(this).find(".nav").stop().slideUp("normal");
                });
            return this;//返回當前的對象
        }
    });
})(jQuery);

咱們去刷新一下瀏覽器。
你會發現，咦，怎麼沒效果？ 固然由於原來的代碼是直接在全局調用的，如今變成局部方法了，顯然就不能這樣作了，須要作一點改變：

我這裏就不貼html代碼了，可是但願您在實踐時能把上面的html代碼在其下複製幾份，以達到思考其實現的效果

$(function  (){//這裏的eq(0)表明只對第一份起到效果，複製後的沒有效果。
    //（你能夠把上面的find篩選刪除以後再試試，您會發現，他又對餘下的幾份起效果了）
    $(".list").eq(0).nav("red");//調用局部方法
});

如今回過頭再把咱們寫的插件代碼對應上面寫的插件編寫的要點，思考一下，咱們還有哪些沒有作到？就會發現，基本已經能對應上了。如今咱們就完成了一個下拉菜單的插件。

其實編寫插件並不難，最主要的是在咱們編寫插件的時候，必定要時刻注意這樣的要點，每個細節都遵循在你們實踐過程當中總結出來的最佳實現，才能自定義實現一個良好的插件。

代碼首先是寫我的看的，再而後纔是給機器看的。