Javascript ajax 延迟加载和功能组织

Question

我是这类东西的新手，所以我想要一些设计建议。假设我有这样的东西

$(function () {
    $('#menuBtn').on('click', app.openUsersMenu);
});
var app = {
    users: null,
    openUsersMenu: function () {
        if (app.users != null) {
            //render menu
        } else {
            $.ajax({
                url: '/getUsers.json'
            }).success(function (data) {
                app.users = data;
                //render menu     
            });
        }
    }
}

这是执行延迟加载和缓存的好方法，还是您会建议更好的替代方法？避免两次编写渲染函数的常用解决方案是什么？当然你可以有这样的东西:

var app = {
    users: null,
    openUsersMenu: function() {
        if (app.users != null) {
            app.renderMenu();
        } else {
            $.ajax({
                url: '/getUsers.json'
            }).success(function (data) {
                app.users = data;
                app.renderMenu();  
            });
        }
    },
    renderMenu: function() {
        //use app.users to render
    }
}

但是这两个函数和它们的名字变得相当困惑，所以最好做这样的事情:

var app = {
    users: null,
    openUsersMenu: function () {
        if (app.users != null) {
            //render menu
        } else {
            $.ajax({
                url: '/getUsers.json'
            }).success(function (data) {
                app.users = data;
                app.openUsersMenu(); // Call itself, now with data    
            });
        }
    }
}

最后一个模式是个好主意吗？通常的做法是什么？

Answer 1

我相信您会得到很多关于不同库的建议，以及可用于缓存的建议(例如 amplifyJS )，它们都有自己的位置。但是，如果您所做的只是在内存中缓存，那么您的解决方案就非常合适。在幕后，这就是库无论如何都会为内存缓存做的事情——只是抽象了一点。

但是，您拥有的东西简单易懂，而且最重要的是它有效。

关于加载/缓存代码的不同选项。如果永远不会直接调用 renderMenu，我会把它移到 openUsersMenu 内部以使其私有(private):

var app = {
    users: null,
    openUsersMenu: function() {
        var renderMenu = function() {
            //use app.users to render
        };

        if (app.users != null) {
            renderMenu();
        } else {
            $.ajax({
                url: '/getUsers/json'
            }).success(function (data) {
                app.users = data;
                renderMenu();  
            });
        }
    }
}

否则，选项 #2 是桃色的。 Lee Meador 是对的，选项 #3 很酷，但有点难以阅读。如果您需要任何进一步的说明，请告诉我。