Javascript 优化Jquery代码-单击添加和删除类_Javascript_Jquery_Optimization

Javascript 优化Jquery代码-单击添加和删除类

javascript jquery optimization

Javascript 优化Jquery代码-单击添加和删除类,javascript,jquery,optimization,Javascript,Jquery,Optimization,我目前正在学习js和jquery来帮助我进行设计，我遇到的一个常见问题是，我可以让它做我想做的事情，但我不知道它的编码方式是否有效。有没有人能找到更好的编码方法： $(".cal-check a").click(function(e) { e.preventDefault(); $(".agenda").addClass("active"); }); $(".agenda .close-panel").click(function(e) { e.preventDefault(); $(".ag

我目前正在学习js和jquery来帮助我进行设计，我遇到的一个常见问题是，我可以让它做我想做的事情，但我不知道它的编码方式是否有效。有没有人能找到更好的编码方法：

$(".cal-check a").click(function(e) {
e.preventDefault();
$(".agenda").addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
$(".agenda").removeClass("active");
});

我想单击一个日历事件，然后它会将活动类添加到日历中另一个名为“议程”的类，该类随后会显示议程。然后通过单击close panel元素将其删除。非常感谢

您可以像这样缓存.agenda选择器：

var $agenda = $(".agenda");

$(".cal-check a").click(function(e) {
    e.preventDefault();
    $agenda.addClass("active");
});

$agenda.find(".close-panel").click(function(e) {
    e.preventDefault();
    $agenda.removeClass("active");
});

您可以缓存.agenda选择器，如下所示：

var $agenda = $(".agenda");

$(".cal-check a").click(function(e) {
    e.preventDefault();
    $agenda.addClass("active");
});

$agenda.find(".close-panel").click(function(e) {
    e.preventDefault();
    $agenda.removeClass("active");
});

我建议不要更改类，这在浏览器上通常会非常密集，因为一次类更改将意味着所有类都必须重新解析。这通常对更具攻击性的内容（如动画）非常不利，但如果您有性能方面的考虑，您应该考虑到这一点。

我建议不要更改类，这在浏览器上通常会非常密集，因为一次类更改将意味着所有类都必须重新解析。这通常对更具攻击性的东西（如动画）非常不利，但如果你有性能方面的考虑，你应该考虑到这一点。

我认为这已经很有效了。将来可能会有帮助的事情就是尽可能少地深入DOM。在这个小示例中，它不会有什么区别，但例如，为agendaClass创建一个变量，而不是每次都使用jquery来获取它

var agendaClass = $(".agenda");

$(".cal-check a").click(function(e) {
e.preventDefault();
agendaClass .addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
agendaClass .removeClass("active");
});

var agendaClass = $(".agenda");

$(".cal-check a").click(function(e) {
e.preventDefault();
agendaClass .addClass("active");
});

$(".agenda .close-panel").click(function(e) {
e.preventDefault();
agendaClass .removeClass("active");
});

这应该足够有效。如何优化代码在很大程度上取决于DOM结构

在幕后，jQuery及其Sizzle搜索引擎将使用内置的DOM搜索方法（如果这些方法可用的话）（本地搜索将始终比使用JS完成的搜索更快）。在您的情况下，一切都应该正常，尤其是在现代浏览器中，因为它们已经和

。cal检查a

和

。议程

选择器将使用该内置方法执行。此外，还有一些可用于查找

.agenda

大多数现代浏览器都支持这两种方法（只要链接中有受支持的浏览器列表），因此使用选择器谈论IE8+、Firefox和Chrome等浏览器就足够快了。同时，IE7没有上述功能，Sizzle将被迫通过numerouse元素查找您要查找的元素。也许您可以通过指定某个id为的容器来限制该数量，在这种情况下，它将只查看该元素的内部：例如，

$（“#someId.agenda”）

。您可能还需要添加一些标记：

$（“#someId div.agenda”）

。这样，您就可以限制要在

#someId

（getElementById）中使用div（可以使用getElementsByTagName）搜索的元素数量。这样，您可以在IE7和其他旧浏览器中提高速度，而不支持

getElementByClassName

和

querySelector

另外，您可以缓存搜索结果，因为这里已经提到过