細說 jQuery 插件篇（一） - 添加全局函數

當咱們但願將一些功能性代碼重複使用，能夠將其打包成一個 jQuery 插件來使用。

使用 $ 別名

首先咱們在編寫插件時必須保證 jQuery 庫已經載入，可是咱們不能保證 $ 必定可用，爲了使用 $ 別名，咱們能夠利用 IIFE （Immediately Invoked Function Expression），即當即執行函數：

(function($) {
  //...
}(jQuery));

函數只接收一個參數，咱們經過這個參數傳入了jQuery對象。所以在這個函數內部，使用 $ 別名就不會有衝突了。

添加全局函數

所謂全局函數就是 jQuery 對象的方法，例如在 Ajax 一篇中介紹的 $.get 等方法。咱們來添加一個新的全局函數 $.sum：

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

咱們來測試下這個爲數組元素求和的方法是否生效：

隔離函數

如今咱們已經在 jQuery 命名空間中建立了一個新的全局函數，但這樣寫有可能會污染命名空間，例如當其餘插件也使用 sum 命名時就會出現衝突，爲了不衝突的發生，咱們能夠使用命名空間來隔離函數，即將函數封裝到一個對象中。

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

此時咱們能夠這樣來使用：

將上述代碼保存到 jQuery.myPlugin.js 文件中，就能夠將其做爲一個簡單的插件來使用了。

參考

http://book.douban.com/subject/24669823/