Do you really need a jquery plugin?

The jquery plugin provides a great way to save time and simplify development, avoiding programmers writing each component from scratch. However, the plug-in also introduces an unstable factor into the code. A good plug-in saves countless development time, and a bad plug-in can cause errors to be repaired longer than the actual time the component was written from scratch.

Fortunately, people often have different kinds of plugins to choose from. However, even if you use only one, you have to figure out whether it is worth using. Never introduce the wrong code in your code base.

Do you need a plugin?

The first thing to figure out is whether you need a plugin. If you don't, you can save your file size and save yourself time.

1. Is it better to write for yourself?

If the function is simple, write it yourself. jquery's plugins often bundle various features, which can be overkill. In this case, any simple function of handwriting is often more meaningful. Of course, the amount of work involved should be measured.

For example, if you need more advanced features, the JQuery UI accordion is a good choice. But if you just need to open and close the panel. If you have not yet used the jquery UI on your site, consider jquery's slidetoggle () or animate ().

2. Are you already using a similar plugin?

It's tempting to find a plugin that doesn't solve everything you need to find another plugin to make up. But in the same application including two similar plugins, it must be a bloated JavaScript. Can you find a plugin that includes all of your needs? If not, can you expand one of the plugins to reach everything you need to cover? Similarly, in deciding whether to extend a plug-in, the tradeoff is the benefits and development time.

For example, jquery's Lightbox is a great way to display pop-up photos in a gallery, and Simplemodal is a great way to display the pattern information to the user. But why do both of these ways your site are used? You can easily extend a cover both of these requirements. Better yet, find a plugin that covers everything, such as Colorbox.

3. Need JavaScript?

In some cases, JavaScript is not necessary. CSS pseudo-selectors, such as the hover and CSS3 Transitios features, can cover a variety of dynamic effects, much faster than JavaScript solutions. In addition, many plug-ins offer only styles, and it may feel better to use markup and CSS.

JQuery ToolTip is essential if you need to show dynamic content and require conditional hints. However, if you need to hint only a few places, it is best to use pure CSS (see this example). Static tip information, you can further take advantage of the CSS3 transition to animate, but don't forget that the animation will only work in some browsers.

When reviewing any plugins, a series of warning signs indicates that the plug-in is of poor quality. Here, we'll look at all aspects of the plugin, from JavaScript to CSS to mark-up. We'll even consider how to publish plugins. Any warnings in the plugin will exclude your plugin from consideration. If you're lucky enough to have multiple plugins to choose from, these warning rules can help you narrow down your choices. However, even if there is only one choice, if you see too many warnings or give up good. You can reduce your headache ahead of time.

4. Strange options or parameter syntax

When using jquery, the development engineer is concerned with how the function accepts parameters. If a plug-in developer uses special syntax, there's reason to believe they don't have much programming experience with jquery or JavaScript.

Some plugins accept a jquery object as a parameter, but do not allow chained use of the object, for example, $.myplugin ($ (' a ')); Myplugin (' a '); This is a big warning.

Code:

12345678910111213141516171819

$(‘.my-selector‘).myPlugin({opt1 : 75,opt2 : ‘asdf‘});$(‘.my-selector‘).myPlugin({opt1 : 75,opt2 : ‘asdf‘});$.myPlugin({opt1 : 75,opt2 : ‘asdf‘}, $(‘.my-selector‘));$.myPlugin({opt1 : 75,opt2 : ‘asdf‘}, $(‘.my-selector‘));

5. Little or no documentation

Without documentation, the use of a plugin is very difficult because it is the first place to look for answers to the questions. Files are available in various formats, the appropriate files are the best, but good code comments can be as good. If you don't have a document, or just a simple example of a blog post, you might want to consider other options. Good documentation indicates that the plugin's author cares about users like you. It also shows that they have studied other plugins and know the value of good documents.

6. Poor record of support

Lack of support means that it is difficult to get help when a problem is found. More interesting, it indicates that the plugin has not been updated for a while. One of the benefits of software open source is that it attracts a lot of eyeballs and helps you debug and improve. If the author does not talk about these people, the plugin will not be updated.

