Created
July 10, 2015 04:22
-
-
Save hkusu/f160f3c2a380d31ea4d9 to your computer and use it in GitHub Desktop.
SimpleEventEmitterを利用したMVC＆データバインドの例
This file contains hidden or 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 lang="ja"> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <input type="text" id="name" /> | |
| <p id="message" ></p> | |
| <script src="SimpleEventEmitter.js"></script> | |
| <script> | |
| (function(document) { | |
| // Model | |
| function SomeModel() { | |
| this.name = ''; | |
| SimpleEventEmitter.apply(this); | |
| } | |
| SomeModel.CHANGE = 'change'; | |
| SomeModel.prototype.setName = function(name) { | |
| this.name = name; | |
| this.emit(SomeModel.CHANGE, null); | |
| }; | |
| // Controller | |
| (function (model) { | |
| if (!(model instanceof SomeModel)) { | |
| throw new TypeError('Invalid argument'); | |
| } | |
| var name = document.getElementById('name'); | |
| var message = document.getElementById('message'); | |
| name.addEventListener('input', function(e) { | |
| model.setName(e.target.value); | |
| }); | |
| model.on(SomeModel.CHANGE, function() { | |
| message.innerText = model.name; | |
| }); | |
| })(new SomeModel()); | |
| })(window.document); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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() { | |
| 'use strict'; | |
| var moduleName = 'SimpleEventEmitter'; | |
| var SimpleEventEmitter = function() { | |
| }; | |
| function isString(arg) { | |
| return typeof arg === 'string'; | |
| } | |
| function isFunction(arg) { | |
| return typeof arg === 'function'; | |
| } | |
| function isUndefined(arg) { | |
| return typeof arg === 'undefined'; | |
| } | |
| function isObject(arg) { | |
| return typeof arg === 'object' && arg !== null; | |
| } | |
| var p = SimpleEventEmitter.prototype; | |
| p.on = function(event, callback) { | |
| if (!isString(event) || !isFunction(callback)) { | |
| throw new TypeError('Invalid argument'); | |
| } | |
| if (isUndefined(this.subscribers)) { | |
| this.subscribers = {}; | |
| } | |
| if (isUndefined(this.subscribers[event])) { | |
| this.subscribers[event] = []; | |
| } | |
| this.subscribers[event].push(callback); | |
| return callback; | |
| }; | |
| p.off = function(event, callback) { | |
| if (isUndefined(callback)) { | |
| if (!isString(event)) { | |
| throw new TypeError('Invalid argument'); | |
| } | |
| if (isUndefined(this.subscribers) || isUndefined(this.subscribers[event])) { | |
| return; | |
| } | |
| delete this.subscribers[event]; | |
| } else { | |
| if (!isString(event) || !isFunction(callback)) { | |
| throw new TypeError('Invalid argument'); | |
| } | |
| if (isUndefined(this.subscribers) || isUndefined(this.subscribers[event])) { | |
| return; | |
| } | |
| var subscribers = this.subscribers[event], | |
| i, | |
| max = subscribers.length; | |
| for (i = 0; i < max; i++) { | |
| var subscriber = subscribers[i]; | |
| if (subscriber === callback) { | |
| subscribers.splice(i, 1); | |
| i--; | |
| max--; | |
| } | |
| } | |
| } | |
| }; | |
| p.emit = function(event, arg) { | |
| if (!isString(event)) { | |
| throw new TypeError('Invalid argument'); | |
| } | |
| if (isUndefined(this.subscribers) || isUndefined(this.subscribers[event])) { | |
| return; | |
| } | |
| var subscribers = this.subscribers[event], | |
| i, | |
| max = subscribers.length; | |
| for (i = 0; i < max; i++) { | |
| var subscriber = subscribers[i]; | |
| subscriber(arg); | |
| } | |
| }; | |
| p.clear = function() { | |
| if (!isUndefined(arguments[0])) { | |
| throw new TypeError('Invalid argument'); | |
| } | |
| this.subscribers = {}; | |
| }; | |
| SimpleEventEmitter.apply = function(obj) { | |
| if (!isObject(obj)) { | |
| throw new TypeError('Invalid argument') | |
| } | |
| Object.keys(p).forEach(function (key) { | |
| if (p.hasOwnProperty(key) && isFunction(p[key])) { | |
| obj[key] = p[key]; | |
| } | |
| }); | |
| }; | |
| window[moduleName] = SimpleEventEmitter; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment