jQuery编程的规范与最佳实践指南

1，变量缓存

dom搜索是比较昂贵的，所以记得用缓存功能

• // 垃圾代码
• h = $('#element').height();
• $('#element').css('height',h-20);

• // 优秀的代码 使用峰驼式命名变量。
• $element = $('#element');
• h = $element.height();
• $element.css('height',h-20);

2，不要使用全局变量

// 垃圾代码

$element = $('#element');

h = $element.height();

$element.css('height',h-20);

// 优秀代码

var $element = $('#element');

var h = $element.height();

$element.css('height',h-20);

3，使用匈牙利语法的变量，就是在变量前面加上美元符合，表示的是Jquery对象

// 垃圾代码

var first = $('#first');

var second = $('#second');

var value = $first.val();

// 优秀代码

var $first = $('#first');

var $second = $('#second'),

var value = $first.val();

4，变量定义尽量在一行，不要多行定义，建议把没有值的放在最后

var $first = $('#first'),

$second = $('#second'),

value = $first.val(),

k = 3,

cookiestring = 'SOMECOOKIESPLEASE',

i,

j,

myArray = {};

5，使用事件的时候，尽量用on

// 垃圾代码

$first.click(function(){

$first.css('border','1px solid red');

$first.css('color','blue');

});

$first.hover(function(){

$first.css('border','1px solid red');

})

// 优秀代码

$first.on('click',function(){

$first.css('border','1px solid red');

$first.css('color','blue');

})

$first.on('hover',function(){

$first.css('border','1px solid red');

})

6，不要用匿名函数来做事件的回调。匿名函数不易调试维护测试和复用

// 垃圾代码

$("#myLink").on("click", function(){...}); // 不要这样

// 优秀代码

function myLinkClickHandler(){...}

$("#myLink").on("click", myLinkClickHandler);

// 之后，让我们优雅地解除绑定

$("#myLink").unbind("click.mySpecialClick");

7，当选择某个元素的子元素的时候，尽量在后面选择，不要在前面选择其中选择

.对于异步动态加载的内容，最好使用代理来绑定事件处理程序。这样的好处是对于之后动态加载的元素事件同样有效。

$("#list a").on("click", myClickHandler); // BAD,

$("#list").on("click", "a", myClickHandler); // GOOD,

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

8，处理文档ready事件的回调也表用匿名函数，匿名函数不易调试维护测试和复用

// 糟糕的做法：

$(function(){ ... });

// 好的做法

$(initPage); // 抑或 $(document).ready(initPage);

function initPage(){

// 这里你可以进行程序的初始化了

}

9，进一步，最好也将ready事件的处理程序放到外部文件中引入到页面，而页面中内嵌的代码只需调用即可。

<script src="my-document-ready.js"></script>

<script>

// 初始化一些必要的全局变量

$(document).ready(initPage); // 抑或 $(initPage);

</script>

10，合并函数

// 垃圾代码

$first.click(function(){

$first.css('border','1px solid red');

$first.css('color','blue');

});

// 优秀代码

$first.on('click',function(){

$first.css({

'border':'1px solid red',

'color':'blue'

});

});

11，使用链式结构代码

// 垃圾代码

$second.html(value);

$second.on('click',function(){

alert('hello everybody');

});

$second.fadeIn('slow');

$second.animate({height:'120px'},500);

// 优秀代码

$second.html(value);

$second.on('click',function(){

alert('hello everybody');

}).fadeIn('slow').animate({height:'120px'},500);

$("#myLink")

.addClass("bold")

.on("click", myClickHandler)

.on("mouseover", myMouseOverHandler)

.show();

12，增强代码可读性

// 垃圾代码

$second.html(value);

$second.on('click',function(){

alert('hello everybody');

}).fadeIn('slow').animate({height:'120px'},500);

// 优秀代码

$second.html(value);

$second

.on('click',function(){ alert('hello everybody');})

.fadeIn('slow')

.animate({height:'120px'},500);

13，使用短路循环表达式，从左边优先匹配，最后到右边

// 垃圾代码

function initVar($myVar) {

if(!$myVar) {

$myVar = $('#selector');

}

}

// 优秀代码

function initVar($myVar) {

$myVar = $myVar || $('#selector');

}

14，使用简写

// 垃圾代码

if(collection.length > 0){..}

// 优秀代码

if(collection.length){..}