When did you consider the last time the plugin was updated? When was the last time you answered your message? While not all plugins need to have a strong support system like the jquery plug-ins site. Beware of plugins that have never been updated.

Have a history of technical support records, the author responds to the bug or will be strong demand, is a green sign. Having a support forum further indicates that the plugin is well supported, even if not the author has at least a forum for you to solve the problem.

7. No compression version

Although a rather small warning, if the creator of the plugin does not provide a compressed version of the source code, then they may not be too concerned with performance. Of course, you can compress yourself, but this warning is not a matter of wasting time: it implies that the plugin may contain more serious performance issues.

On the other hand, providing compression, packaging, and gzipped version downloads is a sign.

8. Need for Strange mark-up

If a plugin needs to be mark-up, then this mark-up should be of high quality. It should conform to semantic semantic sense and be flexible enough. Apart from the bad front-end technology, strange mark-up can make integration even more difficult. A good plug-in inserts almost anything that covers any of your commonly used mark-up; using a bad plugin is better than jumping the ring of fire.

In some cases, strict mark-up is necessary, so it should be allowed to be used within a certain range. Basically, more specific features are needed for more specific mark-up. The completely flexible mark-up is the simplest integration from any naturally falling jquery choice.

9. Excessive use of CSS

Many of the jquery plugins include the quality of css,css and the importance of JavaScript is the same. Too much CSS is definitely a bad sign. But what is "excessive" depends on the purpose of the plugin. Focus on display, such as Lightbox or UI plug-ins, more CSS than simple animation-driven plugins. Good CSS style, make the program easier to modify to suit your theme style.

10. No one else uses it

JQuery has a huge number of users, and the most respectable plugins will probably have them write about something, even if it's a "jquery [Fill in the blank]". For example, you make a simple google search plugin, your search results are very few, you may want to consider other options, unless the plugin is brand new, or you will find a professional writing plug-in engineers to modify it.

11. Use and observation

The best way to test the plug-in is simply to run it on the server and see the results. First, does it undermine some of the rules? Be sure to look at JavaScript code snippets. If the plug-in includes a style sheet, look at the layout and style errors of each page.

Also, what is the effect of the plugin? If it runs slowly or if the page loads quite a lag, consider other plugins.

12. Using Jsperf for performance evaluation

Increase your plugin performance to a new level and test with Jsperf. Benchmarking runs a set of operations multiple times, and then returns the average execution time. Jsperf provides an easy way to test how fast a plug-in is running. This is the important way to pick two almost identical plugins.

13. Cross-browser testing

If a plugin has a lot of CSS, be sure to test the style in all browsers you want to support. Remember that CSS can come from external style sheets and internal JavaScript.

Even if the plugin doesn't have any CSS, check for JavaScript errors on all browsers anyway (at least in the earliest version of IE that you support). The core of jquery has dealt with most cross-browser issues, but plugins tend to use some amount of pure javascript, which tends to break the rules of old browsers.

14. Unit Testing

Finally, take a closer look at cross-browser testing – unit testing. Unit testing is a simple way to test component plug-ins, and supports any browser or platform. If the plugin author's download package already includes unit tests, you can bet that the plugin will work across all cross-browser and platform. Unfortunately, very few plugins include unit test data, but that doesn't mean you can't use Qunit plug-in to perform your own unit tests.

Test whether the plug-in's method returns the expected results with minimal settings. As long as one test fails, don't waste your time on this plugin. In most cases, performing unit tests is a bit of a waste of time, but Qunit can help you determine the quality of your plug-ins.

Conclusion

When evaluating the quality of a jquery plug-in, evaluate the code quality first. is JavaScript optimized and error-free? Has CSS been adjusted and valid? is the naming of mark-up semantic and flexible enough? These problems boil down to the most important question: Is this plugin easy to use?

The core of jquery is optimized and error-checked, supporting not only core team members, but also the entire jquery community. While it is unfair to use the same standards to measure jquery plugins, there should be at least some of the same review criteria.

Do you really need a jquery plugin?