javascript - 模块中的数据依赖

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);

items var 通过 Ajax 调用，具有以下辅助函数:

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

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

*** 编辑 ****这是另一个模块的示例，它依赖于数据:

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);

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