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
   *
   */

  '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( 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,
  };

} )();