[英]jQuery refactoring
我经常花10到20分钟的时间查看jQuery片段,以找到缩短其中代码的方法。
现在,我一直在不停地查看这段代码,但只想知道人们将如何重构它,或者是否会重构。
$("#tabs ul li").first().addClass("activeTab");
$("#tabs div").hide().first().show();
$("#tabs ul li a").click(function(){
$("#tabs div").hide();
$("#tabs").find($(this).attr('href')).show();
});
这更多是出于好奇的问题,在我试图提高我的jQuery编码技能时,我会哭着寻求帮助。
/ *编辑
链接附件jsFiddle
您所有美妙建议的最终结果都是。
var $c = $("#tabs"), $t = $c.find("li"), $d = $c.find("div");
$d.not(":first").hide();
$t.find("a").click(function() {
$d.hide().filter($(this).attr('href')).show();
}).closest("li").first().addClass("activeTab");
我将其重构如下。 无需每次都制作jQuery对象,对其进行引用以供将来使用。
var $tabs = $("#tabs");
$tabs.find("li:first").addClass("activeTab");
$tabs.find('div').not(':first').hide();
$tabs.find("a").click(function() {
$("#tabs div").hide().filter($(this).attr('href')).show();
})
我会重构选择器,因此遍历Dom的成本会降低。 就像这样:
var $tabsControl = $("#tabs"),
$tabs = $tabsControl.find("ul > li"),
$tabsContent = $tabsControl.find("div");
$tabs.first().addClass("activeTab");
$tabsContent.hide().first().show();
$tabs.find("a").click(function() {
$tabsContent.hide();
$tabsControl.find($(this).attr("href")).show();
});
我个人认为这段代码可以,但是可以重构$("#tabs div").hide().first().show();
只是为了使其更具可读性,也许是:
$("#tabs div").not(":first").hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.