加载(js/jq)
1.尽量将JavaScript和jQuery代码放到页面底部。
2.兼容IE6 7 8 不要用2.x的版本
3.不要重复加载和多次加载
4、如果同时还使用了其他JS框架如wap端的Zepto，js框架中，有的也用了$符号，所以你就不要再用$来进行jQuery 编码了，而请用'jQuery'代替。并且调用$.noConflict()保证不会有冲突出现。
变量
1、jQuery类型的变量最好加个$前缀。
2、将常用的jQuery选择器返回的内容存进变量以便重用。
var $myDiv=$("#myDiv"); //多次使用的选择器，存成变量
$myDiv.click(function(){
...
});
3、使用驼峰命名。
选择器
1.尽量ID选择器。实际运用的是js的document.getElementById()，速度最快。
2.使用类选择器时不要指定元素的类型。
var $products=$("div.products");// 慢
var $products=$(".products");// 快
3.ID父亲容器下面查找子元素请用.find()方法，这样快。
$productIds=$("#products div.id"); //差
$productIds=$("#products").find("div.id"); //好
4.多级查找中，右边尽量指定得详细点而左边则尽量简单点。
$("div.data .gonzalez"); // 不好
$(".data td.gonzalez"); // 好
5.避免冗余。
$(".data table.attendees td.gonzalez"); //差
$(".data td.gonzalez")； // 去掉了中间的冗余
6.指定选择的上下文。
$('.class');
// 不好：遍历整个DOM查找.class
$(' .class ' , ' #class-container ' );
//好：在指定容器范围查找
7.避免使用万能选择器。
$( ' div.container > * ' ); //不好
$('.container').children(); //好
8.警惕隐式的万能选择器。省略的情况下其实使用的就是*号通配符。
$('div.someclass :radio'); //不好
$('div.someclass input:radio'); //好
9.ID已经表示唯一了
$('#outer #inner'); // 差
$('div#inner'); // 差
$('.outer-container #inner'); // 差
$('#inner'); // 好
DOM操作
1.操作元素前先将其拆分，然后贴回去。
var $myList = $("#list-container > ul").detach();
$myList.appendTo("#list-container");
2、使用连接字符串或数组join()，然后再append()。
// 不好
var $myList=$("#list");
for(var i=0;i<10000;i++){
$myList.append("<li>"+ i +"</li>");
}
// 好
var $myList=$("#list");
var list="";
for(var i=0;i<10000;i++){
list += "<li>"+i+"</li>";
}
$myList.html(list);
//更好
var $myList=$("#list");
var array=[ ];
for(var i=0;i<10000;i++){
array[i] = "<li>"+ i +"</li>";
}
$myList.html(array.join(''));
3、不要用缺失的元素
$("#nosuchthing").slideUp(); //差
var $mySelection = $("#nosuchthing");
if ( $mySelection.length ) {
$mySelection.slideUp();
} // 好
事件
1.一个页面只写一个文档ready事件的处理程序。这样代码既清晰好调试，又容易跟踪代码的进程。
2.不要用匿名函数来做事件的回调。匿名函数不易调试维护测试和复用。或许你想较真，看看这里吧
$("#myLink").on("click",function(){
...
});// 不要这样
function myLinkClickHandler(){
...
}
$("#myLink").on("click",myLinkClickHandler);// 这样
3.处理文档ready事件的回调也表用匿名函数，匿名函数不易调试维护测试和复用
$(function(){
...
});// 不好的做法：无法利用此函数也无法为其写测试用例
$(initPage);// 抑或 $(document).ready(initPage);
functioninitPage(){
// 这里你可以进行程序的初始化了
}// 好的做法
4.进一步，最好也将ready事件的处理程序放到外部文件中引入到页面，而页面中内嵌的代码只需调用即可。
<script src="my-document-ready.js">
// 初始化一些必要的全局变量$(document).ready(initPage);// 抑或 $(initPage);<script>
// 初始化一些必要的全局变量
$(document).ready(initPage); // 或 $(initPage);
</script>
5.千万表写内联到HTML的JS代码，这是调试的噩梦！应该总是用jQuery来绑定事件自带程序，这样也方便随时动态地取消绑定。
6.如果可能尽量在绑定事件处理程序时使用一个命名空间，这样可以方便地取消绑定而不会影响其他绑定。
$("#myLink").on("click.mySpecialClick",myEventHandler);// 不错
// 之后，解除绑定
$("#myLink").unbind("click.mySpecialClick");
7.当选择某个元素的子元素的时候，尽量在后面选择，不要在前面选择其中选择。如下：
$("#list a").on("click",myClickHandler); //不好
$("#list").on("click","a",myClickHandler); //好
Ajax异步操作
1.不要用.getJson() 或 .get()，应直接用$.ajax() ，因为jQuery内部还是将前者转化为$.ajax()
2.不要对HTTPS站点使用HTTP去发起请求，最好干脆就表指定（将HTTP或者HTTPS从你的URL中移除）
3.表在链接里面嵌参数，请使用专门的参数设置来传递
// 不易阅读的代码...
$.ajax({
url:"something.php?param1=test1&m2=test2",
....
});
// 更易阅读...
$.ajax({
url:"something.php",
data:{param1:test1,param2:test2}
});
4.尽量指明数据类型以便你自己清楚要处理什么样的数据（见下方会提到的Ajax模板）
5.对于异步动态加载的内容，最好使用代理来绑定事件处理程序。这样的好处是对于之后动态加载的元素事件同样有效。
$("#parent-container").on("click","a",delegatedClickHandlerForAjax);
6.使用Promise模式。
$.ajax({
...
}).then(successHandler( ){
},failureHandler( ){
});
// 或
var jqxhr = $.ajax({
...
});
jqxhr.done(successHandler(){
}); // 成功后，可以多次操作
jqxhr.fail(failureHandler(){
}); // 报错 处理
7.标准的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( ){ } ); //失败
动画与特效
1.保持一个始终如一风格统一的动画实现
2.紧遵用户体验，不要滥用动画特效
插件相关
1.始终选择有良好技术支持团队，文档完善，经过全面测试，并且社区活跃的插件
2.注意所用插件与当前使用的jQuery版本是否兼容
3.一些常用功能应该写成jQuery插件。（延伸，目前一些思路还没整理出来，还在手写的笔记本上）
链式结构
1.除了用变量将jQuery选择器返回的结果保存，还可以利用好链式调用。
$("#myDiv").addClass("error").show(); // 两次/三次比较方便
2.当链式调用多达3次以上或代码因绑定回调略显复杂时，使用换行和适当的缩进来提高代码的可读性。
var MyDiv = $("#myLink") ;
MyDiv.addClass("bold")
.on("click",myClickHandler)
.on("mouseover",myMouseOverHandler)
.show();
3.对于特别长的调用最好还是用变量保存下中间结果来简化代码。
其他
1.使用对象来传递参数
$myLink.attr("href","#").attr("title","my link").attr("rel","external"); //差
$myLink.attr({
href:"#",
title:"my link",
rel:"external"
}); // 好
2.尽量避免CSS与jQuery杂揉
$("#mydiv").css({'color':red,'font-weight':'bold'});
// 不好
.error{
color:red;
font-weight:bold;
}
$("#mydiv").addClass("error");
// 较好
目前我看网站JS文件中还经常使用live()方法，有时候在动态调用click的时候管用，但是尽量不要用废弃了的方法！
网友评论