Question

我编写了以下代码块，它在我的场景中有效，但我知道它很脏：

var navbarModule = (function($) {
    var self = {};
    var $login;

    self.hideLogin = function() {
        $login.hide();
    };

    self.showLogin = function() {
        $login.show();
    };

    $(document).ready(function() {
        $login = $(".navbar-form");
    });

    return self;
}(jQuery));

我的代码目标是：

仅在必要时选择DOM元素
缓存选定的DOM元素
保证缓存的DOM元素存在

我的代码未能达到＃1，达到＃2，并且在情况上达到了＃3。即，对于需求＃3，navbarModule.hideLogin（）在DOM已完全加载时有效，但如果在DOM中存在导航栏之前调用它则不行。

有没有办法实现真正的延迟加载和缓存，以满足我的目标而不会有条件的工作？

Answer 1

好了，既然你已经解释了懒惰缓存的含义，你可以这样做：

var navbarModule = (function($) {
    var self = {};
    var $login;

    function getLogin() {
        if (!$login || $login.length == 0) {
            $login = $(".navbar-form");
            return $login;
        }
    }

    self.hideLogin = function() {
        getLogin().hide();
    };

    self.showLogin = function() {
        getLogin().show();
    };

    return self;
}(jQuery));

注意：

如果您在.showLogin()之前致电.hideLogin()或.navbar-form"，则不会发生任何事情。它将创建一个空的jQuery对象，而.hide()和.show()方法根本不会执行任何操作。如果稍后再次调用它，它将看到jQuery对象为空并再次查找".navbar-form"。

目前还不清楚为什么你认为这里甚至需要缓存登录对象。给它一个id值，然后根据需要document.getElementById()找到它，它会很快。

如何在JavaScript模块中为jQuery选择器实现延迟加载？

1 个答案: