Last active
October 10, 2015 12:38
-
-
Save benqus/3691561 to your computer and use it in GitHub Desktop.
[Experimental] Class that binds together a JavaScript object with a HTMLElement [ECMAScript5]
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> | |
| <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> | |
| <script src='js/UIElement.min.js'></script> | |
| <script src='js/unitTest.js'></script> | |
| </head> | |
| <body></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
| /** | |
| * UIElement class | |
| * @param [tagName] {String} the nodeName of the HTMLElement to bind to | |
| * @param [ctx] {Function} this function will be called to decorate the new instance | |
| */ | |
| var UIElement = function (arg, ctx) { | |
| var element, | |
| context; | |
| //only one argument given | |
| if (typeof arg === 'function' || !arg) { | |
| element = document.createElement('div'); | |
| context = arg; | |
| } | |
| //both arguments given | |
| else | |
| if (typeof arg === 'string') { | |
| element = document.createElement(arg); | |
| context = ctx; | |
| } | |
| /** | |
| * UIElement constructor | |
| */ | |
| function UIElement() { | |
| /** | |
| * returns the HTMLElement to append or to modify | |
| */ | |
| this.getHTMLElement = function () { | |
| return element; | |
| }; | |
| if (typeof context === 'function') { | |
| context.call(this); | |
| } | |
| }; | |
| //setting up the prototype | |
| UIElement.prototype = element; | |
| //return the new instance | |
| return new UIElement(); | |
| }; |
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
| var UIElement=function(a,b){function UIElement(){this.getHTMLElement=function(){return c};if(typeof d==="function"){d.call(this)}}var c,d;if(typeof a==="function"||!a){c=document.createElement("div");d=a}else if(typeof a==="string"){c=document.createElement(a);d=b}UIElement.prototype=c;return new UIElement} |
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
| //UNIT TEST | |
| window.onload = function () { | |
| //UIELement class instantiation test | |
| console.log("UIELement class instantiation test"); | |
| var a = new UIElement('a', function () { | |
| this.personName = 'customName'; | |
| }); | |
| var b = new UIElement(function () { | |
| this.personName = 'secondCustomName'; | |
| }); | |
| var c = new UIElement('strong'); | |
| console.log('instanceof HTMLAnchorElement', a instanceof HTMLAnchorElement); //true | |
| console.log('instanceof HTMLDivElement', b instanceof HTMLDivElement); //true | |
| console.log('instanceof HTMLElement', c instanceof HTMLElement); //true | |
| console.log('APPENDING: ', document.body.appendChild(b.getHTMLElement())); | |
| b.textContent = b.personName; | |
| console.log('a: ', a.getHTMLElement()); | |
| console.log('b: ', b.getHTMLElement()); | |
| console.log('c: ', c.getHTMLElement()); | |
| console.log('a.personName: ', a.personName); //"customName" | |
| console.log('b.personName: ', b.personName); //"secondCustomName" | |
| console.log('c.personName: ', c.personName); //undefined | |
| //View class inheritance test | |
| console.log("View class inheritance test"); | |
| var View = function (name) { | |
| function View() { | |
| this.personName = name; | |
| this.age = 26; | |
| } | |
| View.prototype = new UIElement(); | |
| return new View(); | |
| } | |
| console.log(new View("Bence")); //prototype should be UIElement and HTMLDivElement | |
| //working with jQuery | |
| console.log( | |
| 'Setting class of the instance "$(a).attr({\'class\':\'myClass\'})": ', | |
| $(a).attr({'class':'myClass'}) | |
| ); | |
| console.log('getting the HTMLElement: ', $(a)[0].getHTMLElement()); | |
| console.log('instance attribute: ', a.personName); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Now, it should work properly... =)