15，对元素进行大量操作时应选择拆卸，最后在组装在一起

// 垃圾代码

var $container = $("#container"),

$containerLi = $("#container li"),

$element = null;

$element = $containerLi.first();

//... a lot of complicated things

// 优秀代码

var $container = $("#container"),

$containerLi = $container.find("li"),

$element = null;

$element = $containerLi.first().detach();

//...a lot of complicated things

$container.append($element);

16，data技巧

// 垃圾代码

$('#id').data(key,value);

// 优秀代码

$.data('#id',key,value);

17，使用缓存父元素方法进行子查询

// 垃圾代码

var $container = $('#container'),

$containerLi = $('#container li'),

$containerLiSpan = $('#container li span');

// 优秀代码

var $container = $('#container '),

$containerLi = $container.find('li'),

$containerLiSpan= $containerLi.find('span');

18，避免通用选择器，尽量不要用*

// 垃圾代码

$('.container > *');

// 优秀代码

$('.container').children();

19，避免默认通用选择器

// 垃圾代码

$('.someclass :radio');

// 优秀代码

$('.someclass input:radio');

20，尽量用id选择器

复制代码

// 垃圾代码

$('div#myid');

$('div#footer a.myLink');

// 优秀代码

$('#myid');

$('#footer .myLink');

21，不要用多个id选择器

// 垃圾代码

$('#outer #inner');

// 优秀代码

$('#inner');

21，不要使用废弃的方法

// 垃圾代码 - live is deprecated

$('#stuff').live('click', function() {

console.log('hooray');

});

// 优秀代码

$('#stuff').on('click', function() {

console.log('hooray');

});

22、使用连接字符串或数组join()，然后再append()。请看

性能比较:
http://jsperf.com/jquery-append-vs-string-concat

// 不好

var $myList = $("#list");

for(var i = 0; i < 10000; i++){

$myList.append("<li>"+i+"</li>");

}

// GOOD

var $myList = $("#list");

var list = "";

for(var i = 0; i < 10000; i++){

list += "<li>"+i+"</li>";

}

$myList.html(list);

// EVEN FASTER

var array = [];

for(var i = 0; i < 10000; i++){

array[i] = "<li>"+i+"</li>";

}

$myList.html(array.join(''));

23.使用对象来传递参数

// 糟糕：调用了三次attr

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external");

// 不错，只调用了一次attr

$myLink.attr({ href: "#", title: "my link", rel: "external" });

26. 对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。

$(this).addClass("highlight")

.children("li").show().end()

.siblings().removeClass("highlight")

.children("li").hide();

27

window.onload和jquery $(document).ready(function(){ }) 比较（转）

window.onload是所有加载完后执行

$(document).ready(function(){ }) 是DOM结构加载完执行， 所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完

两者最大的区别，就是DOM加载完之后，不必再去等相应的图片文字视频等等内容加载完就可以执行JS代码了

--------------Ajax异步操作----------

1.不要用.getJson() 或 .get(),直接用直接用$.ajax() ，因为jQuery内部还是将前者转化为$.ajax()

2.表对HTTPS站点使用HTTP去发起请求，最好干脆就表指定（将HTTP或者HTTPS从你的URL中移除）

3.表在链接里面嵌参数，请使用专门的参数设置来传递

// 不易阅读的代码...

$.ajax({ url: "something.php?param1=test1&param2=test2", .... });

// 更易阅读...

$.ajax({ url: "something.php", data: { param1: test1, param2: test2 } });

4.尽量指明数据类型以便你自己清楚要处理什么样的数据（见下方会提到的Ajax模板）

5..使用Promise模式的元素事件同样有效

$.ajax({ ... }).then(successHandler, failureHandler);

// 抑或

var jqxhr = $.ajax({ ... });

jqxhr.done(successHandler);

jqxhr.fail(failureHandler);

6.标准的Ajax模板如下，查看官方案例

var jqxhr = $.ajax({

url: url, type: "GET", // 默认为GET,你可以根据需要更改

cache: true, // 默认为true,但对于script,jsonp类型为false,可以自行设置

data: {}, // 将请求参数放这里.

dataType: "json", // 指定想要的数据类型

jsonp: "callback", // 指定回调处理JSONP类型的请求

statusCode: { // 如果你想处理各状态的错误的话

404: handler404,

500: handler500 }

});

jqxhr.done(successHandler);

jqxhr.fail(failureHandler);