Last active
December 5, 2016 22:15
-
-
Save webketje/a5671305418f59b54d5e0ce93b6d5357 to your computer and use it in GitHub Desktop.
Superminimal virtual DOM utility
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 vEl = function(element, options) { | |
var root = document.createElement(element); | |
for (var option in options) { | |
if (option === 'events') { | |
for (var event in options.events) | |
root.addEventListener(event, options.events[event], false); | |
} else if (option === 'children') { | |
for (var i = 0, len = options.children.length; i < len; i++) | |
root.appendChild(options.children[i]); | |
} else if (root.hasOwnProperty(option)) { | |
root[option] = options[option]; | |
} else | |
root.setAttribute(option, options[option]); | |
} | |
return root; | |
}; | |
var vText = function(text) { | |
return document.createTextNode(text); | |
}; |
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 main = vEl('div', { | |
id: 'page-view', | |
children: [ | |
vEl('div', { | |
id: 'breadcrumbs' | |
}) | |
] | |
}); | |
// returns div#page-view with div#breadcrumbs | |
// alias for querySelector ? | |
var bc = main.get('#breadcrumbs'); | |
// alias for addEventListener ? | |
bc.on('click', function(e) { | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Should events really be part of the function ? They can still be set after the dom element has been returned, and they don't really belong to the element, they are just bound to them by some external force (eg. the developer or app).