快捷導(dǎo)航

在JavaScript中重寫(xiě)jQuery對(duì)象的方法實(shí)例教程

更新時(shí)間：2014年08月25日 09:14:24 投稿：shichen2014

這篇文章主要介紹了在JavaScript中重寫(xiě)jQuery對(duì)象的方法,在某些情況下jQuery無(wú)法滿(mǎn)足應(yīng)用開(kāi)發(fā)的時(shí)候可以采用javascript重寫(xiě)jQuery方法來(lái)滿(mǎn)足功能的實(shí)現(xiàn),需要的朋友可以參考下

jQuery是一個(gè)款非常優(yōu)秀的類(lèi)庫(kù)，它給我們解決了很多的客戶(hù)端編程，但是任何東西都不是萬(wàn)能的，當(dāng)它不能滿(mǎn)足我們的需求時(shí)我們就需要對(duì)它進(jìn)行重寫(xiě)，同時(shí)也不要影響其原有的功能或者修改其原有的功能；比如我現(xiàn)在的web應(yīng)用程序大多數(shù)時(shí)候的數(shù)據(jù)交互都是通過(guò)Ajax來(lái)完成的，這樣就可以將一些隱藏字段的數(shù)據(jù)保存在HTML標(biāo)簽的屬性中，使HTML標(biāo)簽的代碼量減少，如：ID，Timestamp等等，這些不需要用戶(hù)輸入但又不得不提交的字段，通過(guò)表單提交的做法是

<input name="ID" value="343" type="hidden" />

把ID的值保存在一個(gè)隱藏標(biāo)簽中，然后隨表單提交。

代碼如下所示：

<div>
<label data-field="id" data-property="data-id" data-id="343">First Name</label><input type="text" data-field="FirstName" />
</div>

注意藍(lán)色的部分這個(gè)屬性名稱(chēng)請(qǐng)不要太在意，您完全可以取一些更簡(jiǎn)潔名字，現(xiàn)在我們來(lái)重寫(xiě)jQuery的val方法來(lái)讀取和設(shè)置data-id的值，給$.prototype.val重新定義一個(gè)函數(shù)，以閉包的形式將基類(lèi)函數(shù)傳入，以便在新函數(shù)中調(diào)用它，看下面這段代碼:

<script>
    $.prototype.val = function (base) {
      return function () {
        var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset ? arguments[0] : null;
　　　　　　　　　//這里調(diào)用基類(lèi)方法，當(dāng)然基類(lèi)方法在何時(shí)調(diào)用或者是否要調(diào)用取決于您的業(yè)務(wù)邏輯，在這里我們是要調(diào)用的，因?yàn)橐３炙械墓δ堋?
        if (isset&&typeof(base)=="function") { base.call(s, v); } else { v = base.call(s); }
        if (p) {
          if (isset) { s.attr(p, v); return s }
          else { return s.attr(p) }
        }
        else {
          if (!s.is(":input"))
          { if (isset) { s.text(v); return s; } else { return s.text(); } }
          else { return isset ? s : v; }
        }
        
      }
　　　　　　//在這里傳入基類(lèi)方法
    }($.prototype.val);
</script>

這個(gè)重寫(xiě)了之后，當(dāng)在標(biāo)簽中指定了data-property屬性時(shí)，jQuery對(duì)象調(diào)用val() 等同于調(diào)用attr("data-property")，但沒(méi)有指定data-property也就是默認(rèn)情況下，如果是非表單元素則是val()等同于text()，如果是表單元素則保持原來(lái)的功能也就是讀寫(xiě)value屬性的值，這樣就可以通過(guò)這種方式：$("[data-field='id']").val(345)和$("[data-field='id']").val() 讀取或者設(shè)置它的值了，“data-field” 這個(gè)屬性將會(huì)映射到服務(wù)器上對(duì)應(yīng)類(lèi)型的字段中，關(guān)于重寫(xiě)JavaScript中的jQuery的方法就到這里了，其他方法的重寫(xiě)是異曲同工的，大家可以舉一反三的思考。

全部代碼如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>在JavaScript中重寫(xiě)對(duì)象的方法</title>
  <script src="Scripts/jquery-1.8.2.min.js"></script>
  <script src="Scripts/jquery-ui-1.8.24.min.js"></script>
  <script>
    $.prototype.val = function (base) {
      return function () {
        var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset ? arguments[0] : null;
        if (isset&&typeof(base)=="function") { base.call(s, v); } else { v = base.call(s); }
        if (p) {
          if (isset) { s.attr(p, v); return s }
          else { return s.attr(p) }
        }
        else {
          if (!s.is(":input"))
          { if (isset) { s.text(v); return s; } else { return s.text(); } }
          else { return isset ? s : v; }
        }
      }
    }($.prototype.val);
  </script>
</head>
<body>
  <span id="lbl">Hello world!</span>
  <input type="text" id="txt" value="hello world" />
  <input type="checkbox" value="哈哈哈。。。" />
</body>
</html>

希望本文所述對(duì)大家的web前段設(shè)計(jì)有所幫助。

您可能感興趣的文章: