Of Stack

An example method tutorial for overriding jQuery objects in JavaScript

  • 2020-03-30 03:46:29
  • OfStack

JQuery is a very good class library, it has solved a lot of client programming for us, but nothing is omnipotent, when it can not meet our needs, we need to rewrite it, but also do not affect its original function or modify its original function; Such as my web application now most of the time the data interaction is done through Ajax, so it can be some hidden field data stored in the attribute of HTML tags, to reduce the amount of code to the HTML tags, such as: ID, Timestamp, etc., these do not need to input from the user but had to submit fields, through a form is submitted 


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

Save the value of the ID 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>

Now let's rewrite the val method of jQuery to read and set the value of data-id, and redefine a function for $.prototype.val to pass in the base class function in the form of a closure so that it can be called in the new function. 


<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;
　　　　　　　　　//This is where the base class method is called, and of course when or whether the base class method is called depends on your business logic, where we call it because we want to keep it as it is.
        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; }
        }
        
      }
　　　　　　//Pass in the base class method here
    }($.prototype.val);
</script>

  After the rewrite, when specified on the label the data - when the property attribute, the jQuery object call val () is equivalent to call attr (" data - the property "), but do not specify a data - property, that is, by default, if is a form element is val () is equivalent to the text (), if the form element is keeping its original function, that is, the value of the read and write the value attribute, so that you can in this way: $("[data-field='id']"). Val (345) and $("[data-field='id']").

All the 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> in JavaScript Overrides the method of the object in </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=" Hahaha... " />
</body>
</html>
Related articles: