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
| ... | |
| function Logger(target, pattern) { | |
| return new Proxy(target, { | |
| get: function(obj, prop) { | |
| var value, name; | |
| if (!Reflect.has(obj, prop)) { | |
| return; | |
| } | |
| name = target.name || target.constructor.name; | |
| value = Reflect.get(obj, prop); |
kyuwoo-choi
/ book-collection-aop-decorator.js
Created
June 14, 2017 16:16
hello world AOP - decorator
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
| function wove(pattern) { | |
| return function (target) { | |
| target.prototype = Logger(target.prototype, pattern); | |
| }; | |
| } | |
| @wove(/^get.*/) | |
| class BookCollection { | |
| getNameByISBN(isbn) { |
kyuwoo-choi
/ book-collection-aop-decorator-equals.js
Created
June 14, 2017 16:18
hello world AOP - decorator equal
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
| wove(/^get.*/)(BookCollection); |
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
| let originalFunction = Collection.prototype.getNameByISBN; | |
| Collection.prototype.getNameByISBN = function () { | |
| let result = originalFunction.apply(this, arguments); | |
| Logger.info(`Retrieving ${result.isbn} - ${result.name} has been succeed`); | |
| return result; | |
| }; |
kyuwoo-choi
/ custom-element-1.html
Created
July 23, 2017 06:30
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> | |
| <script src="../src/CurrentTime.js"></script> | |
| </head> | |
| <body> | |
| <current-time> | |
| <!-- fallback value --> | |
| 6/11/2017, 11:55:49 | |
| </current-time> |
kyuwoo-choi
/ custom-element-2.js
Created
July 23, 2017 06:31
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
| class CurrentTime extends HTMLElement { | |
| constructor() { | |
| // 클래스 초기화. 속성이나 하위 노드는 접근할 수는 없다. | |
| super(); | |
| } | |
| static get observedAttributes() { | |
| // 모니터링 할 속성 이름 | |
| return ['locale']; | |
| } | |
| connectedCallback() { |
kyuwoo-choi
/ custom-element-3.html
Created
July 23, 2017 06:32
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> | |
| <script src="../src/CurrentTime.js"></script> | |
| </head> | |
| <body> | |
| <div class="current-time"> | |
| <!-- fallback value --> | |
| 6/11/2017, 11:55:49 | |
| </div> |
kyuwoo-choi
/ custom-element-4.js
Created
July 23, 2017 06:33
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
| class CurrentTime { | |
| constructor(el) { | |
| this._el = el; | |
| this._init(); | |
| this.start(); | |
| } | |
| _init() { | |
| // 속성 변경을 모니터 | |
| this._localeChangedObserver = new MutationObserver(mutations => { | |
| mutations.forEach(mutation => { |
kyuwoo-choi
/ custom-element-5.html
Created
July 23, 2017 06:34
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
| <div class="user-profile"> | |
| <div class="layout card small">...</div> | |
| </div> | |
| <user-profile> | |
| <card-layout type="small">...</card-layout> | |
| </user-profile> |
kyuwoo-choi
/ custom-element-6.js
Created
July 23, 2017 06:34
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
| // 자바스크립트 컨트롤을 묶을 엘리먼트를 받아와야 한다. | |
| constructor(el) { | |
| this._el = el; | |
| } | |
| ... | |
| // 이 클래스 인스턴스가 `유지하는 엘리먼트`의 innerText | |
| this._el.innerText = 'text'; | |
| ... | |
| // 클래스 인스턴스와 엘리먼트의 라이프사이클은 다르다. | |
| // bootstrap |