javascript - 防止在 jquery 中进行多个 DOM 搜索

Question

我创建了一个函数来返回一个 jquery 元素。

function GetDialogButton() {
    return $('a.dialog');
};

这样做是因为在多个其他功能中使用了相同的元素。我认为最好是从一个地方获得它，因此如果属性名称更改，将来更容易更改。

我想改进这个getter，以便在单个页面加载中多次调用时它不会每次都执行搜索。

我怎样才能做到这一点？我缓存它吗？或者也许没有必要，因为这是优化的？

Answer 1

不需要创建全局缓存变量。您可以在不向全局范围添加变量的情况下执行此操作。这样的事情会做：

var GetDialogButton = (function() {
    var set;

    return function() {
        if (set === undefined) {
            set = $('a.dialog');
        }

        return set;
    };
}());

Answer 2

可以创建缓存变量，但是会再次污染全局命名空间

var dialogButton;
function GetDialogButton() {
    if(dialogButton){
        return dialogButton;
    }

    dialogButton = $('a.dialog');
    return dialogButton;
};

Answer 3

您可以通过以下方式保持全局命名空间清洁；

function GetDialogButton() {
    if (typeof GetDialogButton.element === 'undefined' ) {
        GetDialogButton.element = $("a.dialog");
    }
    return GetDialogButton.element;
};

Answer 4

好吧，你可以延迟加载它。

var $dialogButton = null;

function GetDialogButton() {
    if($dialogButton == null)
      $dialogButton = $('a.dialog');
    return $dialogButton
};

另一种选择，如果您希望只有一个对话框按钮，您可以给元素一个 id，然后搜索它的行为会更有效

<a id="dialogButton">...</a>

$('#dialogButton')... // nice and quick