Erik,
It's not really about anonymous function, but rather such frequent
(for every element) invocation of a method which is quite "heavy".
This could of course be useful when plain string insertion is not the
best solution (though I don't see why it would be so).
I am sometimes using "makeElement" helper - its performance is a
constant (i.e. it does not depend on the size of an element being
created):
String.prototype.makeElement = function() {
var element = Element('div');
element.innerHTML = this;
return element.down();
}
...
var table = '<table><tr><td>...</td></tr></table>'.makeElement();
As a side note, appendChild is buggy with certain elements. #insert on
the other hand smoothes all these quirks.
Best,
kangax
On May 6, 7:03 pm, "Erik R." <[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]> 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]> 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]> 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
-~----------~----~----~----~------~----~------~--~---
