1

I am trying to figure out a way to solve the following dependency problem.

I have a parent object DomManager that has the responsibility to handle all the interaction with the DOM. It initializes several modules and two of them are dependent of each other: PlayerDom and Sticky.

At a certain point, a PlayerDom's method needs to call a method of Sticky (and vice versa).

After several iterations, I came up with the following implementation:

DomManager

var DomManager = {
// General configuration
config: null,

// Modules container
modules: {},

/**
 * Initialization function
 *
 * @param config - Configuration object
 * @returns {DomManager} - DomManager object
 */
init: function(config) {
    this.config = this.setConfig(config);

    this.initModules();

    return this;
},

setConfig: function(config) {
    return config;
},

/**
 * Invoke a service from a particular module
 *
 * @param moduleName - Module name
 * @param service - Method name to be invoked
 * @param args - Optional method parameters
 */
invoke: function(moduleName, service, args) {
    if (this.modules[moduleName] && typeof this.module[moduleName][service] === 'function') {
        this.modules[moduleName][service](args);
    }
},

/**
 * Initializes all modules it depends on
 */
initModules: function() {
    // Initialize player DOM manager
    this.modules['playerDom'] = PlayerDom.init(this.config.playerDom);

    // Stickiness is NOT enabled on videogallery
    if (this.config.sticky.enabled) {
        this.modules['sticky'] = Sticky.init(this.config.sticky);
    }

    // Top leaderboard stickiness is enabled only on mobile
    if (this.config.topLeaderBoard.enabled) {
        this.modules['topleaderboard'] = TopLeaderBoard.init(this.config.topLeaderBoard);
    }

    // Read more is enabled only if the following conditions are met:
    // - Template A
    // - One of: Facebook Referrer, Mobile, Tablet
    if (this.config.readMore.enabled) {
        this.modules['readMore'] = ReadMore.init(this.config.readMore);
    }
}

};

So when PlayerDom needs to call a service of Sticky, it needs to call, for example, DomManager.invoke('sticky', 'enable').

Could it be a good solution or is there something better?

0

As I understand DomManager in your implementation is a DI manager as well. If it creates modules upon initialization, then it probably make sense to add a method like DomManager.get(moduleName) or DomManager.inject(moduleName) and use it in the child modules like so:

let sticky = DomManager.get(Sticky);
sticky.doSomething();

Such approach is used in Angular, when there are services dependent on each other: https://github.com/mgechev/injection-js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.