jQuery Plug-in Development Guide: Creating Reusable Components

Core points:

• Create jQuery plug-in allows developers to create components that can be reused on any web page, reducing the risk of function name conflicts. The plug-in uses the fn function definition of jQuery. The method added to the jQuery library will pass the jQuery object as the this object of JavaScript.
• When developing jQuery plug-ins, parameter processing is very important. To avoid complex parameter processing, pass a single JSON object instead of multiple parameters. You can use the extend function of jQuery to merge default parameters and user parameters.
• Ensure that the method returns this to allow other functions to make chained calls, a key feature of jQuery called "chained calls". The plugin should be saved with the .js extension and included in the HTML page after the jQuery library is loaded.

jQuery is the most popular JavaScript library, which many websites use to achieve dynamic effects and Ajax functionality. However, relatively few developers are delving into plugin development. This tutorial will create a simple plugin to explain its basics. Our code will invert text from one or more selected nodes – view the demo page.

Why create jQuery plugin?

In short: reuse. By extending jQuery, you can create components that can be reused on any web page. Your code is encapsulated and it is unlikely that you will use the same function name elsewhere.

How does jQuery work

In the core part, jQuery receives a DOM element or a string containing a CSS selector. It returns a jQuery object, which is an array-like collection of DOM nodes. Then one or more methods can be called in a chain to this group of nodes, for example:

// 將所有 <p> 標簽的顏色設置為紅色
$("p").css("color", "red");</p>

Note: Although the jQuery library is called "jQuery", "$" is a shortcut variable that references it. Note that other libraries may occupy "$".

How does jQuery plugin work

jQuery allows adding methods to its libraries. When these methods are called, the jQuery object is passed as a this object of JavaScript. The DOM node can be operated as needed, and the method should return this so that other functions can be called chained. Our sample plugin will be called using the following code:

// 反轉所有 <p> 標簽中的文本
$("p").reverseText();</p>

We will also add two optional parameters: minlength and maxlength. If these two parameters are defined, the string length must be between these two limits in order to be reversed.

Plugin Statement

Plugin uses jQuery's fn function definition, for example:

// 將所有 <p> 標簽的顏色設置為紅色
$("p").css("color", "red");</p>

Using "jQuery" instead of "$" ensures that it does not conflict with other JavaScript libraries. All our internal code should also refer to "jQuery" instead of "$". However, we can use anonymous functions to save some input and reduce file size:

// 反轉所有 <p> 標簽中的文本
$("p").reverseText();</p>

This function runs immediately and passes jQuery as a parameter named "$". Since "$" is a local variable, we can assume that it always references the jQuery library, rather than the first other library to get the global "$" variable.

Plugin parameters

Our plugin requires two parameters: minlength and maxlength. The easiest way is to define them as function parameters, for example:

jQuery.fn.reverseText = function(params) { ... };

But what if we decide to add more parameters later? Our plugin may have dozens of options – parameter processing can quickly become complicated. As an alternative, we can pass a single JSON object, for example:

(function($) {
    $.fn.reverseText = function(params) { ... };
})(jQuery);

The first line of the function should define a set of default parameters and then override the

parameters with any user-defined value reverseText. jQuery's function can help us deal with this problem: extend

Therefore, unless the call code overwrites these values,

(function($) {
    $.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// 示例
$("p").reverseText(0, 100);

is 0 and

is 99999. params.minlength params.maxlength

Plugin code

Now we can write our main plugin code:

Explanation:

(function($) {
    $.fn.reverseText = function(params) { ... }
})(jQuery);

// 示例
$("p").reverseText( { minlength: 0, maxlength: 100 } );

Functions traverse all jQuery DOM nodes and call an anonymous function.
1. this.eachIn the function, "this" contains a single node. A jQuery node collection is assigned to
so that we can run the jQuery method.
2. $tVariable
is assigned as a text string in the DOM node.
3. Set to an empty string. origText newTextIf the length of
is between
4. and origText, loop creates an inverted text string in params.minlength. Then update the DOM node accordingly. params.maxlength newText

Don't break the chain call!

Finally, we should remember to return the jQuery object so that other methods can be called chained:

// 合并默認參數和用戶參數
params = $.extend( {minlength: 0, maxlength: 99999}, params);

Full code

Our plugin code is now completed:

Save this file as

// 遍歷所有節(jié)點
this.each(function() {

    // 將單個節(jié)點表示為 jQuery 對象
    var $t = $(this);

    // 查找文本
    var origText = $t.text(), newText = '';

    // 文本長度是否在定義的限制內？
    if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {
        for (var i = origText.length; i--; ) newText += origText.substr(i, 1);
        $t.text(newText);
    }

});

. We can then include the jQuery library in any HTML page after it is loaded, for example:

jquery.reversetext.js

The list in this page now reverses the text in the first and third bullets (remember, the first item starts with 0):

return this;

Resources:

• View plugin demo page
• View plugin JavaScript code
• Download plugins and sample code

You should now have a good understanding of jQuery plug-in development. The SitePoint JavaScript forum is also a great resource for seeking help and advice. Coming soon: A new three-part tutorial on how to build useful page components into jQuery plugins.

(The FAQ part in the original document is omitted here because the content of this part does not match the pseudo-original requirements and is too long.)

The above is the detailed content of How To Develop a jQuery Plugin. For more information, please follow other related articles on the PHP Chinese website!