译者说:邻近期末,大部份的基础教学内容已讲授终了,在进行比较大型的项目训练之前,如果能让学生了解乃至遵守1些前端开发的编码规范将会是1件非常成心义的事情。因此,本博客准备于近期整理1个编码规范与最好实践的系列文章,包括html、css、javascript、jquery、php等,希望能对大家有所帮助。
-----------------------------------------------------------------------------------------
本文给大家显现的如何书写更好的jQuery代码的相干规范和最好实践,不包括javascript方面的规范,有好的意见和建议请大家到我的博客留言赐教,或看看jQuery API的速查表(cheat sheet)。
选择器
- 尽量的使用效力更高的ID选择器,由于仅仅使用“document.getElementById()”实现。
- 使用类(Class)选择器时,不要使用元素类型(Element Type),看看绩效差异。
var $products = $("div.products"); // SLOW
var $products = $(".products"); // FAST
- 对ID->child的方式,使用find的方式比嵌套选择器高效,由于第1个选择器不用使用Sizzle这个选择器引擎,更多信息。
// BAD, a nested query for Sizzle selector engine
var $productIds = $("#products div.id");
// GOOD, #products is already selected by document.getElementById() so only div.id needs to go through Sizzle selector engine
var $productIds = $("#products").find("div.id");
- 选择器右侧越具体越好,左侧相反,更多信息。
// Unoptimized
$("div.data .gonzalez");
// Optimized
$(".data td.gonzalez");
- 避免过度具体,更多信息,看看绩效差异。
$(".data table.attendees td.gonzalez");
// Better: Drop the middle if possible.
$(".data td.gonzalez");
- 给你的选择器1个范围。
// SLOWER because it has to traverse the whole DOM for .class
$('.class');
// FASTER because now it only looks under class-container.
$('.class', '#class-container');
- 避免使用全局选择器,更多信息。
$('div.container > *'); // BAD
$('div.container').children(); // BETTER
- 避免隐含的全局选择器,更多信息。
$('div.someclass :radio'); // BAD
$('div.someclass input:radio'); // GOOD
- 不要使用重复、交叉使用ID选择器,由于单独的ID选择将使用更高效的document.getElementById()方式,更多信息。
$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD, only calls document.getElementById()
DOM操作
- 处理现存元素之前,先剥离,处理以后再附加,更多信息。
var $myList = $("#list-container > ul").detach();
//...a lot of complicated things on $myList
$myList.appendTo("#list-container");
- 使用字符串联接符或array.join(),比.append高效,更多信息,看看绩效差异。
// BAD
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(''));
- 不要操作空缺对象,更多信息。
// BAD: This runs three functions before it realizes there's nothing in the selection
$("#nosuchthing").slideUp();
// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
$mySelection.slideUp();
}
事件
- 每一个页面只使用1次document的ready事件,这样便于调试与行动流跟踪。
- 尽可能不要使用匿名函数绑定事件,由于匿名函数不利于调试、保护、测试、重用,更多信息。
$("#myLink").on("click", function(){...}); // BAD
// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLLinkClickHandler);
- 对document ready事件处理函数,尽可能不用匿名函数,理由同上。
$(function(){ ... }); // BAD: You can never reuse or write a test for this function.
// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
// Page load event where you can initialize values and call other initializers.
}
- document ready事件处理函数可以包括在外部文件中,然后通过页内js的方式调用。
<script src="my-document-ready.js"></script>
<script>
// Any global variable set-up that might be needed.
$(document).ready(initPage); // or $(initPage);
</script>
- 不要使用html中的行动语法调用事件(html的onclick事件属性),那简直是调试者的噩梦。始终使用jquery来绑定、删除事件是1件惬意的事情。
<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD -->
$("#myLink").on("click", myEventHandler); // GOOD
- 可能的时候,使用自定义事件,我们可以很方便的消除该事件绑定而不影响其他事件。
$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// Later on, it's easier to unbind just your click event
$("#myLink").unbind("click.mySpecialClick");
- 当你给多个对象绑定相同的事件时,可使用事件委派。事件委派中,当我们给父对象绑定事件后,匹配选择器的后代都可以绑定该事件,不管该后代原来就有,还是新增元素。
$("#list a").on("click", myClickHandler); // BAD, you are attaching an event to all the links under the list.
$("#list").on("click", "a", myClickHandler); // GOOD, only one event handler is attached to the parent.
Ajax
- 避免使用.getJson()和.get(), 像它的名字昭示的那样使用$.ajax()。
- 不要在https站点上使用http要求,最好使用独立性URL(不包括http:和https:,直接以//开头)。
- 不要在要求URL上放置参数,使用data对象传递参数。
// Less readable...
$.ajax({
url: "something.php?param1=test1?m2=test2",
....
});
// More readable...
$.ajax({
url: "something.php",
data: { param1: test1, param2: test2 }
});
- 最好明确指定数据类型(dataType)以便于明确处理的数据类型(参见下例)。
- 对Ajax加载的内容使用事件委派,事件委派可以很好的解决新增元素的事件绑定问题,更多信息。
$("#parent-container").on("click", "a", delegatedClickHandlerForAjax)
- 使用Promise interface(不知道怎样翻,请大家赐教),更多案例。
$.ajax({ ... }).then(successHandler, failureHandler);
// OR
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);
- Ajax样例,更多信息。
var jqxhr = $.ajax({
url: url,
type: "GET", // default is GET but you can use other verbs based on your needs.
cache: true, // default is true, but false for dataType 'script' and 'jsonp', so set it on need basis.
data: {}, // add your request parameters in the data object.
dataType: "json", // specify the dataType for future reference
jsonp: "callback", // only specify this to match the name of callback parameter your API is expecting for JSONP requests.
statusCode: { // if you want to handle specific error codes, use the status code mapping settings.
404: handler404,
500: handler500
}
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);
效果和动画
- 采取克制和1致的方法去实现动画。
- 不要过度使用动画效果,除非是用户体验所需。尝试使用简单的show/hide,slideUp/slideDown等方法切换对象,尝试使用‘fast’,'slow'和‘medium’。
插件
- 优先选用具有良好支持、测试、社区支持的插件。
- 检查该插件与您所用jQuery版本的兼容性。
- 任意可复用组件都应当构成插件,看看jQuery插件的样本代码。
链式操作
- 将链式操作看成变量缓存和多选择器要求的替换方式。
$("#myDiv").addClass("error").show();
- 当链式操作超过3个或由于事件绑定变得复杂时,使用换行和缩进提高链式操作的可读性。
$("#myLink")
.addClass("bold")
.on("click", myClickHandler)
.on("mouseover", myMouseOverHandler)
.show();
- 对长的链式操作来讲,也能够把中间对象缓存成1个变量。
杂项
- 使用字面对象传递参数。
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD, 3 calls to attr()
// GOOD, only 1 call to attr()
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});
- 不要混写css与jQuery。
$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD
.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD
- 不用使用弃用的方法,了解每一个新版本的弃用方法,并且避免使用它,非常重要。
- 必要的时候可以混合jQuery和原生js,了解表现jQuery和原生js的表现差异。
$("#myId"); // is still little slower than...
document.getElementById("myId");
参考文献
- jQuery Performance: http://learn.jquery.com/performance/
- jQuery Learn: http://learn.jquery.com
- jQuery API Docs: http://api.jquery.com/
- jQuery Coding Standards and Best Practice: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/
- jQuery Cheatsheet: http://lab.abhinayrathore.com/jquery-cheatsheet/
- jQuery Plugin Boilerplate: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/