Using monocle mustache for chaining.
Allen Wirfs-Brock
allen at wirfs-brock.com
Fri Nov 11 11:35:44 PST 2011
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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20111111/d24ac519/attachment-0001.html>
More information about the es-discuss
mailing list