Question

我正在创建一个在线商店应用程序，由几个模块组成。第一个模块是数据模块，它为应用程序的其余部分提供数据以及一些有用的方法。以下是该模块的主要内容：

app.data = (function (pubsubService) {
//This is where the data is fetched
var items = app.UTILS.getAJAX('data.json', JSON.parse, false);
/* Items methods */
var getItems = function () {
    return items;
};
var getItemsLength = function () {
    return items.length;
};
function updateItemStock(item, amount) {
    item.stock -= Number(amount);
}
return {
    getItems: getItems,
    getItemsLength: getItemsLength;
};
})(app.pubsub);

通过Ajax调用items var，使用以下辅助函数：

function getAJAX(url, callback, async) {
    async = async || true;
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, async);
    xhr.onload = function () {
        callback(this.responseText);
    };
    xhr.send();
}

我尝试使用Async打开和关闭此调用，无论如何，结果都是错误，因为稍后会有另一个模块需要一些有关数据的信息，但是数据仅加载LATER，导致错误。问题是：在继续初始化下一个模块之前，如何强制将数据加载到项目中？

***编辑**** 这是另一个模块的示例，它依赖于Data：

app.mainView = (function (data, pubsubService) {
var items = [];
var generateItems = function (firstItemIndex, stopIndex) {
    var dataLength = data.length;
    stopIndex = (stopIndex < dataLength) ? stopIndex : dataLength;
    items = data.slice(firstItemIndex, stopIndex);
    pubsubService.publish('itemsGenerated');
};
var getItems = function () {
    return items;
};

return {
    generateItems: generateItems,
    getItems: getItems
};
})(app.data.getItems(), app.pubsub);

这个模块是否真的需要在AJAX回调中定义才能实现？我不是这个解决方案的粉丝

Answer 1

任何想要来自Ajax的数据的操作都需要用Callback方法编写。因此，只要数据可用，您的代码就会被调用。

按以下方式拨打您的方法：

   getAJAX(url, function(data){
// write any code that want data from Ajax.
}, true);

替代方案：

function doSomeThing(data)
{
// do something
}

getAJAX(url, function(data){
    doSomeThing(data);
    }, true);

Or

getAJAX(url,doSomeThing, true);

不要拨打Async false的电话。它会导致你的页面UI响应迟缓。

***编辑***

我已经使用你的代码来简化它。

// Modified it in a method that can be put anywhere you want
app.methodName = function(data, pubsubService) {
    var items = [];
    var generateItems = function(firstItemIndex, stopIndex) {
        var dataLength = data.length;
        stopIndex = (stopIndex < dataLength) ? stopIndex : dataLength;
        items = data.slice(firstItemIndex, stopIndex);
        pubsubService.publish('itemsGenerated');
    };
    var getItems = function() {
        return items;
    };

    return {
        generateItems : generateItems,
        getItems : getItems
    };
};

和

// call that method in a callback like this. 
app.mainView  = app.methodName(app.data.getItems(), app.pubsub);

这就是你如何在回调中编写一行代码来完成工作，这也将消除复杂性。

模块中的数据依赖性

1 个答案: