arbitrarily-complex-model-render.js

;(function($){

  // NOTE: Event queue
  __e = window.__e || [];

  var component1 = {

    setup:function(){
      // do stuff that only needs to happen once over the entire lifetime of the page. Could be nothing.
    },

    build:function(){
      // do stuff that only needs to happen every time the feature is built
      this.fn1();
      this.fn2();
      this.fn3();
    },

    init:function(){
      this.setup();
      this.build();
    },

    teardown:function(){
      // undo stuff that needs undoing every time the feature is replaced.
    },

    reInit:function(){
      this.teardown();
      this.build();
    },

    fn1:function(){
    },

    fn2:function(){
    },

    fn3:function(){
    },

  };

  var component2 = {
    init:function(){
      // Code here
    }
  };

  var component3 = {
    init:function(){
      // Code here
    }
  };

  var lifecycle = {
    init:function(){
      component1.init();
      component2.init();
      component3.init();
    },
    reInit:function(){
      component1.reInit();
      component2.init();
    }
  };
 
  /* NOTE: Until all code is converted to use the event queue, this risks running in a different sequence than it currently does
  __e.push(['dom-complete', function() {
	lifecycle.init();
  }]);
  */
  if( wp_pb.StaticMethods.isPageHydrated() ){
    lifecycle.init();
  }

  // NOTE: For PWA
  __e.push(['shamble', function() {
    lifecycle.reInit();
  }]);
  __e.push(['shamble:end', function() {
    component3.init();
  }, applyFeature]);

  function applyFeature(){
    // Other arbitrary code
  }	

})(jQuery);