jQuery Learning Lesson 7 Extending the Functions of jQuery Plug-in Development_jquery

The main body of jQuery is as follows:

(function(){ ……})();

is strange for people who are not very good at Javascript. In effect, this expression declares an anonymous function (first bracket) and then executes it (second bracket). In this function, the definition of a series of jQuery methods and objects is completed. Line 24 is critical,

Copy code The code is as follows:

jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}

Here, a very powerful $ function is defined. $ is actually an alias for jQuery. jQuery is the "authentic" jQuery function, and the definition of $ is just to reduce the amount of typing by programmers. $ can easily conflict with other libraries. For example, the famous prototype library also uses this name. However, there are much fewer chances for jQuery to conflict with other libraries, so using jQuery is much safer than $. Let’s talk about conflicts next. Look at the definition of return object fn, line 35

Copy code The code is as follows:

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { … }, …
};

Obviously fn is just a prototype of jQuery Just an abbreviation. An init function is defined. In fact, init acts as jQuery's constructor. When we use code like var i=$('selector'), we can find that the variable i is wrapped by jQuery, that is, i brings the jQuery.fn method. Obviously, i's prototype is pointed to jQuery.fn. In the world of Javascript, it can be said that i is an instance of jQuery. If you try i instanceof jQuery, it will return true. However, i=new $(selector) is not used here; I estimate that $ is such a commonly used function. If you have to use new to construct an object every time, it would be too troublesome. This is the reason for the existence of init , $ itself is defined as a very simple function, with only one line of code inside, returning an init object. Every time we call the $(selector) method, a jQuery object is returned. It smells a bit like factory mode. 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, line 541 of code:

jQuery.fn.init.prototype = jQuery.fn ;

Up to line 540, they are all defined jQuery prototype objects. In OO language, they are equivalent to instance methods. Starting from line 540, a series of jQuery methods are defined, which are equivalent to static methods. At this point, regardless of the specific implementation of the methods (some of which are too difficult), the structure of jQuery is basically clear. Let’s start with the extensions.

The first thing to pay attention to when extending jQuery is to avoid naming conflicts, especially the popular $. jQuery thoughtfully designed a jQuery.noConflict() method, so that jQuery can give up the $ symbol to avoid conflicts with other libraries, and programmers can use the complete symbol jQuery to call the methods provided by jQuery. The implementation of noConflict() is simple and clever. By the way, first of all, in line 21,

// Map over the $ in case of overwrite
_$ = window.$, jQuery first records windows .$, note that this line of code runs very early and will be executed before any jQuery function is executed. Of course, there is a possibility of conflict here, but the probability is too small. Who would use such a weird name as a key variable? At this time, if $ has been occupied by other libraries, its value will remain in _$. At any time, just call the jQuery.noConflict method, line 619, with the following code:

Copy code The code is as follows:

noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},

In this way, $ is returned.

As plug-in developers, we cannot guarantee whether $ will be given away. The safest thing is to call the jQuery method. However, there is a trick to retain the simple $ without affecting other parts, that is:

Copy code The code is as follows:

(function($){

// plugin code goes here, you can use $ safely.

})(jQuery);

Regarding the naming of the plugin’s js file, it is usually jquery.pluginname.js.

It is easy to extend jQuery tool functions (static functions). The following example implements a function that expands a number into a string of fixed digits.

Copy code 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 res = res.substr(-padding);
} else {
for (var n = 0; n res = fill res ;
}
return res;
}
})(jQuery);

It is equally easy to write a wrapper set. Here is a way to make the form elements only Reading method:

Copy code The code is as follows:

$.fn.setReadOnly = function( readonly) {
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0);
}

Write a small page for testing below. This page simulates the order submission page. If the user needs an invoice, he or she needs to fill in the invoice information, otherwise the invoice information cannot be filled in.

Copy code The code is as follows:

Order ID:

Invoice Required

Inovice Tilte:
Invoice Content: