Very cool! A quick test took 5 seconds to build 500 tables with 4 cells
each. I guess that's reasonable, but could be better.
Jon L. wrote:
> In theory (at least), couldn't it be simplified to something like:
>
> var $E = function (/** tag, attr, child0, ..., childN **/) {
> var args = $A(arguments);
> var element = new Element(args.shift(), args.shift());
> args.each(element.appendChild.bind(element));
> return element;
> };
>
> No idea whether it helps with performance.
> But, at minimal, it removes the anonymous function.
>
> - Jon L.
>
> On Tue, May 6, 2008 at 6:03 PM, Erik R. <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
>
>
> Sure. An old-school for loop is probably more efficient. But most of
> the Enumerable methods already use each() with an anonymous function
> anyway, so presumably they could be further optimized as well. I was
> just sticking with the prototype.js style.
>
> On May 7, 12:43 am, Hector Virgen <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
> > Maybe this can be optimized a little bit? I'm not sure if this
> helps,
> > but it doesn't use any anonymous functions.
> >
> > var $E = function(tagName, attributes, childrenVarArgs)
> > {
> > var element = new Element(tagName, attributes);
> > if (arguments.length < 3) return element;
> > var args = $(arguments).flatten();
> > var size = args.size();
> > for (var i = 1; i <= size; i++) {
> > element.appendChild(args.indexOf(i));
> > }
> > return element;
> >
> > };
> > kangax wrote:
> > > So for every single one of those cells (that $E is called)
> there is a
> > > "new Element" instantiation and 2 enumerable methods (that are
> being
> > > called recursively) : )
> > > Why not just use string interpolation?
> >
> > > - kangax
> >
> > > On May 6, 5:43 pm, "Erik R." <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
> >
> > >> I was thinking "Element", but now that you mention it, "Erik"
> makes
> > >> more sense. :-)
> >
> > >> On May 6, 11:36 pm, Hector Virgen <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
> >
> > >>> Very nice! Is $E() short for Erik? :)
> >
> > >>> Erik R. wrote:
> >
> > >>>> Recently I've been using prototype's wonderful new DOM creation
> > >>>> syntax. But I found that it's still too verbose. Say I
> want to
> > >>>> create the following table:
> >
> > >>>> <table id="myTable">
> > >>>> <thead>
> > >>>> <tr>
> > >>>> <th>Title A</th>
> > >>>> <th>Title B</th>
> > >>>> </tr>
> > >>>> </thead>
> > >>>> <tbody>
> > >>>> <tr>
> > >>>> <td>A</td>
> > >>>> <td>B</td>
> > >>>> </tr>
> > >>>> </tbody>
> > >>>> </table>
> >
> > >>>> Simple, right? But, as I understand the prototype.js DOM
> building, to
> > >>>> build this table, I'd have to do:
> >
> > >>>> var table = new Element('table', {id:myTable});
> > >>>> var thead = new Element('thead');
> > >>>> table.appendChild(thead);
> > >>>> var theadRow = new Element('tr');
> > >>>> thead.appendChild(theadRow);
> > >>>> theadRow.appendChild(new Element('th').update('Title A'));
> > >>>> theadRow.appendChild(new Element('th').update('Title B'));
> > >>>> var tbody = new Element('tbody');
> > >>>> table.appendChild(tbody);
> > >>>> var tbodyRow = new Element('tr');
> > >>>> tbody.appendChild(tbodyRow);
> > >>>> tbodyRow.appendChild(new Element('td').update('A'));
> > >>>> tbodyRow.appendChild(new Element('td').update('B'));
> >
> > >>>> Grossly verbose, I think you'll agree. Particularly, it's
> the saving
> > >>>> of the local variables that bothers me.
> >
> > >>>> But what if we had a shortcut function? Just like $() is
> short for
> > >>>> document.getElementById(), I think we could benefit from a
> shortcut
> > >>>> element function. So I've written one: $E.
> >
> > >>>> var $E = function(tagName, attributes, childrenVarArgs)
> > >>>> {
> > >>>> var element = new Element(tagName, attributes);
> > >>>> $A(arguments).flatten().each(function(child, i)
> > >>>> {
> > >>>> if (i > 1 && child)
> > >>>> element.appendChild(child);
> > >>>> });
> > >>>> return element;
> > >>>> };
> >
> > >>>> It takes the tagName and attributes just like the Element
> constructor,
> > >>>> but it will also take other arguments that will be appended as
> > >>>> children. Look at the new code to create that same table:
> >
> > >>>> var table = $E('table', {id:myTable},
> > >>>> $E('thead', null,
> > >>>> $E('tr', null,
> > >>>> $E('th').update('Title A'),
> > >>>> $E('th').update('Title B'))),
> > >>>> $E('tbody', null,
> > >>>> $E('tr', null,
> > >>>> $E('td').update('Title A'),
> > >>>> $E('td').update('Title B'))));
> >
> > >>>> A little nicer, don't you think? Some intelligent argument
> parsing
> > >>>> might also be added to get rid of those null attribute
> parameters.
> >
> > >>>> Anyway, I'm submitting this as a suggestion to be
> incorporated into
> > >>>> the next release of prototype.js. Let me know what you think.
> >
> > >>>> Cheers,
> > >>>> Erik
>
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to rubyonrails-spinoffs@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
