[Specification] Front-end encoding specification-jquery specification, front-end jquery

[Specification] Front-end encoding specification-jquery specification, front-end jquery
Use single quotes

Not recommended

$("div").html("
Recommendation
$('div').html('');
Cache variable
DOM traversal is expensive, so we try to cache elements that will be reused.
Not recommended
var h = $('#element').height();$('#element').css('height', h - 20);
Recommendation
var $element = $('#element'),    h = $element.height();$element.css('height', h - 20);
Avoid global variables
Jquery is the same as javascript. In general, it is best to ensure that your variables are within the function scope.
Not recommended
$element = $('#element');h = $element.height();$element.css('height',h - 20);
Recommendation
var $element = $('#element'),    h = $element.height();$element.css('height',h - 20);
Use the camper name
Use the camper name and add$As a prefix to facilitate the identification of jquery objects.
Not recommended
var first = $('#first'),    second = $('#second'),    value = $first.val();
Recommendation
var $first = $('#first'),    $second = $('#second'),    value = $first.val();
Use Single var mode
Add multiplevarStatement is merged into a statement. We recommend that you put unassigned variables behind it.
var $first = $('#first'),    $second = $('#second'),    value = $first.val(),    k = 3,    cookiestring = 'SOMECOOKIESPLEASE',    i,    j,    myArray = {};
Use on to handle events
In the new jquery versionon('click')Used to replace a similarclick()Such a function. In earlier versionson()Yesbind(). Since jquery 1.7,on()Is the preferred method for appending event handlers. For consistency, you can simply useon()Method.
Not recommended
$first.click(function(){    $first.css('border', '1px solid red');    $first.css('color', 'blue');});$first.hover(function(){    $first.css('border', '1px solid red');});
Recommendation
$first.on('click', function(){    $first.css('border', '1px solid red');    $first.css('color', 'blue');});$first.on('hover', function(){    $first.css('border', '1px solid red');});
Simplified jquery
In general, it is best to merge attributes as much as possible.
Not recommended
$first.click(function(){    $first.css('border', '1px solid red');    $first.css('color', 'blue');});
Recommendation
$first.on('click', function(){    $first.css({        'border':'1px solid red',        'color':'blue'    });});
Chain Operation
Jquery can easily implement chained operations.
Not recommended
$second.html(value);$second.on('click', function(){    alert('hello everybody');});$second.fadeIn('slow');$second.animate({height: '120px'}, 500);
Recommendation
$second.html(value).on('click', function(){    alert('hello everybody');}).fadeIn('slow').animate({height: '120px'}, 500);
Maintain code readability
While streamlining code and using the chain, it may make the code hard to read. Adding indentation and line breaks can have a good effect.
Not recommended
$second.html(value).on('click', function(){    alert('hello everybody');}).fadeIn('slow').animate({height: '120px'}, 500);
Recommendation
$second.html(value)    .on('click', function() {        alert('hello everybody');    })    .fadeIn('slow')    .animate({        height: '120px'    }, 500);
Select short-circuit evaluate
Short-circuit evaluate is a left-to-right evaluate expression, using&&Or||Operator.
Not recommended
function initVar($myVar) {    if (!$myVar) {        $myVar = $('#selector');    }}
Recommendation
function initVar($myVar) {    $myVar = $myVar || $('#selector');}
Avoid common Selector
Not recommended
$('.container > *');
Recommendation
$('.container').children();
Cache parent Element
As mentioned above, DOM traversal is an expensive operation. A typical practice is to cache parent elements and reuse them when selecting child elements.
Not recommended
var $container = $('#container'),    $containerLi = $('#container li'),    $containerLiSpan = $('#container li span');
Recommendation
var $container = $('#container '),    $containerLi = $container.find('li'),    $containerLiSpan= $containerLi.find('span');
Avoid implicit common Selector
The common selector is sometimes implicit and is not easy to find.
Not recommended
$(':button');
Recommendation
$('input:button');
Optimized Selection character
For example, the id selector should be unique, so there is no need to add additional selector.
Not recommended
$('div#myid');$('div#footer a.myLink');
Recommendation
$('#myid');$('#footer .myLink');
Avoid Multiple id delimiters
It is emphasized that id delimiters should be unique and no additional delimiters need to be added, and multiple descendant id delimiters are not required.
Not recommended
$('#outer #inner');
Recommendation
$('#inner');
Memorizing skills
You may not have any experience in using jquery methods. You must view more documents. There may be a better or faster way to use it.
Not recommended
$('#id').data(key, value);
Recommendation
$.data('#id', key, value);
Stick to the latest version
The new version is usually better: lighter and more efficient. Of course, you need to consider the code compatibility you want to support. For example, version 2.0 does not support ie 6/7/8.
Abandon the discard Method
It is very important to pay attention to the obsolete methods of each new version and try to avoid using these methods.
Not recommended
$('#stuff').live('click', function() {    console.log('hooray');});
Recommendation
$('#stuff').on('click', function() {    console.log('hooray');});
Use CDN
CDN ensures that the cache closest to the user is selected and responds quickly. (CDN provided on the official jquery website is recommended ).
Combine jquery and javascript native code if necessary
As mentioned above, jquery is javascript, which means that what jquery can do can also be done using native code. The readability and maintainability of native code may be inferior to that of jquery, and the code is longer. But it also means more efficient (usually closer to the lower-Layer Code, the lower the readability, the higher the performance ). Remember that no framework can be smaller, lighter, and more efficient than native code.
References

 

 
  
Http://www.css88.com/archives/5240