Before introducing how to extend jQuery, let's take a rough look at jQuery source code (take Version 1.3.2 as an example ). The main body of jQuery is as follows:
(Function (){......}) ();
It is strange for people with poor Javascript basics. In fact, this expression declares an anonymous function (the first parenthesis) and then executes it (the second parenthesis ). This function defines a series of jQuery methods and objects. Row 3 is critical,
The Code is as follows:
JQuery = window. jQuery = window. $ = function (selector, context ){
// The jQuery object is actually just the init constructor 'enabled'
Return new jQuery. fn. init (selector, context );
}
A very powerful $ function is defined here. $ Is actually an alias of jQuery. JQuery is an "authentic" jQuery function. $ is defined only to reduce the programmer's typing workload. $ Is easy to conflict with other libraries. For example, this name is also used in the famous prototype library. However, there are fewer chances of conflicts between jQuery and other libraries. Therefore, using jQuery is much safer than $. Next we will discuss the conflict issue. Let's look at the fn definition of the return object. There are 35th rows.
The Code is as follows:
JQuery. fn = jQuery. prototype = {
Init: function (selector, context ){...... },......
};
Obviously, fn is just short for jQuery prototype. An init function is defined. In fact, init acts as the jQuery constructor. When we use Code such as var I = $ ('selector '), we can find that variable I is wrapped by jQuery, that is, I carries the jQuery. fn method. Obviously, the prototype of I is directed to jQuery. fn. In the Javascript world, we can say that I is an instance of jQuery. If you try I instanceof jQuery, true is returned. However, I = new $ (selector) is not used here; I estimate that $ is such a commonly used function. If every time new is used to construct an object, that is too troublesome. This is the reason for the existence of init. $ itself is defined as a very simple function. It has only one line of code internally and returns an init object. Every time we call the $ (selector) method, a jQuery object is returned. A little factory-style. Of course, if you are familiar with Javascript, you will know that this is not enough. We need to set the prototype of init to jQuery. fn, and the code is 541 rows:
JQuery. fn. init. prototype = jQuery. fn;
Up to 540 rows, they are all defined jQuery prototype objects. In OO language, they are equivalent to instance methods. Starting from 540 rows, they define a series of jQuery methods, which are equivalent to static methods. So far, let alone the specific implementation of the method (some of which are too difficult), jQuery's structure is basically clear. The following describes the extensions.
To expand jQuery, you must first avoid naming conflicts, especially the $. JQuery has designed a jQuery. the noConflict () method enables jQuery to give up the $ symbol to avoid conflicts with other libraries. programmers can use the complete symbol jQuery to call the method provided by jQuery. The implementation of noConflict () is simple and clever. By the way, first of all, in line 21st,
// Map over the $ in case of overwrite
_ $ = Window. $. jQuery records windows. $ first. Note that this line of code runs very early and will be executed before any jQuery function is executed. Of course, the _ $ here may also conflict, but the probability is too small. Who will use such a strange name as the key variable. At this time, if $ has been occupied by other libraries, its value will be kept in _ $. At any time, as long as the jQuery. noConflict method is called, the code for line 1 is as follows:
The Code is as follows:
NoConflict: function (deep ){
Window. $ =_$;
If (deep)
Window. jQuery = _ jQuery;
Return jQuery;
},
In this way, $ is returned.
As a plug-in developer, we cannot guarantee whether $ is overwhelmed. The most secure thing is to call the jQuery method. However, there is a trick to keep simple $ without affecting other parts, that is:
The Code is as follows:
(Function ($ ){
// Plugin code goes here, you can use $ safely.
}) (JQuery );
The name of the js file of the plug-in is usually jquery. pluginname. js.
It is easy to extend jQuery tool functions (static functions). The following example shows how to extend a number to a fixed-digit string.
The Code is as follows:
(Function ($ ){
$. ToFixedWidth = function (value, length, fill ){
Var res = value. toString ();
If (! Fill) fill = 0;
Var padding = length-res. length;
If (padding <0 ){
Res = res. substr (-padding );
} Else {
For (var n = 0; n <padding; n ++)
Res = fill + res;
}
Return res;
}
}) (JQuery );
The method to compile the package set is also easy. The following implements a read-only method for form elements:
The Code is as follows:
$. Fn. setReadOnly = function (readonly ){
Return this. find ('input: text'). attr ('readonly', readonly+.css ('opacity ', readonly? 0.5: 1.0 );
}
Below is a small page for testing. This page simulates the order submission page. If you need an invoice, you must enter the invoice information. Otherwise, you cannot enter the invoice information.
The Code is as follows:
JQuery Extension
