For some reason, the code in the original most formatted with a lot of vertical
white space in my mailer. I tried to fix it below:
On Nov 11, 2011, at 10:50 AM, Erik Arvidsson wrote:
> We've all looked at jQuery code and envied the conciseness of its chaining
> APIs. Most of us also looked at it and thought; Yuk, making everything a
> method of jQuery and always return the jQuery object is ugly.
>
> However, I (with some help) realized that the .{ operator can be used to
> solve most of these chaining scenarios without any changes to any API.
>
> Take this jQuery sample code:
>
$('#my-element').
css({
'color': 'red',
'padding': '5px'
}).
text('Hello');
>
>
>
>
>
> With the 'stache:
>
document.querySelector('#my-element').{
style.{
'color': 'red',
'padding': '5px'
}. // should be , instead of . ??????????????
textContent: 'Hello'
};
>
> One could easily see some extensions to make this even more useful. For
> example allowing method calls and member lookups etc would sweeten the deal.
> Here is a more advanced example that assumes we have some useful properties
> on the returned DOM collections:
>
> jQuery:
>
$('#myTable').
find('.firstColumn').
css({'background': 'red', 'border': '2px solid black'}).
text('first column').
end().
find('.lastColumn').
css('background','blue').
text('last column');
>
>
>
> With the 'stache:
>
>
document.querySelector('#myTable').{
querySelectorAll('.firstColumn').{
style.{background: 'red', border: '2px solid black'},
textContent: 'first column'
},
querySelectorAll('.lastColumn').{
style.{background: 'blue', border: '2px solid black'},
textContent: 'last column'
}
};
>
An extension that I've consider is to allow nested stashes:
foo.{
bar: 5, //add "bar" property to foo
baz.{bam:6} //add "bam" property to object that is the value of foo.baz
}
Using [ ] bracketed property keys, they could be computed:
foo.{
bar: 5, //add "bar" property to foo
[foo.someSringValuedFunction()].{bam:6} //add "bam" property to object
that is the value of foo.baz
}
but it isn 't clear that it would cover what you are trying to do there. Also I
no longer like [ ] for computed property names in literals...
> I've also been told that this is just another form of Smalltalk's message
> cascade.
>
Maybe a cascade essentially captures the first method "receiver" and uses it
for a sequence of method calls. I smalltalk:
foo bar; baz; bam.
(; is the cascade operator) pretty much means:
temp = foo.
temp bar.
temp baz.
temp bam.
Allen
_______________________________________________
es-discuss mailing list
es-discuss@mozilla.org
https://mail.mozilla.org/listinfo/es-discuss
