jQuery外掛程式編寫

標籤：

編寫外掛程式的目的:給已經有的一系列方法或函數做一個封裝，以便在其他地方重複使用，方便後期維護和提高開發效率。

jQuery外掛程式類型

jQuery外掛程式主要分為3種類型：
1.封裝對象方法的外掛程式(對象層級組件開發)
這種外掛程式是將對象方法封裝起來，用於對通過選取器擷取的jQuery對象進行操作，是最常見的一種外掛程式。這類外掛程式可以發揮出jQuery選取器的強大優勢。
即掛在jQuery原型下的方法，這樣通過選取器擷取的jQuery對象執行個體也能共用該方法，也稱為動態方法(執行個體方法)

$.fn.myPlugin = function(){    //do something}//這裡$.fn===$.prototype//例如：addClass()、attr()等，需要建立執行個體來調用

2.封裝全域函數的外掛程式(類層級組件開發)
可以將獨立的函數加到jQuery命名空間之下，例如jQuery.noConflict()方法就是jQuery內部作為全域函數的外掛程式附加到核心上去的。
即給jQuery命名空間下添加新的全域函數，也稱為靜態方法

jQuery.myPlugin = function(){    //do something}//例如：$.Ajax()、$.extend()

3.選取器外掛程式
個別情況下，會需要用到選取器外掛程式。

外掛程式的基本要點

• jQuery外掛程式的檔案名稱推薦命名為jQuery.[外掛程式名].js，以免和其他JavaScript庫外掛程式混淆。
• 所有的對象方法都應該附加到jQuery.fn對象上，而所有的全域函數都應該附加到jQuery對象本身上
• 在外掛程式內部，this指向的是當前通過選取器擷取到的jQuery對象。
• 可以通過this.each來遍曆所有元素
• 所有的方法或函數外掛程式，都應當以分號結尾，否則壓縮的時候可能出現問題。為了更加穩妥些，甚至可以在外掛程式頭部先加上一個分號，以免他人的不規範代碼給外掛程式帶來影響。
• 外掛程式應該返回一個jQuery對象，以保證外掛程式的可鏈式操作。

常見外掛程式形式

//注意為了更好的相容性，開始前有個分號;(function($){//此處將$作為匿名函數的形參    //這裡放置代碼，可以使用$作為jQuery的縮寫別名    //定義一個局部變數foo，僅函數內部可以訪問，外部無法訪問    var foo;    var bar = function(){    //在匿名函數內部的函數都可以訪問foo，即便是在匿名函數的外部調用bar()的時候，也可以在bar()的內部訪問到foo.但在匿名函數的外部直接存取foo是做不到的    }    $.BAR = bar;    //這個語句讓匿名函數內部的函數bar()逃逸到全域可訪問的範圍內，這樣就可以在匿名函數的外部調用,jQuery.BAR()來訪問內部定義的函數bar()，並且內建函式bar()也能訪問匿名函數內的變數foo})(jQuery);//這裡將jQuery作為實參傳遞給匿名函數

外掛程式中的閉包

關於閉包，ECMAScript對其進行了這樣的定義：允許使用內建函式(即函數定義和函數運算式位於另一個函數的函數體內)，而且，這些內建函式可以訪問它們所在的外部函數中聲明的所有局部變數、參數和聲明的其他內建函式，當其中一個這樣的內建函式在包含它們的外部函數之外被調用時，就會形成閉包。即內建函式會在外部函數返回後被執行。而當這個內建函式執行時，它讓然必須訪問其外部函數的局部變數、參數以及其他內建函式。這些局部變數、參數和函式宣告的值是外部函數返回時的值，但也會受到內建函式的影響。

我們利用閉包可以訪問和修改包含函數中的局部變數
利用閉包的特性，既可以避免內部臨時變數影響全域空間，又可以在外掛程式內部繼續使用$作為jQuery的別名.

提供外掛程式的預設選項

外掛程式應該會有一些選項是可以讓開發人員自己根據需要設定的，所以提供恢複預設選項是以有必要的。你可以通過jQuery的extend功能來設定這些選項：

var defaults = {//預設配置參數        ‘container‘ : ‘#container‘,//容器        ‘sections‘ : ‘.section‘,//子容器        ‘easing‘ : ‘ease‘,//特效方式，ease-in,ease-out,linear        ‘duration‘ : 1000,//每次動畫執行的時間        ‘pagination‘ : true,//是否顯示分頁        ‘loop‘ : false,//是否迴圈        ‘keyboard‘ : true,//是否支援鍵盤        ‘direction‘ : ‘vertical‘,//滑動的方向horizontal,vertical,    };opts = $.extend({}, defaults , options||{});

jQuery提供了兩個用於擴充jQuery功能的方法：jQuery.extend()和jQuery.fn.extend().這兩個方法都接受一個參數，類型為Object。Object對象的”名/值對”分別代表”函數或方法名/函數主體”.

jQuery.extend()用法

jQuery.extend()方法除了可以用於擴充jQuery對象外，還可以用於擴充已有的object對象。
將對象的屬性添加給jQuery對象
Demo:

<script type="text/javascript" src="jquery-2.1.4.js"></script><script type="text/javascript">$(function(){    var obj1 = {        apple:0,        banana:{weight:52,price:100},        cherry:97    };    jQuery.extend(obj1);//這樣寫是將obj1對象的屬性添加給jQuery對象    console.log(jQuery.apple);//0    console.log(jQuery.banana);//Object {weight: 52, price: 100}    console.log(jQuery.cherry);//97});</script>

用一個或多個其他對象來擴充一個對象，然後返回被擴充的對象。
Demo:

<script type="text/javascript" src="jquery-2.1.4.js"></script><script type="text/javascript">/*這個例子是合并obj1對象和obj2對象，修改並返回obj1對象 */$(function(){    var obj1 = {        name:"lisi",        job:"worker",        age:22    };    var obj2 = {        name:"wangwu",        age:100,        address:"大連"    };    $.extend(obj1,obj2);//預設第一個參數為false,即進行淺拷貝    console.log(obj1);//Object {name: "wangwu", job: "worker", age: 100, address: "大連"}});</script>

淺拷貝：

<script type="text/javascript" src="jquery-2.1.4.js"></script><script type="text/javascript">$(function(){    var obj1 = {        apple:0,        banana:{weight:52,price:100},        cherry:97    };    var obj2 = {        banana:{price:200},        durian:100    };    var obj = $.extend(obj1,obj2);    var obj1 = $.extend(false,obj1,obj2);//預設第一個參數是false，淺拷貝    console.log(JSON.stringify(obj));//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}    console.log(JSON.stringify(obj1));    //從輸出的結果可以看出，banana這個key值被替換掉了});</script>

深拷貝：也會對嵌套子物件進行遞迴合并

<script type="text/javascript" src="jquery-2.1.4.js"></script><script type="text/javascript">$(function(){    var obj1 = {        apple:0,        banana:{weight:52,price:100},        cherry:97    };    var obj2 = {        banana:{price:200},        durian:100    };    var obj = $.extend(true,obj1,obj2);//第一個參數true表示深拷貝    console.log(JSON.stringify(obj));//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}//深拷貝是進行遞迴合并，對已有屬性值進行覆蓋，沒有的屬性進行增加</script>

深拷貝和淺拷貝結果對比：

//深拷貝{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}//淺拷貝//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

淺拷貝的結果直接將banana的值進行了替換，深拷貝對banana的值進行合并修改，不是簡單的直接替換。
jQuery.extend()方法經常被用於設定外掛程式方法的一系列預設參數
Demo:

<script type="text/javascript" src="jquery-2.1.4.js"></script><script type="text/javascript">$(function(){    function fn(options){        options = $.extend({            name:"bar",            length:5,            dataType:"xml"/*預設參數設定*/        },options);        return options;    }    console.log(fn({name:"a",length:6,dataType:"json"}));//Object {name: "a", length: 6, dataType: "json"}    console.log(fn({name:"b",length:7}));//Object {name: "b", length: 7, dataType: "xml"}    console.log(fn({name:"c"}));//Object {name: "c", length: 5, dataType: "xml"}    console.log(fn());//Object {name: "bar", length: 5, dataType: "xml"}});</script>

我們在調用fn()方法的時候，在傳遞的參數options對象中設定了相應的值，那麼就使用設定的值，否則就使用預設值。通過使用$.extend()方法，可以很方便地用傳入的參數來覆蓋預設值。

jQuery外掛程式編寫 jQuery.color外掛程式

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>jQuery.color外掛程式</title>    <style type="text/css">        .red{            color: red;        }    </style></head><body><div class="red">red</div><div class="blue" style="color: blue;">blue</div><div class="yellow" style="color:yellow;">yellow</div><script type="text/javascript" src="jquery-2.1.4.js"></script><script type="text/javascript" src="jQuery.color.js"></script><script type="text/javascript">//外掛程式應用$(function(){    console.log($("div").color("red"));});</script></body></html>

jQuery.color.js

;(function($){    $.fn.extend({        "color":function(value){            return this.css("color",value);//設定字型顏色值        }    });})(jQuery);/*這裡給這個方法提供一個參數value，如果調用方法的時候傳遞了value這個參數，那麼就是用這個值來設定字型顏色，否則就是擷取匹配元素的字型顏色的值 */

推薦幾篇不錯的博文：
建立更好jQuery外掛程式的10個建議

jQuery外掛程式編寫