jQuery插件編寫步驟詳解

更新時間：2016年06月03日 11:14:03 作者：冇一朵小尐尒尕尗尛尜

這篇文章主要介紹了jQuery插件編寫步驟,詳細分析了jQuery實現(xiàn)插件功能的具體步驟與相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery插件編寫步驟。分享給大家供大家參考，具體如下：

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

//sample:擴展jquery對象的方法，bold()用于加粗字體。
(function ($) {
  $.fn.extend({
    "bold": function () {
      ///<summary>
      /// 加粗字體
      ///</summary>
      return this.css({ fontWeight: "bold" });
    }
  });
})(jQuery);

調(diào)用方式：

這是一個非常簡單的擴展。接下來我們一步步來解析上面的代碼。

一、jquery的插件機制

為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一個重載。

jQuery.extend(object) ,一個參數(shù)的用于擴展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的 ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點像 "類名.方法名" 靜態(tài)方法的調(diào)用方式。下面我們也來寫個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;
  }
});
//調(diào)用
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增加新方法。
如果第一個參數(shù)設(shè)置為true，則jQuery返回一個深層次的副本，遞歸地復(fù)制找到的任何對象。否則的話，副本會與原對象共享結(jié)構(gòu)。
未定義的屬性將不會被復(fù)制，然而從對象的原型繼承的屬性將會被復(fù)制。

參數(shù)：

   deep:       可選。如果設(shè)為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);

結(jié)果：

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);

結(jié)果：

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

這個重載的方法，我們一般用來在編寫插件時用自定義插件參數(shù)去覆蓋插件的默認參數(shù)。

jQuery.fn.extend(object)擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。

首先我們來看fn 是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。

jQuery.fn = jQuery.prototype = {
  init: function( selector, context ) {.....};
};

原來 jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。那jQuery.fn.extend()方法就是擴展jQuery對象的原型方法。我們知道擴展原型上的方法，就相當于為對象添加"成員方法"，類的"成員方法"要類的對象才能調(diào)用，所以使用 jQuery.fn.extend(object)擴展的方法， jQuery類的實例可以使用這個"成員函數(shù)"。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區(qū)分開來。

二、自執(zhí)行的匿名函數(shù)/閉包

1. 什么是自執(zhí)行的匿名函數(shù)?

它是指形如這樣的函數(shù):

