Exemple de tutoriel sur le remplacement des méthodes d'objet jQuery dans JavaScript

Exemple de tutoriel sur le remplacement des méthodes d'objet jQuery dans JavaScript_jquery

WBOY

Libérer： 2016-05-16 16:38:45

original

1197 Les gens l'ont consulté

jQuery est une très excellente bibliothèque de classes. Elle résout beaucoup de programmation côté client pour nous, mais rien n'est tout-puissant lorsqu'elle ne peut pas répondre à nos besoins, nous devons en même temps la réécrire. ses fonctions d'origine ; par exemple, la plupart des interactions de données dans mon application Web actuelle sont effectuées via Ajax, de sorte que certaines données de champ cachées peuvent être enregistrées dans les balises HTML. Dans les attributs, la quantité de code dans les balises HTML est réduite, comme : ID, Timestamp, etc. Ces champs qui ne nécessitent pas de saisie par l'utilisateur mais doivent être soumis sont soumis via le formulaire

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

Copier après la connexion

Enregistrez la valeur de l'ID dans une balise cachée et soumettez-la avec le formulaire.

Le code est le suivant :

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

Copier après la connexion

Veuillez ne pas prêter trop attention à la partie bleue de ce nom d'attribut. Vous pouvez choisir des noms plus concis. Réécrivons maintenant la méthode val de jQuery pour lire et définir la valeur de data-id sur $.prototype val. redéfinit une fonction et passe la fonction de classe de base sous la forme d'une fermeture afin qu'elle puisse être appelée dans la nouvelle fonction. Voir le code suivant :

<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>

Copier après la connexion

Après cette réécriture, lorsque l'attribut data-property est spécifié dans la balise, appeler val() sur l'objet jQuery équivaut à appeler attr("data-property"), mais aucune propriété data n'est spécifiée, ce qui est par défaut, s'il s'agit d'un élément non-formulaire, val() est équivalent à text(), s'il s'agit d'un élément de formulaire, la fonction d'origine est conservée, qui consiste à lire et écrire la valeur de l'attribut value, donc vous peut utiliser cette méthode : $("[data-field= 'id']").val(345) et $("[data-field='id']").val() lisent ou définissent sa valeur, le L'attribut "data-field" sera mappé sur les champs de types correspondants sur le serveur. Il s'agit de la méthode de réécriture de jQuery en JavaScript. La réécriture d'autres méthodes a le même effet, vous pouvez donc tirer des conclusions à partir d'un exemple.

Tous les codes sont les suivants :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception frontale du Web de chacun.