模块中的数据依赖

Question

I am creating an Online Store App, made up of a few modules. The first module is the Data module, which provides the data for the rest of the app as well as a few useful methods. Here is the main gist of the module:

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

The items var is called via Ajax, with the following helper function:

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

I've tried to make this call with Async on and off, and regardless of that, the result is an error, because later down the line there is another module which needs some information about the data, but the data loads only LATER, causing the error. The question is: How can I enforce the data to be loaded to items before moving on to initialisation of the next module?

*** EDIT **** This is an example of another module, which is dependent on 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);

Does this module really need to be defined inside the AJAX callback for this to work? I am not a fan of this solution

Answer 1

Any operation that wants the data coming from Ajax needs to be written in Callback method. So whenever data is available your code will be invoked.

Call you method like following:

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

Alternative:

function doSomeThing(data)
{
// do something
}

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

Or

getAJAX(url,doSomeThing, true);

Do not make call having Async false. it will cause you page UI response sluggish .

*** EDITED***

I have used your code to simplify it.

// 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
    };
};

And

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

This is how you can write one line of code in callback to get your work done that will remove complexity also.