10 Tips for Developing Better jQuery Plugins

Excellent jQuery plug-ins are popular among tens of thousands of web developers around the world, while those with poor designs are quickly forgotten. This article provides some tips to help you develop better jQuery plugins and enhance their influence.

Key points:

• Make sure your jQuery plugin is chain-causable by returning the jQuery object that calls it, allowing multiple jQuery methods to be linked.
• Provides default settings for your jQuery plugin, allowing users to customize according to their own needs, and considers supporting HTML parameters for easy use.
• Upload your jQuery plugin to codebases such as GitHub, Google Code, and jQuery plugin directories for promotion, and be ready to provide support and necessary updates.

1. Keep the integrity of chain calls

Unless your plugin returns a value, the last line of the plugin function must be:

return this;

This ensures that method calls can be made in chains, for example:

$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();

2. Simplified use

In most cases, your plugin should work properly without the developer looking up the documentation, setting options, or editing the plugin code. If it is a visual widget, developers should not need to edit any JavaScript code. You can simply provide HTML with class/ID, which will automatically start your code, for example:

<p>My content</p>

Your plug-in can be initialized by itself, for example:

$(function() {
    $("section.myjqWidget").myjqWidget();
});

3. Use appropriate naming and version control number

The jQuery plug-in is numerous. A name like "tab" is likely to have been used. While this is not always a problem, use of vague or potentially conflicting names should be avoided. Version numbers are also important, especially when developers report issues.

4. Using closure

Don't rely on $ to quote jQuery. If the developer installed other libraries, it might have been fetched before jQuery is loaded. The easiest way to solve this problem is to pass jQuery as the $ parameter of an anonymous self-start function, for example: $

(function($) {
    // 此处的代码可以使用$来引用jQuery
})(jQuery);

5. Set the default parameters

Most plugins use JavaScript object literal notation to set parameters, for example:

$("#select").MyPlugin({opt1: 1, opt2: 2, opt3: "three"});

This has several advantages: the parameters are easy to read, can be arranged in any order or can be omitted altogether. However, you should set default values ​​in the plugin code and overwrite them accordingly, for example:

$.fn.PlugIn = function(opts) {
    // 默认配置
    var config = $.extend({}, {
        opt1: 1,
        opt2: 2,
        opt3: 3,
        opt4: 4,
        opt5: 5
    }, opts);
    // ...
};

Your plugin can use codes like

to reference parameters. config.opt1

6. Support HTML parameters

Ideally, HTML widgets should be able to set parameters without the need for developers to change JavaScript code. You might consider using HTML5 data attributes, for example:

return this;

These can be accessed through jQuery's data() method: .data("opt1").

7. Writing code documentation

Add a concise comment on the top of the plugin, description:

• Plugin name and version
• Plugin Functions
• Usage Examples
• Parameters
• Contact and support links

If the plugin is particularly complex, you can consider a separate README file.

8. Try your plug-in thoroughly

Test it. Then test it again. Test in all browsers. There may be issues that you cannot fix, such as IE6 compatibility issues. It doesn't matter, but it's just mentioned in your documentation.

9. Use good templates

The following is the template code I used when creating a new plugin:

$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();

It provides a good starting point:

• Plugin is wrapped in a closure.
• It sets default options, which are overwritten by plugin parameters.
• Each selected element is passed as a jQuery object to the DoSomething function.
• Contains return this;.
• Auto-start code is provided at the end.

10. Promote your plug-in

If you want your plugin to be used by developers, upload it to codebases such as GitHub, Google Code, and jQuery plugin directories. Create a demo page, promote it in articles, and keep posting information on Twitter. Then prepare to support the plugin and update it if necessary. You'll get some stupid questions and weird feature requests, but this is all part of being a successful plugin author.

(The subsequent content, namely the FAQ part, is recommended to deal with it separately due to the length of the article. The FAQ part can be sorted into a new answer separately.)

The above is the detailed content of 10 Tips for Developing Better jQuery Plugins. For more information, please follow other related articles on the PHP Chinese website!