dependency injection: source specs, build-time, runtime specs

aaa-pythontutor.js

// https://goo.gl/HsH7hf

let controller = {
  view: {}, // the controller has a "view" dependency
  display: function(message) {
    this.view.render(message);
  }
};

/// ---------------------------

let polite_view = {
  render: function(message) {
    console.log(message, "    Thank you Sir/Madam.");
  }
};


controller.view = polite_view;
controller.display("The sun is rising.");


// ------------------------------

let rude_view = {
  render: function(message) {
    console.log(message, "    phhht!");
  }
};


controller.view = rude_view;
controller.display("The sun is rising.");

controller.js

let controller = {
  view: {}, // the controller has a "view" dependency
  display: function(message) {
    this.view.render(message);
  }
};

module.exports = controller;

/*
source specs: what do you see written in the .js file?

controller: Object
  Properties: 1
    view: Object
      Initialized: empty object
      Purpose: providing a dependency that will be injected at build-time
  Methods: 1
    display: Function
      Args: 1
        message: String
          Purpose: message to be rendered into the UI
      Returns: undefined
      Behavior: passes the message into the view dependency. 
        note that "this.view.render" is undefined in the source code
      Purpose: enables a user to render a message to the UI

*/

polite-app.js

// begin "build-time"
let view = require("./polite-view");
let controller = require("./controller");

// "injecting" the polite-view object into the controllers "view" dependency

controller.view = view;

// end "build-time"
//  - everything up to here in this file is "build-time" behavior
//  - requireing the necessary components from where they are defined
//  - setting dependencies (or "configuring the instance")
//  - determining the structure of the code that will be executed

controller.display("The sun is rising.");


/*
runtime specs: what would you see if you inspected the object at runtime

controller: Object
  Properties: 1
    view: Object
      Properties: 0
      Methods: 1
        render: Function
          Args: 1
            message: String
              Purpose: message to be rendered into the UI
          Returns: undefined
          Behavior: Renders the message into the UI with additional politeness
          Purpose: allows the developer to easily configure their app's courtesy level
  Methods: 1
    display: Function
      Args: 1
        message: String
          Purpose: message to be rendered into the UI
      Returns: undefined
      Behavior: passes the message into the view dependency. 
        note that "this.view.render" is undefined in the source code
      Purpose: enables a user to render a message to the UI

*/

polite-view.js

let polite_view = {
  render: function(message) {
    console.log(message, "    Thank you Sir/Madam.");
  }
};

module.exports = polite_view;

/*
source specs: what do you see written in the .js file?

view: Object
  Properties: 0
  Methods: 1
    render: Function
      Args: 1
        message: String
          Purpose: message to be rendered into the UI
      Returns: undefined
      Behavior: Renders the message into the UI with additional politeness
      Purpose: allows the developer to easily configure their app's courtesy level


*/

rude-app.js

// begin "build-time"
let view = require("./rude-view");
let controller = require("./controller");

// "injecting" the rude-view object into the controllers "view" dependency

controller.view = view;

// end "build-time"
//  - everything up to here in this file is "build-time" behavior
//  - requireing the necessary components from where they are defined
//  - setting dependencies (or "configuring the instance")
//  - determining the structure of the code that will be executed


controller.display("The sun is rising.");


/*
runtime specs: what would you see if you inspected the object at runtime

controller: Object
  Properties: 1
    view: Object
      Properties: 0
      Methods: 1
        render: Function
          Args: 1
            message: String
              Purpose: message to be rendered into the UI
          Returns: undefined
          Behavior: Renders the message into the UI with additional rudeness
          Purpose: allows the developer to easily configure their app's courtesy level
  Methods: 1
    display: Function
      Args: 1
        message: String
          Purpose: message to be rendered into the UI
      Returns: undefined
      Behavior: passes the message into the view dependency. 
        note that "this.view.render" is undefined in the source code
      Purpose: enables a user to render a message to the UI

*/

rude-view.js

let rude_view = {
  render: function(message) {
    console.log(message, "    phhht!");
  }
};

module.exports = rude_view;

/*
source specs: what do you see written in the .js file?

view: Object
  Properties: 0
  Methods: 1
    render: Function
      Args: 1
        message: String
          Purpose: message to be rendered into the UI
      Returns: undefined
      Behavior: Renders the message into the UI with additional rudeness
      Purpose: allows the developer to easily configure their app's courtesy level


*/