Javascript 用ajax实现js中的OOP方法
。。。 嗨,我有一个目标:Javascript 用ajax实现js中的OOP方法,javascript,ajax,oop,document-ready,Javascript,Ajax,Oop,Document Ready,。。。 嗨,我有一个目标: function Page(daoService) { this.daoService = daoService; this.gamesList = this.daoService.getGamesList(); } // Rendering thumbs for main page Page.prototype.renderThumbs = function(idContainer){ var container = document.ge
function Page(daoService) {
this.daoService = daoService;
this.gamesList = this.daoService.getGamesList();
}
// Rendering thumbs for main page
Page.prototype.renderThumbs = function(idContainer){
var container = document.getElementById(idContainer);
for (var i = 0; i < this.gamesList.length; i++) {
var thumbNode = document.createTextNode("<div class='thumbIcon'></div>");
thumbNode.style.backgroundImage = Const.PATH_THUMBS + this.gamesList.gameTitleseo;
container.appendChild(thumbNode);
}
};
这里的问题是,当我调用page.renderThumbs时,字段this.gamesList仍然没有初始化,因为它没有从服务器获得ajax响应。你能帮我处理我需要改变的方法吗?谢谢返回asyn结果时,请在您的DAO服务中使用承诺。jQuery有一个很好的promise框架 符号符号代码:
function DaoService() {
this.getGamesList = function() {
return $.Deferred(function(defer) {
//Do ajax request here and wait for callback/complete
//replace DoAjax to your ajax or better yet use jQuery ajax that is already promise aware
DoAjax(function onReady(result) {
defer.resolve(result.data);
});
}).promise();
}
}
在page类中,每当需要游戏列表时,请按如下所示调用它。它只下载一次数据,以后每次都会使用已下载的数据
Page.prototype.renderThumbs = function(idContainer){
var container = document.getElementById(idContainer);
this.daoService.getGamesList().then(function(gamesList) {
for (var i = 0; i < gamesList.length; i++) {
var gameListItem = gamesList[i];
//do your funky html concats or use some templating
});
});
}
};
Page.prototype.renderThumbs=函数(idContainer){
var container=document.getElementById(idContainer);
this.daoService.getGamesList().then(函数(gamesList){
对于(var i=0;i
您需要在daoService上设置getGamesList
,以处理异步方法。这是我的意思的一个大概草图:
DaoService.prototype.getGamesList = function(callback) {
var self = this;
// Has the gamesList been populated by a previous call to this function?
if (this.gamesList) {
// The gamesList property has values, call the callback.
callback(this.gamesList);
}
else {
// The gamesList was not populated, make the ajax call.
$.ajax('URL').done(function(data) {
// Handle data coming back from the server.
self.gamesList = data;
callback(this.gamesList);
});
}
}
然后,您可以使用renderThumbs
中的getGamesList方法调用,如下所示:
Page.prototype.renderThumbs = function(idContainer){
var container = document.getElementById(idContainer);
// The anonymous function will be called whether the list was
// already populated in daoService or an ajax call is made.
this.daoService.getGamesList(function(gamesList) {
for (var i = 0; i < gamesList.length; i++) {
var thumbNode = document.createTextNode("<div class='thumbIcon'></div>");
thumbNode.style.backgroundImage = Const.PATH_THUMBS + gamesList[i].gameTitleseo;
container.appendChild(thumbNode);
}
});
};
Page.prototype.renderThumbs=函数(idContainer){
var container=document.getElementById(idContainer);
//无论列表是否为空,都将调用匿名函数
//已在daoService中填充或进行了ajax调用。
this.daoService.getGamesList(函数(gamesList){
对于(var i=0;i
您必须在回调中调用renderthumbs。i、 例如,调用ajax成功回调中的函数。嗨,我有几个问题,我可以用原生js中的Promiss而不使用其他LIB吗?DaoService的意义:它可以更改,例如,我不想从ajax中获取数据,而是想从我的页面中获取数据(它以前加载过),所以我需要更改我的页面类吗?或者我可以覆盖我的dao服务?如果(this.gamesList){…这里的“this”是什么?这不是我的页面。gamesList不是吗?不,这是指daoService上的gamesList属性。如果您不喜欢将其连接到daoService,而希望它位于Page对象上,则需要相应地进行调整,以便将gamesList“缓存”到页面
。顺便说一句,我似乎错误地使用了此属性
在ajax调用中,我将修改代码。
Page.prototype.renderThumbs = function(idContainer){
var container = document.getElementById(idContainer);
// The anonymous function will be called whether the list was
// already populated in daoService or an ajax call is made.
this.daoService.getGamesList(function(gamesList) {
for (var i = 0; i < gamesList.length; i++) {
var thumbNode = document.createTextNode("<div class='thumbIcon'></div>");
thumbNode.style.backgroundImage = Const.PATH_THUMBS + gamesList[i].gameTitleseo;
container.appendChild(thumbNode);
}
});
};