(function {// code})();

2. 疑問為什么(function {// code})();可以被執(zhí)行, 而function {// code}();卻會報錯?

3. 分析

(1). 首先, 要清楚兩者的區(qū)別:

(function {// code})是表達式, function {// code}是函數(shù)聲明.

(2). 其次, js"預(yù)編譯"的特點:

js在"預(yù)編譯"階段, 會解釋函數(shù)聲明, 但卻會忽略表式.

(3). 當js執(zhí)行到function() {//code}();時, 由于function() {//code}在"預(yù)編譯"階段已經(jīng)被解釋過, js會跳過function(){//code}, 試圖去執(zhí)行();, 故會報錯;
當js執(zhí)行到(function {// code})();時, 由于(function {// code})是表達式, js會去對它求解得到返回值, 由于返回值是一個函數(shù), 故而遇到();時, 便會被執(zhí)行.
另外，函數(shù)轉(zhuǎn)換為表達式的方法并不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……

例如：

bootstrap 框架中的插件寫法：

!function($){
//do something;
}(jQuery);

和

(function($){
//do something;
})(jQuery);

是一回事。

匿名函數(shù)最大的用途是創(chuàng)建閉包（這是JavaScript語言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。

例如：

var a=1;
(function()(){
  var a=100;
})();
alert(a); //彈出 1

三、一步一步封裝JQuery插件

接下來我們一起來寫個高亮的jqury插件

1.定一個閉包區(qū)域，防止插件"污染"

//閉包限定命名空間
(function ($) {
})(window.jQuery);

2.jQuery.fn.extend(object)擴展jquery 方法，制作插件

//閉包限定命名空間
(function ($) {
  $.fn.extend({
    "highLight":function(options){
      //do something
    }
  });
})(window.jQuery);

3.給插件默認參數(shù)，實現(xiàn) 插件的功能

//閉包限定命名空間
(function ($) {
  $.fn.extend({
    "highLight": function (options) {
      var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數(shù)
      this.each(function () { //這里的this 就是 jQuery對象
        //遍歷所有的要高亮的dom,當調(diào)用 highLight()插件的是一個集合的時候。
        var $this = $(this); //獲取當前dom 的 jQuery對象，這里的this是當前循環(huán)的dom
        //根據(jù)參數(shù)來設(shè)置 dom的樣式
        $this.css({
          backgroundColor: opts.background,
          color: opts.foreground
        });
      });
    }
  });
  //默認參數(shù)
  var defaluts = {
    foreground: 'red',
    background: 'yellow'
  };
})(window.jQuery);

到這一步，高亮插件基本功能已經(jīng)具備了。調(diào)用代碼如下：

$(function () {
  $("p").highLight(); //調(diào)用自定義 高亮插件
});

這里只能直接調(diào)用，不能鏈式調(diào)用。我們知道jQuey是可以鏈式調(diào)用的，就是可以在一個jQuery對象上調(diào)用多個方法，如：

$('#id').css({marginTop:'100px'}).addAttr("title","測試");

但是我們上面的插件，就不能這樣鏈式調(diào)用了。比如：

$("p").highLight().css({marginTop:'100px'});

將會報找不到css方法，原因在與我的自定義插件在完成功能后，沒有將 jQuery對象給返回出來。接下來，return jQuery對象，讓我們的插件也支持鏈式調(diào)用。（其實很簡單，就是執(zhí)行完我們插件代碼的時候?qū)Query對像return 出來，和上面的代碼沒啥區(qū)別）

//閉包限定命名空間
(function ($) {
  $.fn.extend({
    "highLight": function (options) {
      var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數(shù)
      return this.each(function () { //這里的this 就是 jQuery對象。這里return 為了支持鏈式調(diào)用
        //遍歷所有的要高亮的dom,當調(diào)用 highLight()插件的是一個集合的時候。
        var $this = $(this); //獲取當前dom 的 jQuery對象，這里的this是當前循環(huán)的dom
        //根據(jù)參數(shù)來設(shè)置 dom的樣式
        $this.css({
          backgroundColor: opts.background,
          color: opts.foreground
        });
      });
    }
  });
  //默認參數(shù)
  var defaluts = {
    foreground: 'red',
    background: 'yellow'
  };
})(window.jQuery);

4.暴露公共方法給別人來擴展你的插件（如果有需求的話）

比如的高亮插件有一個format方法來格式話高亮文本，則我們可將它寫成公共的，暴露給插件使用者，不同的使用著根據(jù)自己的需求來重寫該format方法，從而是高亮文本可以呈現(xiàn)不同的格式。

//公共的格式化 方法. 默認是加粗，用戶可以通過覆蓋該方法達到不同的格式化效果。
$.fn.highLight.format = function (str) {
  return "<strong>" + str + "</strong>";
}

5.插件私有方法

有些時候，我們的插件需要一些私有方法，不能被外界訪問。例如我們插件里面需要有個方法來檢測用戶調(diào)用插件時傳入的參數(shù)是否符合規(guī)范。

6.其他的一些設(shè)置，如：為你的插件加入元數(shù)據(jù)插件的支持將使其變得更強大。

完整的高亮插件代碼如下：

//閉包限定命名空間
(function ($) {
  $.fn.extend({
    "highLight": function (options) {
      //檢測用戶傳進來的參數(shù)是否合法
      if (!isValid(options))
        return this;
      var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數(shù)
      return this.each(function () { //這里的this 就是 jQuery對象。這里return 為了支持鏈式調(diào)用
        //遍歷所有的要高亮的dom,當調(diào)用 highLight()插件的是一個集合的時候。
        var $this = $(this); //獲取當前dom 的 jQuery對象，這里的this是當前循環(huán)的dom
        //根據(jù)參數(shù)來設(shè)置 dom的樣式
        $this.css({
          backgroundColor: opts.background,
          color: opts.foreground
        });
        //格式化高亮文本
        var markup = $this.html();
        markup = $.fn.highLight.format(markup);
        $this.html(markup);
      });
    }
  });
  //默認參數(shù)
  var defaluts = {
    foreground: 'red',
    background: 'yellow'
  };
  //公共的格式化 方法. 默認是加粗，用戶可以通過覆蓋該方法達到不同的格式化效果。
  $.fn.highLight.format = function (str) {
    return "<strong>" + str + "</strong>";
  }
  //私有方法，檢測參數(shù)是否合法
  function isValid(options) {
    return !options || (options && typeof options === "object") ? true : false;
  }
})(window.jQuery);

調(diào)用：

//調(diào)用
//調(diào)用者覆蓋 插件暴露的共公方法
$.fn.highLight.format = function (txt) {
  return "<em>" + txt + "</em>"
}
$(function () {
  $("p").highLight({ foreground: 'orange', background: '#ccc' }); //調(diào)用自定義 高亮插件
});

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: