实例化后，javascript订阅回调函数

Question

I have a Javascript Object made this way:

function App(callback){

// Call some "long running functions meant for initialization
callback(this);

}

In my main Template page (_Layout.cshtml on ASP MVC) I instanciate it like this:

_Layout.cshtml

var oApp = new App(function(initializedApp){

    // Instanciate here other Javascript components that depend on 
    // App initialization
    var oComponent1 = new Component1(initializedApp);
});

This works fine ! Component1 is initialized afte App has finished initializeing and all goes fine.

Proble rises in Page1.cshtml (which is rendered inside _Layout.cshtml and have access to oApp). Page1 also has to initialize its own component that need App to be fully initialized.

Page1.cshtml

// How do I "subscribe to the App callback function so that Compnent2, s
// specific to the Page1.cstml, is initialized afetr App has finished
// its initialization ???
var oComponent2 = new Compnent2(oApp);

oApp.callback(); // ???
oApp(function(initializedApp){ // code here... });  //???

Thanks

Lorenzo

Answer 1

Your running with an interesting pattern. I would suggest using a more unobtrusive way of initializing and calling javascript. I would say most JS calls in CSHTML can be considered code smell.

Anyway, I will answer your question. I would change App to have the ability to register callbacks:

function App(callbacks)
{
    var self = this;
    self.callbacks = [];
    self.addCallbacks = function(newCallbacks)
    {
        //allow either a single callback or an array of callbacks
        if(isFunction(callbacks)
        {
            self.callbacks.push(newCallbacks); //single callback
        }
        else
        {
            for(var i = 0; i < newCallbacks.length; i++)
            {
                //theoretically, you can have multi-dimensional arrays of callbacks, but that's just excessive
                self.addCallbacks(newCallbacks[i]);
            }
        }
    };
    self.addCallbacks(callbacks);

    //some point later, call all the callbacks:
    for(var i = 0; i < self.callbacks.length; i++)
    {
        self.callbacks[i](this);
    }
}

Then, in your Page1.cshtml :

var oComponent2 = new Compnent2(oApp);
var mycallback = function(initializedApp){ // code here... };
oApp.addCallbacks(mycallback);

//or, if you have many callbacks to register:
var mycallbacks = [
    function(initializedApp){ // code here... },
    function(initializedApp){ // code here... }
];
oApp.addCallbacks(mycallbacks);

isFunction borrowed from here :

var isFunction = function(functionToCheck) 
{
    var getType = {};
    return functionToCheck && getType.toString.call(functionToCheck) === '[object   Function]';
}