How to Write high-quality jQuery code

Surely everyone is familiar with jQuery, the most popular javascript class library, and as long as it is a front-end developer, it must have been more or less used or used. In this article, we will introduce some principles for writing high-quality jQuery code. We will not only tell you how to write, but also tell you why, and hope everyone will feel helpful.

This is not just jQuery. You must pay attention to it during javascript development,Please do notIt is defined as follows:

1	$loading = $('#loading'); // This is a global definition. If you reference the same variable name without knowing where it is, you will be depressed.

If you define this as good luck, there may be no problems, or there will be a problem that will definitely let you debug for a week and then swear by the mother for a month.

Use a var to define variables

If you use multiple variables, define them as follows:

123	var page = 0,  $loading = $('#loading'),  $body = $('body');

Do not add a var keyword to every variable unless you have serious obsessive-compulsive disorder.

Define jQuery Variables

When declaring or defining a variable, remember to add a $ symbol before the variable if you are defining the jQuery variable, as shown below:

1	var $loading = $('#loading');

The benefit is that you can effectively prompt yourself or other users who read your code. This is a jQuery variable.

Make sure to remember the cache for DOM operations)

In jQuery code development, we often need to operate the DOM. DOM operations are a process that consumes a lot of resources, and many people usually like to use jQuery like this:

12	$('#loading').html('Complete');$('#loading').fadeOut();

The Code does not have any problems, and you can run the results normally, but note that each time you define and call $ ('# loading'), a new variable is actually created, if you need to reuse the variable, remember to define it into a variable. This effectively caches the variable content as follows:

12	var $loading = $('#loading');$loading.html('Complete');$loading.fadeOut();

This will provide better performance.

Use chained operations

In the example above, we can write more concisely:

12	var $loading = $('#loading');$loading.html('Complete').fadeOut();

Is this easier to write? However, note that chain operations should not be too many strings. If there are too many strings, it is a huge challenge for your own debug eyesight.

Simplified jQuery code

Try to integrate some code together. Do not encode it like this:

12345

//!! Negative $ button. click (function (){    $target.css('width','50%');    $target.css('border','1px solid #202020');    $target.css('color','#fff');});

It should be written as follows:

123	$button.click(function(){    $target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});});

Avoid using global Selector

Do not write as follows:

1	$('.something > *');

The writing is better:

1	$('.something').children();

Do not overlay multiple IDs

Do not write as follows:

1	$('#something #children');

This is enough:

1	$('#children');

Multi-purpose logic judgment | or & to speed up

Do not write as follows:

123	if(!$something) {    $something = $('#something ');}

The writing performance is better:

1	$something= $something|| $('#something');

Try to use less code

Writing like this

1	if(string.length > 0){..}

It is better to write as follows:

1	if(string.length){..}

Use the. on method whenever possible

If you use a newer version of The jQuery class library, use. on. Any other method is implemented using. on.

Use the latest jQuery version whenever possible

The latest version of jQuery has better performance, but the latest version may not support ie6/7/8, so you need to choose your own based on the actual situation.

Try to use native Javascript

If you can use native Javascript to implement the functions provided by jQuery, we recommend that you use native javascript.

The above are all jQuery code writing skills. If you have other writing skills, please share with us!