寫JQuery 插件

2024-04-27 15:15:14

字體：大中小

來源：轉載

供稿：網友

前言　　

如今做web開發，jquery 幾乎是必不可少的，就連vs神器在2010版本開始將Jquery 及ui 內置web項目里了。至于使用jquery好處這里就不再贅述了，用過的都知道。今天我們來討論下jquery的插件機制，jquery有著成千上萬的第三方插件，有時我們寫好了一個獨立的功能，也想將其與jquery結合起來，可以用jquery鏈式調用，這就要擴展jquery，寫成插件形式了，如下面就是一個簡單擴展Jquery對象的demo：

        //sample:擴展jquery對象的方法，bold()用于加粗字體。        (function ($) {            $.fn.extend({                "bold": function () {                    ///<summary>                    /// 加粗字體                    ///</summary>                    return this.CSS({ fontWeight: "bold" });                }            });        })(jQuery);調用方式：這是一個非常簡單的擴展。接下來我們一步步來解析上面的代碼。
一、jquery的插件機制
為了方便用戶創建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend() 方法有一個重載。
　 jQuery.extend(object) ,一個參數的用于擴展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數，或者叫靜態方法，例如jQuery內置的 Ajax方法都是用jQuery.ajax()這樣調用的，有點像 “類名.方法名” 靜態方法的調用方式。下面我們也來寫個jQuery.extend(object)的例子：
        //擴展jQuery對象本身        jQuery.extend({            "minValue": function (a, b) {                ///<summary>                /// 比較兩個值，返回最小值                ///</summary>                return a < b ? a : b;            },            "maxValue": function (a, b) {                ///<summary>                /// 比較兩個值，返回最大值                ///</summary>                return a > b ? a : b;            }        });        //調用        var i = 100; j = 101;        var min_v = $.minValue(i, j); // min_v 等于 100        var max_v = $.maxValue(i, j); // max_v 等于 101重載版本：jQuery.extend([deep], target, object1,[objectN])
   用一個或多個其他對象來擴展一個對象，返回被擴展的對象。   如果不指定target，則給jQuery命名空間本身進行擴展。這有助于插件作者為jQuery增加新方法。    如果第一個參數設置為true，則jQuery返回一個深層次的副本，遞歸地復制找到的任何對象。否則的話，副本會與原對象共享結構。    未定義的屬性將不會被復制，然而從對象的原型繼承的屬性將會被復制。參數   deep:       可選。如果設為true，則遞歸合并。   target:     待修改對象。   object1:   待合并到第一個對象的對象。   objectN:   可選。待合并到第一個對象的對象。示例1：合并 settings 和 options，修改并返回 settings。var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };jQuery.extend(settings, options);結果：settings == { validate: true, limit: 5, name: "bar" }
