jQuery plugin development mode

In the process of software development, certain design patterns are needed to guide development. With patterns, we can better organize our code and learn a lot of good practices from these patterns summarized by predecessors. According to the description of jQuery advanced programming by



Brothers Education (www.lampbrother.net ), there are three main ways to develop jQuery plug-ins: extend jQuery through $.extend() Add new methods to jQuery through $.fn Apply through $.widget() jQuery UI Component Factory Method Creation Usually we use the second method for simple plug-in development, which is relative to the third method. The third method is used to develop more advanced jQuery components. The components developed in this mode have many built-in features of jQuery, such as automatic saving of plug-in status information, various common methods about plug-ins, etc. It is very intimate, here Not to elaborate. The first way is too simple, just add a static method to the jQuery namespace or understand it as jQuery. So we call the function added via $.extend() directly via the $ symbol ($.myfunction()) without selecting the DOM element ($('#example').myfunction()). See the example below. $.extend({ sayHello: function(name) { console.log('Hello,' + (name ? name :'Dude') + '!'); }})$.sayHello(); //call $. sayHello('Wayou'); //Call with parameters In the above code, pass $. extend() adds a sayHello function to jQuery, which is then called directly via $. At this point you can think that we have completed a simple jQuery plugin.



























But as you can see, it is convenient to define some helper methods this way. For example, a custom console, which outputs information in a specific format, can be called anywhere in the program through jQuery after it is defined once.



$.extend({ log: function(message) { var now = new Date(), y = now.getFullYear(), m = now.getMonth() + 1, //! Months in JavaScript start from 0 d = now.getDate(), h = now.getHours(), min = now.getMinutes(), s = now.getSeconds(), time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s; console.log(time + ' My App: ' + message); }})$.log('initializing...'); // call



but this This method cannot take advantage of the convenience brought by jQuery's powerful selectors. To deal with DOM elements and better apply plugins to selected elements, you still need to use the second development method. Most of the plugins you see or use are also developed in this way.



Plug-in development



Let 's look at the second way of jQuery plug-in development.



Basic method Let's take a



look at its basic format:

$.fn.

Basically just add a method to $.fn with the name of our plugin. Then our plugin code is expanded in this method.



For example, if we turn the color of all links on the page to red, we can write this plugin like this:

$.fn.myPlugin = function() { //In this case, this refers to the element selected with jQuery //example :$( 'a'), then this=$('a') this.css('color', 'red');}

Inside the function defined by the plugin name, this refers to when we call the plugin, use The element selected by the jQuery selector is generally a collection of jQuery type. For example, $('a') returns a collection of all a tags on the page, and this collection is already a jQuery wrapper type, that is, other methods of jQuery can be called directly when operating on it without needing to Wrap it up with dollar signs.



So in the above plugin code, we call jQuery's css() method on this, which is equivalent to calling $('a').css().



It is important to understand what this means in this place. In this way, you will know why you can use the jQuery method directly, while in other places this refers to different, and we need to repackage it with jQuery to call it, which will be discussed below. It is easy for beginners to be confused by the value of this, but it is not difficult to understand.



Now you can go to the page to try our code, put a few links on the page, and the link font will turn red after calling the plugin.



<ul> <li> <ahref="http://www.webo.com/liuwayong">My Weibo</a> </li> <li> <ahref="http://http:// www.cnblogs.com/Wayou/">My Blog</a> </li> <li> <ahref="http://wayouliu.duapp.com/">My Site</a> </ li></ul><p>This is a p tag not a tag, I will not be affected</p><scriptsrc="jquery-1.11.0.min.js"></script><scriptsrc="jquery .myplugin.js"></script><scripttype="text/javascript"> $(function(){ $('a').myPlugin(); })</script>



Next, process it in the plugin code Each specific element, rather than a collection, so that we can operate on each element accordingly.



We already know that this refers to the collection returned by jQuery selectors, so by calling jQuery's . The each() method can process each element in the collection, but at this point it should be noted that inside the each method, this refers to a common DOM element. If you need to call the jQuery method, you need to use $ to Repackage it.



For example, now we want to display the real address of the link in each link, first traverse all a tags through each, and then get the value of the href attribute and add it to the link text.



After the change our plugin code is:



$.fn.myPlugin = function() { //In it, this refers to the element selected with jQuery this.css('color', 'red'); this.each(function() { //For each $(this).append(' ' +$(this).attr('href')); }))}

The calling code is still the same, we call this plugin by selecting all the a tags of the page



to At this point, you can already write simple jQuery plugins. Isn't it that difficult.


jQuery plugin development mode