observer

by Artem

JavaScript

'use strict';

function Router() {
  if (Router.__instance__) {
    return Router.__instance__;
  }

  const handlers = {};

  function setRoute(route) {
    this.trigger('navigate');
  }

  function on(event, handler) {
    if (!(event in handlers)) {
      handlers[event] = [];
    }
    handlers[event].push(handler);
  }

  function trigger(event) {
    if (event in handlers) {
      handlers[event].forEach((e) => {
        e();
      });
    }
  }


  const publicAPI = Router.__instance__ = {
    setRoute,
    on,
    trigger
  };

  return publicAPI;
}

function PageController(router) {
  this.router = router;
  this.router.on('navigate', this.fetchPage.bind(this));
}

PageController.prototype.fetchPage = function(d) {
  console.log('navigation ok');
  // ajax fetching
  setTimeout(function() {
    this.loaded(d);
  }.bind(this), 1000);
};

PageController.prototype.loaded = function(d, u) {
  console.log('loaded ok');
  this.router.trigger('loaded');
};

const r = new Router();
const thepage = new PageController(r);

r.trigger('navigate');