1。哪个更快？

Question

第一

我有以下代码

function function_name () {
    var list = $('li');
    var active = $('li.active');
    list.on('click', function(event) {
        event.preventDefault();
        list.removeClass('active');
        // use this way
        active = $(this);
        // or this way 
        var newActive = $(this);
    });
}

快速＆amp;＆amp;好吗？为全局“活动”变量分配新值或在新函数中声明一个新变量“newActive”？

我想知道是否有更好的方法可以通过它的类过滤active变量list列表项。我正在考虑使用jQuery的.get()函数，但我不确定如何使用它或它的返回值是什么。

Answer 1

你问两个问题

1。哪个更快？

你在关心错误的事情。更改DOM（特别是以可见方式）将比分配变量慢1,000,000倍。分配全局和局部之间的区别是如此之小，以至于如果您也更改DOM，则无法对其进行测量。它取决于哪个浏览器，浏览器版本，操作系统，操作系统版本，处理器类型和月相。

2。哪个更好

一般来说，拥有全局变量被认为是不好的，所以你的州越是本地越好。

原因是，如果不依赖或污染全局命名空间的自包含块，通过组合它们可以更容易地构建更大的构造。

当您使用全局状态（如全局变量或全局函数）时，不同的块可能会碰撞这些全局变量，最终结果是组合不起作用（通常以微妙的方式）。

最好的方法是，你可以完全避免依赖或改变全局状态。这通常可以在Javascript中使用模式：

(function(){...})()

创建一个函数并立即调用它。正文...可以定义自己的变量并使用它们而不会干扰外部世界。

Answer 2

如果您的代码是：

var $list = $('li');

您可以使用jQuery＆＃39; filter功能：

var $active = $list.filter(".active")

https://api.jquery.com/filter/

您提到的get函数只接受索引（请参阅文档http://api.jquery.com/get/），这意味着您需要知道哪个是active <li>。< / p>

Answer 3

只需一想，$('li')会返回页面中的所有<li>，与$('li.active')相同，因此，如果您有多个<li>和<li class="active">，那么您的代码将在点击li元素时删除所有有效项目。

回到你的问题，我根据变量的范围以及你想用它做什么来估计它。

使用分配，该值将保持在list.on('click', function(event) { ... });

之外

在使用声明时，该值仅在函数内部有意义（将局部变量与全局变量同名并不是一个好习惯）

Answer 4

自己检查表现：https://jsperf.com/ :-D那就是说，我猜没有大的差别，但更重要的是，我怜悯这些“孤儿”变量：' - （有点OOP会是更可靠：

// /my/UL.js (requires jquery.js)

var my = window.my || {};

my.UL = function (id) {
    var me = this;
    var ul = $('#' + id);
    me.active = ul.children('.active');
    ul.on('click', function (ev) {
        // event delegation
        if (ev.target.parentNode === this) {
            me.handleClick(ev.target);
        }
    }
}

my.UL.prototype.handleClick = function (li) {
    var me = this;
    me.active.removeClass('active');
    me.active = $(li);
    me.active.addClass('active');
}

my.UL.prototype.getActive = function () {
    // no DOM query
    return this.active[0];
}

用法：

var myUL1 = new my.UL('my-favorite-ul');
var myUL2 = new my.UL('a-crappy-one');
myUL1.getActive(); // the active list item or undefined

这里有三件事需要注意。首先，使用event delegation可以添加或删除列表项，而无需担心click事件。然后，为active的每个实例分配一个新的my.UL属性以避免冲突。最后，维护对活动项的引用可以避免每次想要获取项时都查询DOM。

但是，这不是最佳做法，您可以通过网络找到更多更智能的解决方案。我只是想扩大你的视野。这个主题确实比你想象的要复杂得多。

无论如何，请记住，有很多可能性来优化您的代码。慢慢来： - ）

哪一个更快更好？声明一个新变量或只是分配给全局变量？

4 个答案:

1。哪个更快？

2。哪个更好