模块中的数据依赖

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

项目 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的数据的操作都需要写在回调方法中。因此，只要数据可用，您的代码就会被调用。

调用方法如下：

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

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

模块中的数据依赖

Data dependency in module

javascript

ajax

module

xmlhttprequest