示例2：合并 defaults 和 options, 不修改 defaults。var empty = {};var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(empty, defaults, options);結果：settings == { validate: true, limit: 5, name: "bar" }empty == { validate: true, limit: 5, name: "bar" }這個重載的方法，我們一般用來在編寫插件時用自定義插件參數去覆蓋插件的默認參數。
jQuery.fn.extend(object)擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。
首先我們來看fn 是什么東西呢。查看jQuery代碼，就不難發現。
jQuery.fn = jQuery.PRototype = {
　　　init: function( selector, context ) {.....};};
原來 jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。那jQuery.fn.extend()方法就是擴展jQuery對象的原型方法。我們知道擴展原型上的方法，就相當于為對象添加”成員方法“，類的”成員方法“要類的對象才能調用，所以使用jQuery.fn.extend(object)擴展的方法， jQuery類的實例可以使用這個“成員函數”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區分開來。
二、自執行的匿名函數/閉包
     1. 什么是自執行的匿名函數?     　　   它是指形如這樣的函數: (function {// code})();    2. 疑問 為什么(function {// code})();可以被執行, 而function {// code}();卻會報錯?    3. 分析            (1). 首先, 要清楚兩者的區別:     (function {// code})是表達式, function {// code}是函數聲明.           (2). 其次, js"預編譯"的特點:     js在"預編譯"階段, 會解釋函數聲明, 但卻會忽略表式.            (3). 當js執行到function() {//code}();時, 由于function() {//code}在"預編譯"階段已經被解釋過, js會跳過function(){//code}, 試圖去執行();, 故會報錯;        當js執行到(function {// code})();時, 由于(function {// code})是表達式, js會去對它求解得到返回值, 由于返回值是一 個函數, 故而遇到();時, 便會被執行.
   另外， 函數轉換為表達式的方法并不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……  例如：   bootstrap 框架中的插件寫法：   !function($){　　//do something;   }(jQuery);
   和    (function($){　　//do something;   })(jQuery); 是一回事。匿名函數最大的用途是創建閉包（這是javaScript語言的特性之一），并且還可以構建命名空間，以減少全局變量的使用。例如：     var a=1;     (function()(){　　　　var a=100;　　})();      alert(a); //彈出 1更多 閉包和匿名函數 可查看 Javascript的匿名函數與自執行 這篇文章。
三、一步一步封裝JQuery插件
接下來我們一起來寫個高亮的jqury插件1.定一個閉包區域，防止插件"污染"
//閉包限定命名空間(function ($) {    })(window.jQuery);2.jQuery.fn.extend(object)擴展jquery 方法，制作插件
//閉包限定命名空間(function ($) {    $.fn.extend({        "highLight":function(options){            //do something        }    });})(window.jQuery);3.給插件默認參數，實現 插件的功能
//閉包限定命名空間(function ($) {    $.fn.extend({        "highLight": function (options) {            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數            this.each(function () {  //這里的this 就是 jQuery對象                //遍歷所有的要高亮的dom,當調用 highLight()插件的是一個集合的時候。                var $this = $(this); //獲取當前dom 的 jQuery對象，這里的this是當前循環的dom                //根據參數來設置 dom的樣式                $this.css({                    backgroundColor: opts.background,                    color: opts.foreground                });            });        }    });    //默認參數    var defaluts = {        foreground: 'red',        background: 'yellow'    };})(window.jQuery);到這一步，高亮插件基本功能已經具備了。調用代碼如下：
$(function () {    $("p").highLight(); //調用自定義 高亮插件});這里只能 直接調用，不能鏈式調用。我們知道jQuey是可以鏈式調用的，就是可以在一個jQuery對象上調用多個方法，如：$('#id').css({marginTop:'100px'}).addAttr("title","測試“); 但是我們上面的插件，就不能這樣鏈式調用了。比如：$("p").highLight().css({marginTop:'100px'}); //將會報找不到css方法，原因在與我的自定義插件在完成功能后，沒有將 jQuery對象給返回出來。接下來，return jQuery對象，讓我們的插件也支持鏈式調用。（其實很簡單，就是執行完我們插件代碼的時候將jQuery對像return 出來，和上面的代碼沒啥區別）
 1 //閉包限定命名空間 2 (function ($) { 3     $.fn.extend({ 4         "highLight": function (options) { 5             var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數 6             return this.each(function () {  //這里的this 就是 jQuery對象。這里return 為了支持鏈式調用 7                 //遍歷所有的要高亮的dom,當調用 highLight()插件的是一個集合的時候。 8                 var $this = $(this); //獲取當前dom 的 jQuery對象，這里的this是當前循環的dom 9                 //根據參數來設置 dom的樣式10                 $this.css({11                     backgroundColor: opts.background,12                     color: opts.foreground13                 });14             });15 16         }17     });18     //默認參數19     var defaluts = {20         foreground: 'red',21         background: 'yellow'22     };23 })(window.jQuery);4.暴露公共方法 給別人來擴展你的插件（如果有需求的話）比如的高亮插件有一個format方法來格式話高亮文本，則我們可將它寫成公共的，暴露給插件使用者，不同的使用著根據自己的需求來重寫該format方法，從而是高亮文本可以呈現不同的格式。
    //公共的格式化 方法. 默認是加粗，用戶可以通過覆蓋該方法達到不同的格式化效果。    $.fn.highLight.format = function (str) {        return "<strong>" + str + "</strong>";     }5.插件私有方法 有些時候，我們的插件需要一些私有方法，不能被外界訪問。例如 我們插件里面需要有個方法 來檢測用戶調用插件時傳入的參數是否符合規范。6.其他的一些設置，如：為你的插件加入元數據插件的支持將使其變得更強大。
完整的高亮插件代碼如下：
//閉包限定命名空間(function ($) {    $.fn.extend({        "highLight": function (options) {            //檢測用戶傳進來的參數是否合法            if (!isValid(options))                return this;            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數            return this.each(function () {  //這里的this 就是 jQuery對象。這里return 為了支持鏈式調用                //遍歷所有的要高亮的dom,當調用 highLight()插件的是一個集合的時候。                var $this = $(this); //獲取當前dom 的 jQuery對象，這里的this是當前循環的dom                //根據參數來設置 dom的樣式                $this.css({                    backgroundColor: opts.background,                    color: opts.foreground                });                //格式化高亮文本                var markup = $this.html();                markup = $.fn.highLight.format(markup);                $this.html(markup);            });        }    });    //默認參數    var defaluts = {        foreground: 'red',        background: 'yellow'    };    //公共的格式化 方法. 默認是加粗，用戶可以通過覆蓋該方法達到不同的格式化效果。    $.fn.highLight.format = function (str) {        return "<strong>" + str + "</strong>";    }    //私有方法，檢測參數是否合法    function isValid(options) {        return !options || (options && typeof options === "object") ? true : false;    }})(window.jQuery);調用
        //調用        //調用者覆蓋 插件暴露的共公方法        $.fn.highLight.format = function (txt) {            return "<em>" + txt + "</em>"        }        $(function () {            $("p").highLight({ foreground: 'orange', background: '#ccc' }); //調用自定義 高亮插件        });
請問如何寫JQuery插件？
最佳答案一、類級別（$.extend）    類級別你可以理解為拓展jquery類，最明顯的例子是$.ajax(...),相當于靜態方法。    開發擴展其方法時使用$.extend方法，即jQuery.extend(object);二、 對象級別    對象級別則可以理解為基于對象的拓展，如$("#table").changeColor(...); 這里這個changeColor呢，就是基于對象的拓展了。開發擴展其方法時使用$.fn.extend方法，即jQuery.fn.extend(object);三、 jQuery插件開發過程    1、定義作用域：為插件定義私有作用域，外部代碼不能直接訪問插件內部的代碼，插件內部的代碼不污染全局變量、   2、為jQuery擴展一個插件：為jQuery的實例添加一個寬展方法。該寬展方法可以接收一些參數。    3、設置默認值：為擴展方法設置默認值，一般會將默認屬性對象定義為defaults。使用$.extend(defaults,options)將默認值和傳入的參數進行合并。    4、支持jQuery的連接調用：循環把每個元素返回。    5、插件里的方法：為了使代碼結構化可視化，需要用到function。在插件里的方法不能被外界調用。    6、自定義回調函數：使用call和apply方法執行回調函數。