Beispiel-Tutorial zum Überschreiben von jQuery-Objektmethoden in JavaScript

Beispiel-Tutorial zum Überschreiben von jQuery-Objektmethoden in JavaScript_jquery

WBOY

Freigeben： 2016-05-16 16:38:45

Original

1226 Leute haben es durchsucht

jQuery ist eine sehr gute Klassenbibliothek, die viele clientseitige Programmieraufgaben löst, aber nichts ist allmächtig. Wenn es unsere Anforderungen nicht erfüllen kann, müssen wir es gleichzeitig nicht beeinflussen oder ändern seine ursprünglichen Funktionen; zum Beispiel wird der Großteil der Dateninteraktion in meiner aktuellen Webanwendung über Ajax abgeschlossen, sodass einige versteckte Felddaten in HTML-Tags gespeichert werden können. In den Attributen wird die Codemenge in HTML-Tags reduziert, wie z : ID, Zeitstempel usw. Diese Felder, die keine Benutzereingabe erfordern, aber übermittelt werden müssen, werden über das Formular

übermittelt

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

Nach dem Login kopieren

Speichern Sie den ID-Wert in einem versteckten Tag und übermitteln Sie ihn mit dem Formular.

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Bitte achten Sie nicht zu sehr auf den blauen Teil dieses Attributnamens. Sie können nun einige prägnantere Namen wählen, um den Wert von data-id zu lesen und auf $.prototype zu setzen definiert eine Funktion neu und übergibt die Basisklassenfunktion in Form eines Abschlusses, damit sie in der neuen Funktion aufgerufen werden kann:

<script>
    $.prototype.val = function (base) {
      return function () {
        var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset &#63; 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 &#63; s : v; }
        }
        
      }
　　　　　　//在这里传入基类方法
    }($.prototype.val);
</script>

Nach dem Login kopieren

Wenn nach dieser Umschreibung das data-property-Attribut im Tag angegeben ist, entspricht der Aufruf von val() für das jQuery-Objekt dem Aufruf von attr("data-property"), es wird jedoch kein data-property angegeben Die Standardeinstellung: Wenn es sich um ein Nicht-Formularelement handelt, entspricht val () text (). Wenn es sich um ein Formularelement handelt, bleibt die ursprüngliche Funktion erhalten, die darin besteht, den Wert des Wertattributs zu lesen und zu schreiben kann diese Methode verwenden: $("[data-field= 'id']").val(345) und $("[data-field='id']").val() lesen oder setzen seinen Wert, den Das Attribut „data-field“ wird den Feldern entsprechender Typen auf dem Server zugeordnet. Dies ist die Methode zum Umschreiben von jQuery in JavaScript. Das Umschreiben anderer Methoden hat den gleichen Effekt, sodass Sie Schlussfolgerungen aus einem Beispiel ziehen können.

Alle Codes lauten wie folgt:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>在JavaScript中重写对象的方法</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 &#63; 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 &#63; 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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das Web-Frontend-Design aller hilfreich sein wird.