14 aspects that affect jquery use _jquery

Fortunately, people usually have a variety of different plug-ins to choose from. But even if you only use one, make sure it's worth using. Never introduce the wrong code into your code base.

Do you need a plugin?

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

　　1. Is it better to write by yourself?

If the function is simple, write it yourself. jquery Plug-ins are often bundled with a variety of 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 functionality, 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 and find another plugin to make up for it. But in the same app that includes two similar plug-ins, it's definitely a bloated JavaScript. Can you find a plugin that includes all of your needs? If not, can you expand one of the plug-ins 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 light box is a great way to display pop-up photos in a gallery, and Simplemodal is a great way to display schema information to the user. But why are both of these ways used by your site? You can easily extend a coverage of both requirements. Better yet, find a plugin that covers everything, such as Colorbox.

　　3. Need JavaScript?

In some cases, JavaScript is not necessary. CSS's pseudo selectors, such as hover and CSS3 Transitios functions, can cover a variety of dynamic effects, much faster than JavaScript solutions. In addition, many plug-ins provide only styles; it feels better to use markup and CSS.

If you need to display dynamic content and require conditional hints, jQuery tooltip is essential. However, if you need to be prompted with only a few places, it is best to use pure CSS (see this example). Static hint information, you can further use the CSS3 transition to animate, but do not forget that the animation will only be valid in some browsers.

When reviewing any Plug-ins, a series of warning signs indicate that the quality of this plugin is poor. Here, we'll look at the various aspects of plug-ins, from JavaScript to CSS to mark-up. We'll even consider how to publish Plug-ins. Any warnings in the plugin will exclude your plugin from consideration. If you're lucky and have multiple plug-ins to choose from, these warning rules can help you narrow your options. However, even if there is only one choice, if you see too many warnings or give up the good. Can reduce their headaches in advance.

　　4. Strange options or parameter syntax

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

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

Code:

$ ('. 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 questions. Files have a variety of 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 published on a blog, 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 plug-ins and know the value of good documents.

　　6. Poor support record

Lack of support means that finding problems will be difficult to get help with. What is more interesting is that it indicates that the plugin has not been updated for a while. One advantage of software open source is that it attracts a lot of eyeballs and helps you debug and improve. If the author does not mention these people, the plugin will not be updated.

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

With historical technical support records, the author responds to bugs or will be strong in demand, is a green flag. Having a support forum further indicates that the plugin is well supported, even if not the author at least has a forum for you to solve the problem.

　　7. No compression version

Although a rather small caveat, if the creator of the plugin does not provide a compressed version based on the source code, they may not be too concerned with performance. Of course, you can compress it yourself, but this warning is not about wasting time: This suggests that plug-ins may contain more serious performance problems.

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

　　8. Need a strange mark-up

If a plugin needs to be mark-up, then this mark-up should be of high quality. It should conform to the semantic semantic sense and be flexible enough. In addition to bad front-end technology, strange mark-up can make integration more difficult. A good plugin inserts almost anything that covers any of your commonly used mark-up; use a bad plugin rather than jump the ring of fire.

In some cases, strict mark-up is necessary, so it should be allowed within a certain range of use. Basically, more specific features are needed for more specific mark-up. Fully flexible mark-up is the simplest integration from any natural drop in jquery selection.

　　9. Excessive use of CSS

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

　　10. No one else uses it

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

　　11. Use and observation

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

In addition, what is the effect of the plug-in? If it is running slowly or the Web page is loading rather late, consider other plug-ins.

　　12. Use Jsperf for performance appraisal

Improve your plug-in performance to a new level and use Jsperf for testing. Benchmarking will run a set of operations multiple times, and then return the average execution time. Jsperf provides an easy way to test how fast a plug-in can run. This is an important way to pick two almost identical plug-ins.

　　13. Cross-browser testing

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

Even if the plugin does not have any CSS, you should check for JavaScript errors (at least in the earliest versions of IE browsers you support) on all browsers anyway. The core of jquery has dealt with most cross-browser issues, but plug-ins tend to use some amount of pure javascript, which often breaks the rules of old browsers.

　　14. Unit Test

Finally, consider cross-browser testing – unit testing. Unit tests are a simple way to test component Plug-ins and support 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 browsers and platforms. Unfortunately, very few plug-ins include unit test data, but that doesn't mean you can't use Qunit plug-in to perform your own unit tests.

With a minimal setting, test whether the plug-in's methods return the expected results. As long as there is a test failure, do not waste your time on this plugin. In most cases, it's a waste of time to perform unit tests, but Qunit can help you determine the quality of your plug-in.

Conclusion

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

The core of jquery is optimized and error-checked, and it is supported not only by core team members, but also by the entire jquery community. While it is unfair to measure jquery plug-ins with the same criteria, there should be at least some of the same review criteria.