How to rewrite a jquery object in JavaScript tutorial _jquery

jquery is a very good class library, it gives us a lot of client programming, but nothing is omnipotent, when it does 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 current Web application most of the time the data interaction is done through Ajax, so that some of the hidden fields of data stored in the HTML tag properties, so that the HTML tag code, such as: Id,timestamp, ETC., These fields that do not require user input but have to be submitted through the form are

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

The code looks like this:

<div>
<label data-field= "id" data-property= "data-id" data-id= "343" >first name</label>< Input type= "text" data-field= "FirstName"/>
</div>

Note that the blue part of this attribute name please do not care too much, you can definitely take some more concise names, now we rewrite the Val method of jquery to read and set the Data-id value to $. Prototype.val redefine a function, passing the base class function in the form of a closure so that it can be called in a new function, looking at 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?
　　　　　　　　　ARGUMENTS[0]: null;
        Here we call the base class method, of course when the base class method is invoked or whether it is to be invoked depending on your business logic, where we are going to call because we want to preserve its original functionality.
        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;}
}//Here Pass the base class method} ($.prototype.val); </script> 

After this rewrite, when the Data-property property is specified in the tag, the jquery object invocation val () is equivalent to calling attr ("Data-property"), but not specifying Data-property is by default If the non-form element is Val () equivalent to text (), if it is a form element, it retains its original function, that is, reading and writing the value of the Value property, so that it can be done in this way: $ ("[data-field= ' id]"). Val (345) and $ ("[ data-field= ' id ']. val () reads or sets its value, and the "Data-field" attribute will be mapped to the corresponding type of field on the server, and the way to rewrite jquery in JavaScript is here, Other methods of rewriting are similar, we can extrapolate thinking.

All the code is as follows:

<! DOCTYPE html>  

I hope this article will help you with the design of the Web front section.