-
-
Save tiller/1009237 to your computer and use it in GitHub Desktop.
140byt.es -- YET ANOTHER DOM BUILDER §
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 create = function(e,b,i){ | |
| e=document.createElement(e); // Create the HTML element. e(e) => /body/(/body/) => [body] => body | |
| for(i in b)e[i]=b[i]; // Apply all the gived-attributes | |
| return function(){ // function to append childs | |
| for(i=0;b=arguments[i++];) // lists every childs | |
| e.appendChild(b); // and appends them | |
| return e // then, return the DOM element | |
| } | |
| }; |
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(e,b,i){e=document.createElement(e);for(i in b)e[i]=b[i];return function(){for(i=0;b=arguments[i++];)e.appendChild(b);return e}} |
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
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE FUCK YOU WANT TO. |
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
| { | |
| "name": "YetAnotherDomBuilder", | |
| "description": "This DomBuilder ALSO builds a dom ! But it ALSO takes attributes in argument §", | |
| "keywords": [ | |
| "dom", | |
| "dombuilder", | |
| "dom builder" | |
| ] | |
| } |
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> | |
| <title>AGAIN AND AGAIN AND AGAIN AND AGAIN</title> | |
| </head> | |
| <body> | |
| <div id="ret"></div> | |
| <script> | |
| // write a small example that shows off the API for your example | |
| // and tests it in one fell swoop. | |
| var create = function(e,b,i){e=document.createElement(e);for(i in b)e[i]=b[i];return function(){for(i=0;b=arguments[i++];)e.appendChild(b);return e}}; | |
| document.getElementById("ret").appendChild( | |
| create('DIV', {align: 'center', innerHTML: 'Trololo<br/>'})( | |
| create('UL', {id: 'ul'})( | |
| create('LI', {innerHTML: 'This is the 1st li !'})(), | |
| create('LI')( | |
| create('UL')( | |
| create('LI', {innerHTML: 'A 2nd level li !'})(), | |
| create('LI', {innerHTML: 'And another one !'})() | |
| ) | |
| ) | |
| ), | |
| create('SPAN')(document.createTextNode('Thanks you <3')), | |
| create('div')() | |
| ) | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Why document.createElement(e(e))? Why not just document.createElement(e)?
Author
Because I use regexs, so e return "/body/" and not just "body".
Given a regular expression /foo/, we want the shortest way to convert it to the string "foo".
var e = /foo/;
e.toString() // 12 characters
We can exploit a couple of things:
e.exec()can be invoked by the function call shorthand:e()- Both
exec()andcreateElement()take strings. So whatever is passed into them will be cast to a strings viatoString(). exec()returns an array. The default behaviour of array.toString() is ajoin()with comma as the delimiter. An array with a single item just becomes that item when converted to a string.
So, in essence:
document.createElement(e(e))
Expands to:
document.createElement(e.exec(e.toString()).toString())
With e(e) taking up just 4 characters.
hey @tiller, would you mind taking the trailing comma out of your package.json keywords?
Author
Done :)
I'm getting an error: "e is not a function" in FireFox 5.0 / Ubuntu.
Author
Yes I know,
From: http://hacks.mozilla.org/2011/06/firefox5/
"Regular expressions are no longer callable as if they were functions; this change has been made in concert with the WebKit team to ensure compatibility (see WebKit bug 28285)."
@atesgoral, what you just explained is pretty neat - but why are regexes used instead of strings?
Author
I changed it for Stings.
Regex are pretty, because in most text editor, the regex'coloration is different from the string'one, so it make the tree more readable :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
e(e)-- OMG!