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

joyvw 發布于2019-08-19 14:55 / 3548人閱讀

摘要：添加全局函數所謂全局函數就是對象的方法，例如在一篇中介紹的等方法。

當我們希望將一些功能性代碼重復使用，可以將其打包成一個 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/

GPU云服務器云服務器推薦一篇利用th jquery插件源碼jquery jquery插件手寫jQuery插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78174.html

細說 jQuery 插件篇（二） - 添加實例方法

摘要：前一篇介紹可以通過添加全局函數來開發插件，實際上全局函數就是對對象進行擴展，而添加實例方法就是對對象進行擴展，我們可以使用別名。添加實例方法此時頁面內只有一個元素，添加新增的實例方法進入頁面后實例方法添加成功。前一篇介紹可以通過添加全局函數來開發 jQuery 插件，實際上全局函數就是對 jQuery 對象進行擴展，而添加實例方法就是對 jQuery.prototype 對象進行擴展...

chanjarster 2019-08-19 14:55 評論0 收藏0
細說 jQuery Ajax操作篇（一） - 數據加載

摘要：同樣將其綁定在按鈕點擊事件上查看結果為這里需要注意，如果文檔內的格式錯誤，雖然不會報錯，但是將無法執行回調函數。 Ajax 通俗來講即不需要刷新頁面即可從服務器或客戶端上加載數據，當然這些數據的格式是多種多樣的。加載 HTML 我們通常使用加載 HTML 的方法來加載 HTML 片段，并插入到指定位置，假設當前頁面為： load showImg(http://segmen...

paulli3 2019-08-21 12:21 評論0 收藏0
細說 jQuery Ajax操作篇（三） - 過程處理

摘要：觀察函數和函數可以用來作為觀察函數，我們可以使用觀察函數的回調函數來做相應的處理。當請求開始且尚未進行其他傳輸時，會觸發的回調函數。當最后一次活動請求終止時，則會執行通過注冊的回調函數。對于 jQuery 通過 Ajax 方式傳遞數據時，我們還可以在過程中進行一定的處理，以便達到我們的需求。觀察函數 ajaxStart 和 ajaxStop 函數可以用來作為觀察函數，我們可以使...

Imfan 2019-08-19 14:56 評論0 收藏0
細說 jQuery 元素篇（一） - 理解 DOM

摘要：最強大的特性之一就是簡化了對元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關系。被封裝到對象中的元素會被自動地，隱式地循環遍歷。訪問從上可知，返回的是對象，但是我們有時也希望直接對元素進行操作。 DOM - Document Object Model，即文檔對象模型，它通過對象樹來展示 HTML 代碼。jQuery 最強大的特性之一就是簡化了對 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 評論0 收藏0
細說 jQuery 事件篇（一） - 代碼執行時機

摘要：在元素一篇介紹過，可以使用來使得代碼在加載完畢后自動執行代碼，接下來具體介紹下這個機制。這樣看上去貌似沒什么問題，但是如果有兩個函數需要指定時就會遇到麻煩，因為屬性只能保存對一個函數的引用，如果我們寫成以下形式最后代碼執行后的效果是會覆蓋。在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動執行代碼，接下來具體介紹下這...

dunizb 2019-08-19 14:51 評論0 收藏0