Javascript ajax懒惰加载和功能组织

我是新来的这种东西，所以我想要一些设计建议。比方说，我有这样的事情Javascript ajax懒惰加载和功能组织

$(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  
      }); 
     } 
    } 
}

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

来源

2013-01-24 David Fregoli

使用中间的一个。这很容易理解。 –

我相信你会为不同的图书馆提供很多建议，并且可以用于缓存（如amplifyJS），并且他们有自己的位置。但如果你所做的只是在内存中缓存，那么你的解决方案就非常好。在封面下，这是图书馆为内存中缓存而做的 - 只是抽象出来了一点。

但是，你有什么是简单，容易理解，最重要的是它的工作原理。

关于加载/缓存代码的不同选项。如果renderMenu是永远不会被直接调用，我想移动它openUsersMenu的内部，将其私人：

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很酷，但有点难以阅读。让我知道你是否需要进一步澄清。

来源

2013-01-24 17:32:56 Grinn

Javascript ajax懒惰加载和功能组织

回答

相关问题