細(xì)說(shuō) jQuery 插件篇（一） - 添加全局函數(shù)

joyvw 發(fā)布于2019-08-19 14:55 / 3612人閱讀

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

當(dāng)我們希望將一些功能性代碼重復(fù)使用，可以將其打包成一個(gè) jQuery 插件來(lái)使用。

使用 $ 別名

首先我們?cè)诰帉?xiě)插件時(shí)必須保證 jQuery 庫(kù)已經(jīng)載入，但是我們不能保證 $ 一定可用，為了使用 $ 別名，我們可以利用 IIFE （Immediately Invoked Function Expression），即立即執(zhí)行函數(shù)：

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

函數(shù)只接收一個(gè)參數(shù)，我們通過(guò)這個(gè)參數(shù)傳入了jQuery對(duì)象。因此在這個(gè)函數(shù)內(nèi)部，使用 $ 別名就不會(huì)有沖突了。

添加全局函數(shù)

所謂全局函數(shù)就是 jQuery 對(duì)象的方法，例如在 Ajax 一篇中介紹的 $.get 等方法。我們來(lái)添加一個(gè)新的全局函數(shù) $.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));

我們來(lái)測(cè)試下這個(gè)為數(shù)組元素求和的方法是否生效：

隔離函數(shù)

現(xiàn)在我們已經(jīng)在 jQuery 命名空間中創(chuàng)建了一個(gè)新的全局函數(shù)，但這樣寫(xiě)有可能會(huì)污染命名空間，例如當(dāng)其他插件也使用 sum 命名時(shí)就會(huì)出現(xiàn)沖突，為了避免沖突的發(fā)生，我們可以使用命名空間來(lái)隔離函數(shù)，即將函數(shù)封裝到一個(gè)對(duì)象中。

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

此時(shí)我們可以這樣來(lái)使用：

將上述代碼保存到 jQuery.myPlugin.js 文件中，就可以將其作為一個(gè)簡(jiǎn)單的插件來(lái)使用了。

參考

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

云服務(wù)器 GPU云服務(wù)器推薦一篇利用th jquery插件源碼jquery jquery插件手寫(xiě)jQuery插件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78174.html

相關(guān)文章

細(xì)說(shuō) jQuery 插件篇（二） - 添加實(shí)例方法

摘要：前一篇介紹可以通過(guò)添加全局函數(shù)來(lái)開(kāi)發(fā)插件，實(shí)際上全局函數(shù)就是對(duì)對(duì)象進(jìn)行擴(kuò)展，而添加實(shí)例方法就是對(duì)對(duì)象進(jìn)行擴(kuò)展，我們可以使用別名。添加實(shí)例方法此時(shí)頁(yè)面內(nèi)只有一個(gè)元素，添加新增的實(shí)例方法進(jìn)入頁(yè)面后實(shí)例方法添加成功。前一篇介紹可以通過(guò)添加全局函數(shù)來(lái)開(kāi)發(fā) jQuery 插件，實(shí)際上全局函數(shù)就是對(duì) jQuery 對(duì)象進(jìn)行擴(kuò)展，而添加實(shí)例方法就是對(duì) jQuery.prototype 對(duì)象進(jìn)行擴(kuò)展...

chanjarster 2019-08-19 14:55 評(píng)論0 收藏0
細(xì)說(shuō) jQuery Ajax操作篇（一） - 數(shù)據(jù)加載

摘要：同樣將其綁定在按鈕點(diǎn)擊事件上查看結(jié)果為這里需要注意，如果文檔內(nèi)的格式錯(cuò)誤，雖然不會(huì)報(bào)錯(cuò)，但是將無(wú)法執(zhí)行回調(diào)函數(shù)。 Ajax 通俗來(lái)講即不需要刷新頁(yè)面即可從服務(wù)器或客戶(hù)端上加載數(shù)據(jù)，當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。加載 HTML 我們通常使用加載 HTML 的方法來(lái)加載 HTML 片段，并插入到指定位置，假設(shè)當(dāng)前頁(yè)面為： load showImg(http://segmen...

paulli3 2019-08-21 12:21 評(píng)論0 收藏0
細(xì)說(shuō) jQuery Ajax操作篇（三） - 過(guò)程處理

摘要：觀察函數(shù)和函數(shù)可以用來(lái)作為觀察函數(shù)，我們可以使用觀察函數(shù)的回調(diào)函數(shù)來(lái)做相應(yīng)的處理。當(dāng)請(qǐng)求開(kāi)始且尚未進(jìn)行其他傳輸時(shí)，會(huì)觸發(fā)的回調(diào)函數(shù)。當(dāng)最后一次活動(dòng)請(qǐng)求終止時(shí)，則會(huì)執(zhí)行通過(guò)注冊(cè)的回調(diào)函數(shù)。對(duì)于 jQuery 通過(guò) Ajax 方式傳遞數(shù)據(jù)時(shí)，我們還可以在過(guò)程中進(jìn)行一定的處理，以便達(dá)到我們的需求。觀察函數(shù) ajaxStart 和 ajaxStop 函數(shù)可以用來(lái)作為觀察函數(shù)，我們可以使...

Imfan 2019-08-19 14:56 評(píng)論0 收藏0
細(xì)說(shuō) jQuery 元素篇（一） - 理解 DOM

摘要：最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì)元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關(guān)系。被封裝到對(duì)象中的元素會(huì)被自動(dòng)地，隱式地循環(huán)遍歷。訪(fǎng)問(wèn)從上可知，返回的是對(duì)象，但是我們有時(shí)也希望直接對(duì)元素進(jìn)行操作。 DOM - Document Object Model，即文檔對(duì)象模型，它通過(guò)對(duì)象樹(shù)來(lái)展示 HTML 代碼。jQuery 最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì) DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 評(píng)論0 收藏0
細(xì)說(shuō) jQuery 事件篇（一） - 代碼執(zhí)行時(shí)機(jī)

摘要：在元素一篇介紹過(guò)，可以使用來(lái)使得代碼在加載完畢后自動(dòng)執(zhí)行代碼，接下來(lái)具體介紹下這個(gè)機(jī)制。這樣看上去貌似沒(méi)什么問(wèn)題，但是如果有兩個(gè)函數(shù)需要指定時(shí)就會(huì)遇到麻煩，因?yàn)閷傩灾荒鼙４鎸?duì)一個(gè)函數(shù)的引用，如果我們寫(xiě)成以下形式最后代碼執(zhí)行后的效果是會(huì)覆蓋。在元素一篇介紹過(guò)，jQuery 可以使用 $(document).ready() 來(lái)使得代碼在 DOM 加載完畢后自動(dòng)執(zhí)行代碼，接下來(lái)具體介紹下這...

dunizb 2019-08-19 14:51 評(píng)論0 收藏0