How to write high-quality jquery code

Presumably everyone is not unfamiliar with jquery, the most popular JavaScript class library, and as long as the front-end developers are certainly more or less used or touched, in today's article, reference to some of the data and practical use efficiency, will introduce some of the principles of writing high-quality jquery code, Not only will tell you how to write, will also tell you why this writing, I hope everyone will feel helpful.

Note Adding the var keyword when defining jquery variables

This is not just jquery, all the JavaScript development process, you need to be aware of, please do not define as follows:

$loading = $(‘#loading‘); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的

Please use a var to define the variable

If you use multiple variables, define them as follows:

var page = 0,    $loading = $( ‘#loading‘ ),    $body = $( ‘body‘ );Do not add a var keyword to every variable unless you have severe obsessive-compulsive disorder. Define jquery variables

When declaring or defining variables, keep in mind that if you define a variable of jquery, add a $ symbol to the variable before it, as follows:

var$loading = $(‘#loading‘);

The benefit of defining this is that you can effectively prompt yourself or other users who are reading your code, which is a jquery variable.

Dom operations be sure to remember the cache

In the development of jquery code, we often need to manipulate dom,dom operations as a process that consumes resources very often, and many people like to use jquery in this way:

$( ‘#loading‘ ).html( ‘完毕‘ ); $( ‘#loading‘ ).fadeOut();The code does not have any problems, you can also run the results, but note that each time you define and call $ (' #loading '), the actual creation of a new variable, if you need to reuse, remember to define a variable, so that you can effectively cache the contents of the variable, as follows: var $loading = $( ‘#loading‘ ); $loading.html( ‘完毕‘ );$loading.fadeOut();This will make the performance better. Using chained operations

The above example, we can write a little more concise:

var $loading = $( ‘#loading‘ ); $loading.html( ‘完毕‘ ).fadeOut();Thin jquery Code

Try to integrate some code together, so do not encode:

// ！！反面人物$button.click(function(){      $target.css( ‘width‘ , ‘50%‘ );      $target.css( ‘border‘ , ‘1px solid #202020‘ );      $target.css( ‘color‘ , ‘#fff‘ ); });It should be written like this: $button.click( function (){      $target.css({ ‘width‘ : ‘50%‘ , ‘border‘ : ‘1px solid #202020‘ , ‘color‘ : ‘#fff‘ }); });Avoiding the use of global type selectors

Do not write in the following ways:$(‘.something > *‘);

This is better written:$(‘.something‘).children();

Do not overlay multiple IDs

Do not write as follows:$(‘#something #children‘);

That's enough:$(‘#children‘);

Multi-use logic judgment | | or && to speed up

Do not write as follows:

if (!$something) {      $something = $( ‘#something ‘ ); }This writing performance is better: $something= $something|| $( ‘#something‘ );Try to use less code

Instead of writing this:if(string.length > 0){..}

Why not write like this:if(string.length){..}

Try to use the. On method

If you are using a newer version of the JQuery class library, use. On, and any other method is finally implemented using. On.

Try to use the latest version of jquery

The latest version of jquery has better performance, but the latest version may not support IE6/7/8, so you need to choose for yourself.

Try to use native JavaScript

If the functionality provided by jquery can be implemented using native JavaScript, it is recommended to use native JavaScript.

How to write high-quality jquery code (GO)