fluxpurejs.js

/* original link http://blog.gasolin.idv.tw/2014/11/flux-javascript.html */
//  Renderer.js
var ClickRenderer = {
  init: function s_init(element, Store) {
     this.element = element;
     this.store = Store; 
     window.addEventListener('render_view1', this);
  },

  handleEvent: s_handleEvent(evt) {
    switch(evt.type) {
      case 'render_view1':
        this.element.textConent = this.store.getSomething(); 
        break;
    }
  }
};

// Store.js
function Store() {
  this._data: 0;
};

Store.prototype = {
  init: function s_init() {
     window.addEventListener('store_do', this);
     window.addEventListener('store_set', this);
  },

  handleEvent: s_handleEvent(evt) {
    switch(evt.type) {
      case 'store_do':
        this.doSomething();
        break; 
      case 'store_set':
        this.setSomething(evt.detail.val);
        break;
    }
  },

  getSomething: function s_getSomething() {
    return this._data; 
  },

  _doSomething: function s_doSomething() {
    this._data += 1;
    window..dispatchEvent(new CustomEvent('render_view1')); 
  },

  _setSomething: function s_setSomething(val) {
    this._data = val; 
  }
};

// App.js
var App = {
  init: function a_init() {
    // get view
    this.view1 = document.getElementById('xxx1');
    this.view2 = document.getElementById('xxx2'); 
    this.store = new Store();
    this.store.init();
    ClickRenderer.init(this.view1, this.store);
  },

  
  handleEvent: a_handleEvent(evt) {
    window..dispatchEvent(new CustomEvent('store_do'));
    //Store.setSomething(2)
    window..dispatchEvent(new CustomEvent('store_set',
      {'detail':{'val':2}}
    )); 
  };
};