JS BinObserver parttern// source https://jsbin.com/jabebad

4/20/2017 - 6:03 PM

JS Bin Observer parttern // source https://jsbin.com/jabebad

JS Bin

Observer parttern

<!DOCTYPE html>
<html>
<head>  
<meta name="description" content="Observer parttern">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
/*
Observer pattern is used when there is one-to-many relationship between objects such as if one object is modified, its depenedent objects are to be notified automatically. Observer pattern falls under behavioral pattern category.
*/
'use strict';

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Subject = (function () {
  function Subject() {
    _classCallCheck(this, Subject);
  }

  _createClass(Subject, [{
    key: 'attach',
    value: function attach(observer) {
      console.log('observer attach');
      this.observers.push(observer);
    }
  }, {
    key: 'dettach',
    value: function dettach(observer) {
      for (var i in this.observers) {
        if (this.observers[i] === observer) {
          this.observers.splice(i, 1);
        }
      }
    }
  }, {
    key: 'notify',
    value: function notify() {
      console.log('observer notify');
      for (var i in this.observers) {
        this.observers[i].update(this);
      }
    }
  }]);

  return Subject;
})();

var ConcreteSubject = (function (_Subject) {
  _inherits(ConcreteSubject, _Subject);

  function ConcreteSubject() {
    _classCallCheck(this, ConcreteSubject);

    _get(Object.getPrototypeOf(ConcreteSubject.prototype), 'constructor', this).call(this);
    this.subjectState = null;
    this.observers = [];
    console.log('ConcreteSubject create');
  }

  _createClass(ConcreteSubject, [{
    key: 'getState',
    value: function getState() {
      return this.subjectState;
    }
  }, {
    key: 'setState',
    value: function setState(state) {
      this.subjectState = state;
      this.notify();
    }
  }]);

  return ConcreteSubject;
})(Subject);

var Observer = (function () {
  function Observer() {
    _classCallCheck(this, Observer);
  }

  _createClass(Observer, [{
    key: 'update',
    value: function update() {}
  }]);

  return Observer;
})();

var ConcreteObserver = (function (_Observer) {
  _inherits(ConcreteObserver, _Observer);

  function ConcreteObserver() {
    _classCallCheck(this, ConcreteObserver);

    _get(Object.getPrototypeOf(ConcreteObserver.prototype), 'constructor', this).call(this);
    this.observerState = '';
    console.log('ConcreteObserver create');
  }

  _createClass(ConcreteObserver, [{
    key: 'update',
    value: function update(Subject) {
      this.observerState = Subject.getState();
      console.log('Observer new state: ' + this.observerState);
    }
  }]);

  return ConcreteObserver;
})(Observer);

function test() {
  var observer1 = new ConcreteObserver();
  var observer2 = new ConcreteObserver();
  var subject = new ConcreteSubject();
}

test();
</script>



<script id="jsbin-source-javascript" type="text/javascript">/*
Observer pattern is used when there is one-to-many relationship between objects such as if one object is modified, its depenedent objects are to be notified automatically. Observer pattern falls under behavioral pattern category.
*/
class Subject {
  constructor() {
    
  }
  
  attach(observer) {
    console.log('observer attach');
    this.observers.push(observer);
  }
  
  dettach(observer) {
    for(let i in this.observers) {
      if(this.observers[i] === observer) {
        this.observers.splice(i, 1);
      }
    }
  }
  
  notify() {
    console.log('observer notify');
    for(let i in this.observers) {
      this.observers[i].update(this);
    }
  }
  
}

class ConcreteSubject extends Subject {
  constructor() {
    super();
    this.subjectState = null;
    this.observers = [];    
    console.log('ConcreteSubject create');
  }
  
  getState() {
    return this.subjectState;
  }
  
  setState(state) {
    this.subjectState = state;
    this.notify();
  }
  
}

class Observer {
  constructor() {}
  
  update() {
    
  }
}

class ConcreteObserver extends Observer {
  constructor() {
    super();
    this.observerState = '';
    console.log('ConcreteObserver create');
  }
  
  update(Subject) {
    this.observerState = Subject.getState();
    console.log('Observer new state: ' + this.observerState);
  }
  
}

function test() {  
  const observer1 = new ConcreteObserver();
  const observer2 = new ConcreteObserver();
  const subject = new ConcreteSubject();
  
}

test();</script></body>
</html>

jsbin.jabebad.js

/*
Observer pattern is used when there is one-to-many relationship between objects such as if one object is modified, its depenedent objects are to be notified automatically. Observer pattern falls under behavioral pattern category.
*/
'use strict';

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Subject = (function () {
  function Subject() {
    _classCallCheck(this, Subject);
  }

  _createClass(Subject, [{
    key: 'attach',
    value: function attach(observer) {
      console.log('observer attach');
      this.observers.push(observer);
    }
  }, {
    key: 'dettach',
    value: function dettach(observer) {
      for (var i in this.observers) {
        if (this.observers[i] === observer) {
          this.observers.splice(i, 1);
        }
      }
    }
  }, {
    key: 'notify',
    value: function notify() {
      console.log('observer notify');
      for (var i in this.observers) {
        this.observers[i].update(this);
      }
    }
  }]);

  return Subject;
})();

var ConcreteSubject = (function (_Subject) {
  _inherits(ConcreteSubject, _Subject);

  function ConcreteSubject() {
    _classCallCheck(this, ConcreteSubject);

    _get(Object.getPrototypeOf(ConcreteSubject.prototype), 'constructor', this).call(this);
    this.subjectState = null;
    this.observers = [];
    console.log('ConcreteSubject create');
  }

  _createClass(ConcreteSubject, [{
    key: 'getState',
    value: function getState() {
      return this.subjectState;
    }
  }, {
    key: 'setState',
    value: function setState(state) {
      this.subjectState = state;
      this.notify();
    }
  }]);

  return ConcreteSubject;
})(Subject);

var Observer = (function () {
  function Observer() {
    _classCallCheck(this, Observer);
  }

  _createClass(Observer, [{
    key: 'update',
    value: function update() {}
  }]);

  return Observer;
})();

var ConcreteObserver = (function (_Observer) {
  _inherits(ConcreteObserver, _Observer);

  function ConcreteObserver() {
    _classCallCheck(this, ConcreteObserver);

    _get(Object.getPrototypeOf(ConcreteObserver.prototype), 'constructor', this).call(this);
    this.observerState = '';
    console.log('ConcreteObserver create');
  }

  _createClass(ConcreteObserver, [{
    key: 'update',
    value: function update(Subject) {
      this.observerState = Subject.getState();
      console.log('Observer new state: ' + this.observerState);
    }
  }]);

  return ConcreteObserver;
})(Observer);

function test() {
  var observer1 = new ConcreteObserver();
  var observer2 = new ConcreteObserver();
  var subject = new ConcreteSubject();
}

test();

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

JS Bin Observer parttern // source https://jsbin.com/jabebad