jQuery入門筆記之(七)插件

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

一. 插件概述

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

  1. 必須先引入 jquery.js 文件,並且在全部插件以前引入;html

  2. 引入插件;java

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

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

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

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

還有各類各樣的別人編寫好的插件能夠供你使用:好比管理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");//調用局部方法
});

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

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

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

相關文章
相關標籤/搜索