Example tutorial on overriding jQuery object methods in JavaScript

Example tutorial on overriding jQuery object methods in JavaScript_jquery

WBOY

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

Original

1225 people have browsed it

jQuery is a very excellent class library. It solves a lot of client-side programming for us, but nothing is omnipotent. When it cannot meet our needs, we need to rewrite it. At the same time Do not affect or modify its original functions; for example, most of the data interaction in my current web application is completed through Ajax, so that some hidden field data can be saved in HTML tags In the attributes, the amount of code in HTML tags is reduced, such as: ID, Timestamp, etc. These fields that do not require user input but have to be submitted are submitted through the form

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

Copy after login

Save the ID value in a hidden tag and submit it with the form.

The code is as follows:

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

Copy after login

Please don’t pay too much attention to the blue part of this attribute name. You can choose some more concise names. Now let’s rewrite jQuery’s val method to read and set the value of data-id to $.prototype. val redefines a function and passes in the base class function in the form of a closure so that it can be called in the new function. See the following code:

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

Copy after login

After this rewrite, when the data-property attribute is specified in the tag, calling val() on the jQuery object is equivalent to calling attr("data-property"), but no data-property is specified, which is the default , if it is a non-form element, val() is equivalent to text(), if it is a form element, the original function is maintained, which is to read and write the value of the value attribute, so you can use this method: $("[data-field= 'id']").val(345) and $("[data-field='id']").val() read or set its value, the "data-field" attribute will be mapped to In the fields of corresponding types on the server, this is the method of rewriting jQuery in JavaScript. The rewriting of other methods has the same effect, so you can draw inferences from one example.

All codes are as follows:

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

Copy after login

I hope this article will be helpful to everyone’s web front-end design.