Modules

Introduction

VCore, Theme and Plugins are structured using the "Model View Presenter" design pattern, wrapped into modules that follow the "Revealing Module Pattern". Below is an example for the basic structure of a module, as used a lot in the code base.

Example for Plugin or Theme Modules

const SomeModule = ( function() {

  /**
   * Module to do something
   *
   * "launch" provides the optional ability to setup something on app start
   *
   * "draw" triggers the presenter and view and is the main method for
   * other modules to call
   *
   */

  'use strict';

  const someVariable = 'whatever';

  /* ================== private methods ================= */

  function doSomethingOnAppLaunch() {
    // do something here, for example also using someVariable
  }

  function presenter( which, options ) {
    // get some data and/or component according to the 'which' parameter, mash it into usable stuff considering the options parameter, and send it to the view

    return {
      someStuff: someStuff,
    };

  }

  function view( stuff ) {
    // do something with the stuff, like updating the DOM
  }

  /* ============ public methods and exports ============ */

  function launch() {
    doSomethingOnAppLaunch();
  }

  function draw( which, options ) {
    view( presenter( which, options ) );
  }

  return {
    launch: launch,
    draw: draw,
  };

} )();

Example for VCore Modules

const VSomeModule = ( function() {

  /**
   * V Module to get, set or cast something
   *
   */

  'use strict';

  const someVariable = 'whatever';

  /* ================== private methods ================= */

  function doSomething() {
    // do something here when getting or setting something
  }

  /* ============ public methods and exports ============ */

  function getSomething( which, data ) {
    // some logic to get something
  }

  function setSomething( which, data ) {
    // some logic to set something
  }

  return {
    getSomething: getSomething,
    setSomething: setSomething,
  };

} )();