Created
June 11, 2018 21:15
-
-
Save sandeep1995/7d33c72f18401d3c4b061f1fc79c2d96 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/deyaboj
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> | |
// ------------- LifeCycle ----------------- // | |
'use strict'; | |
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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | |
var lifeCycleInstance = Symbol('LifeCycleInstance'); | |
var singletonEnforcer = Symbol('SingletonEnforcer'); | |
// naming must be like `{componwnt-formal-name}.{action-name}` | |
var VU_DRAWN_EVT = 'visual-unit.drawn'; | |
var LifeCycleManager = (function () { | |
function LifeCycleManager(enforcer) { | |
_classCallCheck(this, LifeCycleManager); | |
if (enforcer !== singletonEnforcer) { | |
throw new Error('Can not construct LifeCycle'); | |
} | |
this._init(); | |
} | |
// ----------- Picasso Library --------------- // | |
_createClass(LifeCycleManager, [{ | |
key: '_init', | |
value: function _init() { | |
this._notifiers = _defineProperty({}, VU_DRAWN_EVT, function (resolveFn) { | |
return function (notifier) { | |
return resolveFn(notifier); | |
}; | |
}); | |
this._initPromises(); | |
} | |
}, { | |
key: 'retrieve', | |
value: function retrieve(promiseName) { | |
return this._promises[promiseName]; | |
} | |
}, { | |
key: '_initPromises', | |
value: function _initPromises() { | |
var _this = this; | |
this._promises = _defineProperty({}, VU_DRAWN_EVT, new Promise(function (resolve) { | |
_this._notifiers[VU_DRAWN_EVT] = _this._notifiers[VU_DRAWN_EVT](resolve); | |
})); | |
} | |
}, { | |
key: 'notify', | |
value: function notify(notifier) { | |
var formalName = notifier.client.constructor.formalName(); | |
this._notifiers[formalName + '.' + notifier.action](notifier); | |
} | |
}], [{ | |
key: 'instance', | |
get: function get() { | |
if (!this[lifeCycleInstance]) { | |
this[lifeCycleInstance] = new LifeCycleManager(singletonEnforcer); | |
} | |
return this[lifeCycleInstance]; | |
} | |
}]); | |
return LifeCycleManager; | |
})(); | |
var VisualUnit = (function () { | |
function VisualUnit() { | |
_classCallCheck(this, VisualUnit); | |
this.lifeCycleManager = LifeCycleManager.instance; | |
} | |
_createClass(VisualUnit, [{ | |
key: 'draw', | |
value: function draw() { | |
console.log('drawing visual-unit'); | |
this.lifeCycleManager.notify({ client: this, action: 'drawn', info: 'extra' }); | |
} | |
}], [{ | |
key: 'formalName', | |
value: function formalName() { | |
return 'visual-unit'; | |
} | |
}]); | |
return VisualUnit; | |
})(); | |
var Canvas = (function () { | |
function Canvas() { | |
_classCallCheck(this, Canvas); | |
console.log('init canvas'); | |
this.lifeCycleManager = LifeCycleManager.instance; | |
} | |
// -------------- User Code ------------ // | |
_createClass(Canvas, [{ | |
key: 'hook', | |
value: function hook(hookName) { | |
return this.lifeCycleManager.retrieve(hookName); | |
} | |
}, { | |
key: 'mount', | |
value: function mount() { | |
setTimeout(function () { | |
var visualUnit = new VisualUnit(); | |
visualUnit.draw(); | |
}, 100); | |
} | |
}]); | |
return Canvas; | |
})(); | |
var canvas = new Canvas(); | |
canvas.hook(VU_DRAWN_EVT).then(function (d) { | |
console.log('after resolving'); | |
console.log(d); | |
}); | |
canvas.mount(); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// ------------- LifeCycle ----------------- // | |
const lifeCycleInstance = Symbol('LifeCycleInstance'); | |
const singletonEnforcer = Symbol('SingletonEnforcer'); | |
// naming must be like `{componwnt-formal-name}.{action-name}` | |
const VU_DRAWN_EVT = 'visual-unit.drawn'; | |
class LifeCycleManager { | |
constructor(enforcer) { | |
if (enforcer !== singletonEnforcer) { | |
throw new Error('Can not construct LifeCycle'); | |
} | |
this._init(); | |
} | |
_init() { | |
this._notifiers = { | |
[VU_DRAWN_EVT]: resolveFn => (notifier) => resolveFn(notifier), | |
} | |
this._initPromises(); | |
} | |
retrieve(promiseName) { | |
return this._promises[promiseName]; | |
} | |
_initPromises() { | |
this._promises = { | |
[VU_DRAWN_EVT]: new Promise((resolve) => { | |
this._notifiers[VU_DRAWN_EVT] = this._notifiers[VU_DRAWN_EVT](resolve); | |
}) | |
} | |
} | |
notify(notifier) { | |
let formalName = notifier.client.constructor.formalName(); | |
this._notifiers[`${formalName}.${notifier.action}`](notifier); | |
} | |
static get instance() { | |
if (!this[lifeCycleInstance]) { | |
this[lifeCycleInstance] = new LifeCycleManager(singletonEnforcer); | |
} | |
return this[lifeCycleInstance]; | |
} | |
} | |
// ----------- Picasso Library --------------- // | |
class VisualUnit { | |
constructor() { | |
this.lifeCycleManager = LifeCycleManager.instance; | |
} | |
static formalName() { | |
return 'visual-unit'; | |
} | |
draw() { | |
console.log('drawing visual-unit'); | |
this.lifeCycleManager.notify({client: this, action: 'drawn', info: 'extra'}); | |
} | |
} | |
class Canvas { | |
constructor() { | |
console.log('init canvas'); | |
this.lifeCycleManager = LifeCycleManager.instance; | |
} | |
hook(hookName) { | |
return this.lifeCycleManager.retrieve(hookName); | |
} | |
mount() { | |
setTimeout(() => { | |
let visualUnit = new VisualUnit(); | |
visualUnit.draw(); | |
}, 100); | |
} | |
} | |
// -------------- User Code ------------ // | |
let canvas = new Canvas(); | |
canvas.hook(VU_DRAWN_EVT).then(d => { | |
console.log('after resolving'); | |
console.log(d); | |
}); | |
canvas.mount(); | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ------------- LifeCycle ----------------- // | |
'use strict'; | |
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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | |
var lifeCycleInstance = Symbol('LifeCycleInstance'); | |
var singletonEnforcer = Symbol('SingletonEnforcer'); | |
// naming must be like `{componwnt-formal-name}.{action-name}` | |
var VU_DRAWN_EVT = 'visual-unit.drawn'; | |
var LifeCycleManager = (function () { | |
function LifeCycleManager(enforcer) { | |
_classCallCheck(this, LifeCycleManager); | |
if (enforcer !== singletonEnforcer) { | |
throw new Error('Can not construct LifeCycle'); | |
} | |
this._init(); | |
} | |
// ----------- Picasso Library --------------- // | |
_createClass(LifeCycleManager, [{ | |
key: '_init', | |
value: function _init() { | |
this._notifiers = _defineProperty({}, VU_DRAWN_EVT, function (resolveFn) { | |
return function (notifier) { | |
return resolveFn(notifier); | |
}; | |
}); | |
this._initPromises(); | |
} | |
}, { | |
key: 'retrieve', | |
value: function retrieve(promiseName) { | |
return this._promises[promiseName]; | |
} | |
}, { | |
key: '_initPromises', | |
value: function _initPromises() { | |
var _this = this; | |
this._promises = _defineProperty({}, VU_DRAWN_EVT, new Promise(function (resolve) { | |
_this._notifiers[VU_DRAWN_EVT] = _this._notifiers[VU_DRAWN_EVT](resolve); | |
})); | |
} | |
}, { | |
key: 'notify', | |
value: function notify(notifier) { | |
var formalName = notifier.client.constructor.formalName(); | |
this._notifiers[formalName + '.' + notifier.action](notifier); | |
} | |
}], [{ | |
key: 'instance', | |
get: function get() { | |
if (!this[lifeCycleInstance]) { | |
this[lifeCycleInstance] = new LifeCycleManager(singletonEnforcer); | |
} | |
return this[lifeCycleInstance]; | |
} | |
}]); | |
return LifeCycleManager; | |
})(); | |
var VisualUnit = (function () { | |
function VisualUnit() { | |
_classCallCheck(this, VisualUnit); | |
this.lifeCycleManager = LifeCycleManager.instance; | |
} | |
_createClass(VisualUnit, [{ | |
key: 'draw', | |
value: function draw() { | |
console.log('drawing visual-unit'); | |
this.lifeCycleManager.notify({ client: this, action: 'drawn', info: 'extra' }); | |
} | |
}], [{ | |
key: 'formalName', | |
value: function formalName() { | |
return 'visual-unit'; | |
} | |
}]); | |
return VisualUnit; | |
})(); | |
var Canvas = (function () { | |
function Canvas() { | |
_classCallCheck(this, Canvas); | |
console.log('init canvas'); | |
this.lifeCycleManager = LifeCycleManager.instance; | |
} | |
// -------------- User Code ------------ // | |
_createClass(Canvas, [{ | |
key: 'hook', | |
value: function hook(hookName) { | |
return this.lifeCycleManager.retrieve(hookName); | |
} | |
}, { | |
key: 'mount', | |
value: function mount() { | |
setTimeout(function () { | |
var visualUnit = new VisualUnit(); | |
visualUnit.draw(); | |
}, 100); | |
} | |
}]); | |
return Canvas; | |
})(); | |
var canvas = new Canvas(); | |
canvas.hook(VU_DRAWN_EVT).then(function (d) { | |
console.log('after resolving'); | |
console.log(d); | |
}); | |
canvas.mount(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment