jquery插件開發學習

#8.1在插件中使用$別名 在編寫jquery插件時，必須假設jQuery庫已經加載到了頁面中。但是咱們不能假設$別名必定可用。由於別的插件也有可能使用$別名，juqery中的$.noConfilct()方法就是用來讓渡這個快捷方式的使用權的。在編寫插件時若是咱們依然想使用$別名，解決方案以下

(function($){
    //在這裏添加代碼
})(jQuery);

代碼說明:這裏建立了一個匿名的當即執行函數，該函數一經建立，便會當即執行，執行的時候咱們傳入實參jQuery，用形參$接收，這樣，咱們就能夠在函數內部繼續使用$別名了。 #8.2添加新的全局函數 ##8.2.1 jQuery內置的某些功能是經過全局函數提供的。所謂 全局函數，實際上就是jQuery對象的方法。但從實踐的角度上看，它們是位於jQuery命名空間內部的函數。

要向jQuery的命名空間中添加一個函數，只需將這個新函數指定爲jQuery對象的一個屬性，在此咱們添加一個求和函數(代碼以下):

(function ($) {
  $.sum = function (array) {
    var total=0;
    $.each(array,function(index,value){
      value=$.trim(value);
      value=parseFloat(value)||0;
      total+=value
    })
    return total;
  };
}) (jQuery);

咱們添加了一個$.sum()函數，它接受一個數組，返回求和結果。運行結果以下：

$.sum([1,2,3]);
/*
6
*/

代碼完整截圖 ##8.2.2添加多個函數 咱們能夠增長插件功能，再次添加一個求平均值的函數，代碼以下：

$.average = function (array) {
    if ($.isArray(array)) {
      return $.sum(array) / array.length;
    }
    return ' ';
  }

代碼完整截圖

##8.2.2擴展全局jQuery對象 事實上，$.extend()函數，咱們能夠經過另外一種方法來定義全局函數，參見代碼以下:

(function ($) {
  $.extend({
    sum: function (array) {
      var total = 0;
      $.each(array, function (index, value) {
        value = $.trim(value);
        value = parseFloat(value) || 0;
        total += value
      })
      return total;
    },
    average: function (array) {
      if ($.isArray(array)) {
        return $.sum(array) / array.length;
      }
      return '';
    }
  })
}) (jQuery);

這樣調用$.extend(),就能夠給全局jQuery對象添加屬性（若是有原來有相同的屬性，就會替換原來的屬性），這樣也定義相同的$.sum()和$.avrage()方法。 ##8.2.3 使用命名空間隔離函數 咱們的插件在jQuery命名空間中定義了兩個獨立的全局函數。但這樣寫有可能污染命名空間。換句話說，其它jQuery插件也可能定義相同的函數名。爲了不衝突，爲了不衝突，最好的方法就是把屬於一個插件的全局函數都封裝到一個對象中，代碼以下:

(function ($) {
  $.mathUtils={
    sum: function (array) {
      var total = 0;
      $.each(array, function (index, value) {
        value = $.trim(value);
        value = parseFloat(value) || 0;
        total += value
      })
      return total;
    },
    average: function (array) {
      if ($.isArray(array)) {
        return $.mathUtils.sum(array) / array.length;
      }
      return '';
    }
  }
}) (jQuery);