Response title
This is preview!
Move this topic
Unelegant Code
in Developing jQuery Core
•
14 years ago
I'm curious: Are there any pieces of code that use jQuery, right now,
that you feel are unelegant or ugly? (Presumably ones that've already
been optimized to the best of their ability.)
One area of improvement that I was thinking of was something along the lines of:
// ugly
$("#foo").val( $("#bar").val() );
// a bit better
$("#foo").val( $("#bar") );
this would be an easy change, just make .attr() do something like:
if ( arg.jquery )
val = arg.val() || arg.text() || "";
Any other thoughts? I wonder if there are common cases that could be
improved with some simple code additions to core.
--John
that you feel are unelegant or ugly? (Presumably ones that've already
been optimized to the best of their ability.)
One area of improvement that I was thinking of was something along the lines of:
// ugly
$("#foo").val( $("#bar").val() );
// a bit better
$("#foo").val( $("#bar") );
this would be an easy change, just make .attr() do something like:
if ( arg.jquery )
val = arg.val() || arg.text() || "";
Any other thoughts? I wonder if there are common cases that could be
improved with some simple code additions to core.
--John
Replies(60)
Re: Unelegant Code
14 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">It's funny you mention this with the val() example, because I just wrote something similar today, but using text():<div>
</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var $toggleInfo = $('#toggleInfo');
</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$toggleInfo.text( $toggleInfo.text() == 'hide contact info' ? 'bring back contact info' : 'hide contact info' );</div><div>
<div><br class="webkit-block-placeholder"></div><div>Kind of ugly.</div><div>
</div><div>Can't think of anything else at the moment, but will send them along if I bump across anything.</div><div>Well, I can think of plenty of places where *my* code is inelegant, but not where jQuery is to blame.</div><div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Sep 26, 2008, at 1:59 PM, John Resig wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
I'm curious: Are there any pieces of code that use jQuery, right now,
that you feel are unelegant or ugly? (Presumably ones that've already
been optimized to the best of their ability.)
One area of improvement that I was thinking of was something along the lines of:
// ugly
$("#foo").val( $("#bar").val() );
// a bit better
$("#foo").val( $("#bar") );
this would be an easy change, just make .attr() do something like:
if ( arg.jquery )
val = arg.val() || arg.text() || "";
Any other thoughts? I wonder if there are common cases that could be
improved with some simple code additions to core.
--John
</div></blockquote></div>
</div>
</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var $toggleInfo = $('#toggleInfo');
</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$toggleInfo.text( $toggleInfo.text() == 'hide contact info' ? 'bring back contact info' : 'hide contact info' );</div><div>
<div><br class="webkit-block-placeholder"></div><div>Kind of ugly.</div><div>
</div><div>Can't think of anything else at the moment, but will send them along if I bump across anything.</div><div>Well, I can think of plenty of places where *my* code is inelegant, but not where jQuery is to blame.</div><div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div><br class="Apple-interchange-newline">____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Sep 26, 2008, at 1:59 PM, John Resig wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
I'm curious: Are there any pieces of code that use jQuery, right now,
that you feel are unelegant or ugly? (Presumably ones that've already
been optimized to the best of their ability.)
One area of improvement that I was thinking of was something along the lines of:
// ugly
$("#foo").val( $("#bar").val() );
// a bit better
$("#foo").val( $("#bar") );
this would be an easy change, just make .attr() do something like:
if ( arg.jquery )
val = arg.val() || arg.text() || "";
Any other thoughts? I wonder if there are common cases that could be
improved with some simple code additions to core.
--John
</div></blockquote></div>
</div>
Leave a comment on kswedberg's reply
Re: Unelegant Code
14 years ago
May cause a little confuse:
$("#one").html( $("#two") );
== $("#one").html( $("#two").html() ); or == $("#one").html( $
("#two").val() || $("#two").text() ); ?
What about:
$("#one").css("color",$("#two")) == $("#one").css("color", $
("#two").css("color") )
$("#one").bind("click",$("#two")) == $("#one").bind("click", click
function of $("#two") )
:P
Leave a comment on cloudream's reply
Re: Unelegant Code
14 years ago
I've heard requests for that a lot - the ability to toggle text,
toggle values, toggle attributes, toggle css.
I wonder if something like this could be done:
.text("value A", "value B")
.val("value A", "value B")
.css("display", "none", "block")
and it sets the value to to opposite of what's currently shown. Just a thought.
--John
toggle values, toggle attributes, toggle css.
I wonder if something like this could be done:
.text("value A", "value B")
.val("value A", "value B")
.css("display", "none", "block")
and it sets the value to to opposite of what's currently shown. Just a thought.
--John
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">If this is a common pattern perhaps a new method/plugin could be made to make the code more explicit.<div>
</div><div>$('#foo').copy('#bar', 'val');</div><div>$('#foo').copy('#bar', 'text');
$('#foo').copy('#bar', 'html');</div><div>$('#foo').copy('#bar', 'class');</div><div>$('#foo').copy('#bar', 'css', 'color');</div><div>$('#foo').copy('#bar', 'css', ['color', 'font-family']);</div>
<div>
</div><div>--</div><div>Brandon Aaron</div>
</div><div>$('#foo').copy('#bar', 'val');</div><div>$('#foo').copy('#bar', 'text');
$('#foo').copy('#bar', 'html');</div><div>$('#foo').copy('#bar', 'class');</div><div>$('#foo').copy('#bar', 'css', 'color');</div><div>$('#foo').copy('#bar', 'css', ['color', 'font-family']);</div>
<div>
</div><div>--</div><div>Brandon Aaron</div>
Leave a comment on brandon_aaron's reply
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
Hmm... I'm not completely sold on this yet - but definitely
prototyping it with a plugin would be a good way to give it a try.
--John
prototyping it with a plugin would be a good way to give it a try.
--John
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
I meant this syntax ( $("#id").val(another jQuery Object) ) is a
little confused, at least incompatible with living syntax of jQuery.
( .append(jQuery Object) )
Brandon's way seems better, is it a selective clone() function?
Maybe we expand this too much, just return val() || text() from $
("#id") is enough. :D
Leave a comment on cloudream's reply
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">I sincerely don't think that something like $(el).val( $(another) ) would be useful. I agree with the others, i looks confusing. Reduce the code at this point is not necessary.
Something like $(el).copy( another, 'property' ) (Brandon Aaron's idea) would be much more better.
About toggling values, using $(el).attr('property', 'value 1', 'value2') is a great idea. It would save some chars of code.
Make the syntax simpler is important, but keep the code understandable and explicit is even more.
Something like $(el).copy( another, 'property' ) (Brandon Aaron's idea) would be much more better.
About toggling values, using $(el).attr('property', 'value 1', 'value2') is a great idea. It would save some chars of code.
Make the syntax simpler is important, but keep the code understandable and explicit is even more.
Leave a comment on guest's reply
Re: Unelegant Code
14 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Along the same lines, we have .addClass(), .removeClass(), .toggleClass(), but no .swapClass() . Not sure if you want to add another method, but it is kind of nice to be able to do something like $('div').swapClass('old', 'new') instead of $('div').removeClass('old').addClass('new'). <div>
</div><div>I'm ambivalent about it, but thought I'd bring it up since we're sort of brainstorming.
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div>
</div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Sep 26, 2008, at 2:54 PM, John Resig wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
I've heard requests for that a lot - the ability to toggle text,
toggle values, toggle attributes, toggle css.
I wonder if something like this could be done:
.text("value A", "value B")
.val("value A", "value B")
.css("display", "none", "block")
and it sets the value to to opposite of what's currently shown. Just a thought.
--John
</div><div>I'm ambivalent about it, but thought I'd bring it up since we're sort of brainstorming.
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><br class="Apple-interchange-newline">--Karl</div><div>
</div><div>
</div></span><br class="Apple-interchange-newline"></span><br class="Apple-interchange-newline"></div></span> </div>
<div><div>On Sep 26, 2008, at 2:54 PM, John Resig wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
I've heard requests for that a lot - the ability to toggle text,
toggle values, toggle attributes, toggle css.
I wonder if something like this could be done:
.text("value A", "value B")
.val("value A", "value B")
.css("display", "none", "block")
and it sets the value to to opposite of what's currently shown. Just a thought.
--John
Leave a comment on kswedberg's reply
Re: Unelegant Code
14 years ago
or maybe, like the other proposals:
.toggleClass("A", "B", "C")
and it would flip through the results.
--John
.toggleClass("A", "B", "C")
and it would flip through the results.
--John
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Coundn't toggleClass be used instead of something like that swapClass?
Leave a comment on guest's reply
Re: Unelegant Code
14 years ago
Agree that giving a jQuery object to val() to copy its val/text is
completely confusing.
Shortcuts are nice but I think we need to keep the methods intuitive.
--
Ariel Flesler
http://flesler.blogspot.com/
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">like i said before, make the syntax simpler is important, but keep the code understandable and explicit is even more.
Leave a comment on guest's reply
Leave a comment on matt.kruse's reply
Re: Unelegant Code
14 years ago
@Matt
and it's easy, but is a bad design. passing strings to work like
functions is ugly and not limited.
Leave a comment on guest's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Yehuda just brought up something that is interesting... within callbacks you'll see this pattern a lot. <div>
</div><div>$('...').doSomething(function() {</div><div> var self = $(this); // or var $this = $(this);</div>
<div>});</div><div>
</div><div>Looking through my own code I realize that I rarely use the raw DOM object. It'd be nice to have access to the DOM object from the start. It would potentially break a lot of code (if only we had a method missing construct in JS) to actually make the this == $(this) but I think it would really clean things up ... at least for me it would. ( I could reduce my line count even further! :)</div>
<div>
</div><div>--</div><div>Brandon Aaron</div><div>
</div><div>$('...').doSomething(function() {</div><div> var self = $(this); // or var $this = $(this);</div>
<div>});</div><div>
</div><div>Looking through my own code I realize that I rarely use the raw DOM object. It'd be nice to have access to the DOM object from the start. It would potentially break a lot of code (if only we had a method missing construct in JS) to actually make the this == $(this) but I think it would really clean things up ... at least for me it would. ( I could reduce my line count even further! :)</div>
<div>
</div><div>--</div><div>Brandon Aaron</div><div>
Leave a comment on brandon_aaron's reply
Re: Unelegant Code
14 years ago
one thing that i've seen in my code in several places is something
like this:
$(window).resize(resizeScrollHandler).scroll(resizeScrollHandler);
which could be simplified to:
$(window).bind(["resize", "scroll"], resizeScrollHandler);
this is obviously a very basic example but having the ability to bind
many event to a single handler could come in handy.
wil
Leave a comment on wil.stuckey's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">You can already do this in jQuery.<div>
</div><div>$(window).bind("resize scroll", resizeScrollHandler);</div><div>
</div><div>--</div><div>Brandon Aaron
</div><div>$(window).bind("resize scroll", resizeScrollHandler);</div><div>
</div><div>--</div><div>Brandon Aaron
Leave a comment on brandon_aaron's reply
Leave a comment on wil.stuckey's reply
Re: Unelegant Code
14 years ago
Someone came up with this recently:
"Now, of course I can do this:
$("#sandbox").text( $("a").text() );
But I'd prefer to do this:
$("a").text().appendTo("#sanbox"); "
http://groups.google.com/group/jquery-en/browse_thread/thread/bbd886b73e7768e1
I also think that this way would be a bit easier:
$.fn._text = $.fn.text;
$.fn.text = function( toTextNode ) {
if( toTextNode === true )
return
this.pushStack( [ document.createTextNode( this._text() ) ] );
return this._text( toTextNode );
}
And you could make it work by setting the first argument to true:
$("a").text( true ).appendTo("#sanbox");
Unfortunately that would also need a new method to replace the content
like .text()
Altogether it looks nice for me, though I'm not sure how intuitive is
this?
Leave a comment on balazs.endresz's reply
Re: Unelegant Code
14 years ago
On Tue, Sep 30, 2008 at 3:20 PM, Balazs Endresz
<balazs.endresz@gmail.com> wrote:
>
> Someone came up with this recently:
>
> "Now, of course I can do this:
>
> $("#sandbox").text( $("a").text() );
>
> But I'd prefer to do this:
>
> $("a").text().appendTo("#sanbox"); "
why do you prefer this?
if I see "append" my interpretations is $("#sandbox").html(
$("#sandbox").html() + $("a").text() );
just curious, sorry...
>
> http://groups.google.com/group/jquery-en/browse_thread/thread/bbd886b73e7768e1
>
> I also think that this way would be a bit easier:
>
> $.fn._text = $.fn.text;
> $.fn.text = function( toTextNode ) {
> if( toTextNode === true )
> return
> this.pushStack( [ document.createTextNode( this._text() ) ] );
> return this._text( toTextNode );
> }
>
> And you could make it work by setting the first argument to true:
>
> $("a").text( true ).appendTo("#sanbox");
>
> Unfortunately that would also need a new method to replace the content
> like .text()
>
> Altogether it looks nice for me, though I'm not sure how intuitive is
> this?
>
> On Sep 26, 7:59 pm, "John Resig" <jere...@gmail.com>
Leave a comment on guest's reply
Re: Unelegant Code
14 years ago
Generally you can write it two way:
$('a').appendTo("#sandbox") or $("#sandbox").append("a")
but you can't do that with their text nodes,
and it feels easier if you write it in a chain.
I know what append does but as I said there's no such method that
replaces the content from this direction.
I like this but I'm not fully convinced either, just an idea :)
Leave a comment on balazs.endresz's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">I see where you're going and I quite like it, but I think passing an argument to $.fn.text may not be the answer. As you suggested, it would be counter intuitive for $.fn.text to return anything other than a string.<div>
</div><div>I'd probably favour creating a new method such as $.fn.textNode.
</div><div>
</div><div>But then we're going into something that should not be included in the jQuery core - it's functionality over-kill...
</div><div>
</div><div>I'd probably favour creating a new method such as $.fn.textNode.
</div><div>
</div><div>But then we're going into something that should not be included in the jQuery core - it's functionality over-kill...
</div><div>
Leave a comment on sfsfytsuft34342hGHFG's reply
Re: Unelegant Code
14 years ago
I think that maybe this pattern could be improved, but would perhaps
be counter-intuitive...
$('#foo').fadeOut('normal',function(){ $(this).remove(); });
I would rather write...
$('#foo').fadeOut().remove();
But perhaps would be happy with...
$('#foo').fadeOut('normal','remove');
-mike
Leave a comment on mike.helgeson's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Don't like any of those 2.
The first one is extremmely counter intuitive. While it's "logical" that you don't want to remove an element right after a fadeOut. You can assume that any method called after a fadeOut should be delayed.
Same for second. The second could be a method of the dom element, or the jqueryfied object. Also, what if you want arguments ? you pass them as additional arguments to fadeOut ? hmmm...
The first one is extremmely counter intuitive. While it's "logical" that you don't want to remove an element right after a fadeOut. You can assume that any method called after a fadeOut should be delayed.
Same for second. The second could be a method of the dom element, or the jqueryfied object. Also, what if you want arguments ? you pass them as additional arguments to fadeOut ? hmmm...
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
I agree with you, just wanted to through some ideas into the mix, but
do you agree that this is "unelegant code"
$('#foo').fadeOut('normal',function(){ $(this).remove(); });
Do you have any suggestions to improve it? I think the last option I
provided is the most realistic and I think that making it clear that
you may only apply a single jquery method without arguments is within
reason. It is just a shortcut, and you can use a whole function
wrapper if you want to do something else.
Leave a comment on mike.helgeson's reply
Re: Unelegant Code
14 years ago
> I agree with you, just wanted to through some ideas into the mix, but
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">I don't think the actual approach is too ugly. It's generic and fits any situation.
This could do (on this specific case):
$('#foo').fadeOut( 'normal', jQuery.remove });
This could do (on this specific case):
$('#foo').fadeOut( 'normal', jQuery.remove });
Leave a comment on flesler's reply
Leave a comment on matt.kruse's reply
Leave a comment on mike.helgeson's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">$.fn.fadeOutAndRemove = function(speed,callback) {
return this.fadeOut(speed, function(){
jQuery.remove(this); callback.call(this);
});<div id=":n0" class="ArwC7c ckChnd">}</div>
return this.fadeOut(speed, function(){
jQuery.remove(this); callback.call(this);
});<div id=":n0" class="ArwC7c ckChnd">}</div>
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Part of the problem here is that it adds a LOT of additional complexity to what is currently a very simple and easy to understand API. It might not seem that way to us, as developers, but to new developers, they'd have to understand a new $.self construct when they're still struggling to grasp "this" and closures.<div>
</div><div>What about something like:</div><div>
</div><div>$("#foo").fadeOut("normal").andThen("remove", arguments), where andThen would be implemented as attaching a callback to the previous operation. This would require normalizing the notion of callbacks across operations, but it might work, no?</div>
<div>
</div><div>-- Yehuda
</div><div>What about something like:</div><div>
</div><div>$("#foo").fadeOut("normal").andThen("remove", arguments), where andThen would be implemented as attaching a callback to the previous operation. This would require normalizing the notion of callbacks across operations, but it might work, no?</div>
<div>
</div><div>-- Yehuda
Leave a comment on wycats's reply
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
Unfortunately that notion, while grammatically nice, doesn't really
play over into practical code. It would require that all animations be
modifiable after they already being initiated (and this is saying
nothing about other things with callbacks - like each, or Ajax
requests).
--John
play over into practical code. It would require that all animations be
modifiable after they already being initiated (and this is saying
nothing about other things with callbacks - like each, or Ajax
requests).
--John
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">All animations eventually fall into animate. We could add ids to animations and save a 'lastAnimation' attribute with the last id. Then this function adds the callback with jQuery.data, using the id withing the key.
Finally, animate (in addition to the formal callback) calls any existing callback stored with jQuery.data and clears it.
Same goes for Ajax by the way.
Seems totally doable to me.
Finally, animate (in addition to the formal callback) calls any existing callback stored with jQuery.data and clears it.
Same goes for Ajax by the way.
Seems totally doable to me.
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
> Finally, animate (in addition to the formal callback) calls any existing
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">It is indeed. You can't expect parameters though and you could get conflict with the actual parameters sent by the caller.
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
> It is indeed. You can't expect parameters though and you could get conflict
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Eh, nothing, got it wrong.
We could just save all these methods on a special object.
jQuery("#test").hide("slow", jQuery.curry.show("slow") );
The name could be changed of course.
Or renamed methods (probably bad option)
jQuery("#test").hide("slow", jQuery.curriedShow("slow") );
We could just save all these methods on a special object.
jQuery("#test").hide("slow", jQuery.curry.show("slow") );
The name could be changed of course.
Or renamed methods (probably bad option)
jQuery("#test").hide("slow", jQuery.curriedShow("slow") );
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Any feature that requires knowledge of CS is a no-go in my book :P<div>
</div><div>-- Yehuda
</div><div>-- Yehuda
Leave a comment on wycats's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">CS as in Counter Strike ? :D
Heh, no really... what is CS, forgive my ignorance :P
Heh, no really... what is CS, forgive my ignorance :P
Leave a comment on flesler's reply
Leave a comment on aaron.heimlich's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">As in Computer Science.<div>
</div><div>Using a currying function requires people new to jQuery to go look it up, where they'll encounter:</div><div>
</div><div><a href="http://en.wikipedia.org/wiki/Curry">http://en.wikipedia.org/wiki/Curry</a></div>
<div>
</div><div>and probably eventually:</div><div>
</div><div><a href="http://en.wikipedia.org/wiki/Currying">http://en.wikipedia.org/wiki/Currying</a>
</div><div><span class="Apple-style-span" style="font-family: -webkit-sans-serif; line-height: 19px; "><p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em; ">
"Given a function <i>f</i> of type <img class="tex" alt=" f \colon (X \times Y) \to Z " src="http://upload.wikimedia.org/math/9/2/6/926dd0beaafb7c2a22a1facad4a59327.png" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: middle; ">, then <b>currying</b> it makes a function <img class="tex" alt=" \mbox{curry}(f) \colon X \to (Y \to Z) " src="http://upload.wikimedia.org/math/8/2/7/8277271f0095f3ea67baa5e316593b80.png" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: middle; ">. That is, <span class="texhtml" style="font-family: serif; ">curry(<i>f</i>)</span> takes an argument of type <span class="texhtml" style="font-family: serif; "><i>X</i></span> and returns a function of type <img class="tex" alt=" Y \to Z " src="http://upload.wikimedia.org/math/4/c/5/4c593739e9d7f1ccc9c7affb96ae4d6a.png" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: middle; ">.<b>Uncurrying</b> is the reverse transformation."
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em; ">
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em; ">
Prototype added features like this to 1.6, and while they're interesting and useful, they make it hard for people coming to a codebase (especially people new to the framework) to understand what's happening in the code.
<div>
</div></span></div><div>
</div><div>Using a currying function requires people new to jQuery to go look it up, where they'll encounter:</div><div>
</div><div><a href="http://en.wikipedia.org/wiki/Curry">http://en.wikipedia.org/wiki/Curry</a></div>
<div>
</div><div>and probably eventually:</div><div>
</div><div><a href="http://en.wikipedia.org/wiki/Currying">http://en.wikipedia.org/wiki/Currying</a>
</div><div><span class="Apple-style-span" style="font-family: -webkit-sans-serif; line-height: 19px; "><p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em; ">
"Given a function <i>f</i> of type <img class="tex" alt=" f \colon (X \times Y) \to Z " src="http://upload.wikimedia.org/math/9/2/6/926dd0beaafb7c2a22a1facad4a59327.png" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: middle; ">, then <b>currying</b> it makes a function <img class="tex" alt=" \mbox{curry}(f) \colon X \to (Y \to Z) " src="http://upload.wikimedia.org/math/8/2/7/8277271f0095f3ea67baa5e316593b80.png" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: middle; ">. That is, <span class="texhtml" style="font-family: serif; ">curry(<i>f</i>)</span> takes an argument of type <span class="texhtml" style="font-family: serif; "><i>X</i></span> and returns a function of type <img class="tex" alt=" Y \to Z " src="http://upload.wikimedia.org/math/4/c/5/4c593739e9d7f1ccc9c7affb96ae4d6a.png" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: middle; ">.<b>Uncurrying</b> is the reverse transformation."
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em; ">
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em; ">
Prototype added features like this to 1.6, and while they're interesting and useful, they make it hard for people coming to a codebase (especially people new to the framework) to understand what's happening in the code.
<div>
</div></span></div><div>
Leave a comment on wycats's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Note that John's code doesn't do actual currying, but partial evaluation.
<a href="http://en.wikipedia.org/wiki/Partial_evaluation">http://en.wikipedia.org/wiki/Partial_evaluation</a>
Currying is a complex concept in comparison to the latter.
Anyway, you can change the name if you want, the idea is simple, create a closure with fixed parameters.
We can name it callback (though it's long)
jQuery("#test").hide("slow", jQuery.callback.show("slow") );
Not to hard to understand IMO, and no CS involved :)
<a href="http://en.wikipedia.org/wiki/Partial_evaluation">http://en.wikipedia.org/wiki/Partial_evaluation</a>
Currying is a complex concept in comparison to the latter.
Anyway, you can change the name if you want, the idea is simple, create a closure with fixed parameters.
We can name it callback (though it's long)
jQuery("#test").hide("slow", jQuery.callback.show("slow") );
Not to hard to understand IMO, and no CS involved :)
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">The only tricky thing here is that because JS has no method_missing or cross-browse __noSuchMethod__, we'd be forced to explicitly write all the proxies, which could become messy when they work for core methods, but not all plugins.<div>
</div><div>Or maybe I'm just being a nervous nelly.</div><div>
</div><div>-- Yehuda
</div><div>Or maybe I'm just being a nervous nelly.</div><div>
</div><div>-- Yehuda
Leave a comment on wycats's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Yeah, well. We could provide an interface for registering these methods for those plugins that are interested. Still, someone could expect a method to be registered when it's not.
The other option is to pass the method name as first argument, works around this but it loses the I-call-the-analog-method thing.
The other option is to pass the method name as first argument, works around this but it loses the I-call-the-analog-method thing.
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">$.callback("addClass", "hello") is ok with me.<div>
</div><div>-- Yehuda
</div><div>-- Yehuda
Leave a comment on wycats's reply
Re: Unelegant Code
14 years ago
<div dir="ltr"><div>I'd prefer this as well.</div><div>
</div>I think this also helps a few common cases of var self = $(this);<div><div>
</div><div>--</div><div>Brandon Aaron
</div>I think this also helps a few common cases of var self = $(this);<div><div>
</div><div>--</div><div>Brandon Aaron
Leave a comment on brandon_aaron's reply
Re: Unelegant Code
14 years ago
I do not like passing a jQuery method name as a string to one special
method.
A new (and a little strange) usage to jQuery.
Leave a comment on cloudream's reply
Re: Unelegant Code
14 years ago
I agree.
BTW, talking about currying...
I made my curry() version some time ago, with a nice demo.
If someone wants to check:
http://demos.flesler.com/Curry/
Cheers
--
Ariel Flesler
http://flesler.blogspot.com
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">The thing is that in JavaScript, all method names are just strings. For instance:<div>
</div><div>$.fn.addClass is equivalent to $.fn["addClass"].</div><div>
</div><div>And you wouldn't be required to use this, but it would improve certain situations:</div>
<div>
</div><div>$("div").slideUp("slow", $.callback("slideDown", "slow")) instead of </div><div>
</div><div>$("div").slideUp("slow", function() { $(this).slideDown("slow") });</div>
<div>
</div><div>I suppose it'd be a matter of taste, but the $.callback version doesn't look much stranger to me, and actually has additional elegance, because it avoids another function wrapper. When using callbacks a lot, the noise of function wrappers really adds up.</div>
<div>
</div><div>Another example:</div><div>
</div><div>$("div").load("someUrl", $.callback("yellowHighlight"));</div><div>
</div><div>I think the disconnect here might be that I already think of method names as strings (because that's how JS looks at them), so this doesn't seem weird at all; just a way to avoid a bunch of common noise.</div>
<div>
</div><div>-- Yehuda</div><div>
</div><div>
</div><div>$.fn.addClass is equivalent to $.fn["addClass"].</div><div>
</div><div>And you wouldn't be required to use this, but it would improve certain situations:</div>
<div>
</div><div>$("div").slideUp("slow", $.callback("slideDown", "slow")) instead of </div><div>
</div><div>$("div").slideUp("slow", function() { $(this).slideDown("slow") });</div>
<div>
</div><div>I suppose it'd be a matter of taste, but the $.callback version doesn't look much stranger to me, and actually has additional elegance, because it avoids another function wrapper. When using callbacks a lot, the noise of function wrappers really adds up.</div>
<div>
</div><div>Another example:</div><div>
</div><div>$("div").load("someUrl", $.callback("yellowHighlight"));</div><div>
</div><div>I think the disconnect here might be that I already think of method names as strings (because that's how JS looks at them), so this doesn't seem weird at all; just a way to avoid a bunch of common noise.</div>
<div>
</div><div>-- Yehuda</div><div>
</div><div>
Leave a comment on wycats's reply
Re: Unelegant Code
14 years ago
<div dir="ltr"><div>Although it seems like we are getting further off-topic... I often pass around function references as strings. For example this is a common pattern that I use.</div><div>
</div><div>$('div')[ test() ? 'doSomething' : 'doSomethingElse' ]();</div>
<div>
</div><div>Using something like $.callback is very explicit as to its purpose. After all callback is exactly what we call it in the docs, etc. Granted I don't mind using anonymous callbacks, if I need the code to be cleaner, I'll use named functions to be even more explicit. But of the other proposals I like $.callback the best.</div>
<div>
</div><div>--</div><div>Brandon Aaron</div>
</div><div>$('div')[ test() ? 'doSomething' : 'doSomethingElse' ]();</div>
<div>
</div><div>Using something like $.callback is very explicit as to its purpose. After all callback is exactly what we call it in the docs, etc. Granted I don't mind using anonymous callbacks, if I need the code to be cleaner, I'll use named functions to be even more explicit. But of the other proposals I like $.callback the best.</div>
<div>
</div><div>--</div><div>Brandon Aaron</div>
Leave a comment on brandon_aaron's reply
Re: Unelegant Code
14 years ago
<div dir="ltr">Why don't we make a plugin out of this ? there's no so much of a need for this on the core.
Then, if it seems successful, we can add it (just like offset/dimensions).
Then, if it seems successful, we can add it (just like offset/dimensions).
Leave a comment on flesler's reply
Re: Unelegant Code
14 years ago
I already did it:
http://dev.jquery.com/~john/plugins/callback/
my other proposal:
http://dev.jquery.com/~john/plugins/callback/old.html
I'm working on a third proposal now.
A nice thing about $.callback is that it's very simple (perhaps too
simple - no support for chaining).
--John
http://dev.jquery.com/~john/plugins/callback/
my other proposal:
http://dev.jquery.com/~john/plugins/callback/old.html
I'm working on a third proposal now.
A nice thing about $.callback is that it's very simple (perhaps too
simple - no support for chaining).
--John
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
What do you think about chaining this way:
jQuery.callback = function(){
var args = jQuery.makeArray(arguments);
if(typeof args[0] == 'string' )
args=[args];
return function(){
for(var i in args){
fn = args[i].shift();
jQuery.fn[ fn ].apply( jQuery(this), args[i] );
}
};
};
jQuery(function(){
jQuery("#test").hide("slow",
jQuery.callback( ["show", "slow"], ["addClass","done"] )
);
});
?
Leave a comment on balazs.endresz's reply
Re: Unelegant Code
14 years ago
I want to add one more proposal to the pile:
http://dev.jquery.com/~john/plugins/chain/
A new .chain() method that allows you to write code like this:
jQuery("div")
.chain("hide", "slow")
.addClass("done")
.find("span")
.addClass("done")
.end()
.chain("show", "slow")
.removeClass("done")
.end()
.end();
I had messed around with implementing something similar before but at
gotten stymied on the implementation. I appear to have it working now.
--John
http://dev.jquery.com/~john/plugins/chain/
A new .chain() method that allows you to write code like this:
jQuery("div")
.chain("hide", "slow")
.addClass("done")
.find("span")
.addClass("done")
.end()
.chain("show", "slow")
.removeClass("done")
.end()
.end();
I had messed around with implementing something similar before but at
gotten stymied on the implementation. I appear to have it working now.
--John
Leave a comment on jeresig's reply
Re: Unelegant Code
14 years ago
A different name may help to better convey the meaning (maybe queue?)
but otherwise I prefer this syntax a lot over the other proposals so
far.
Jörn
but otherwise I prefer this syntax a lot over the other proposals so
far.
Jörn
Leave a comment on joern.zaefferer's reply
Re: Unelegant Code
14 years ago
What about another boolean parameter?
like $(sth).show([speed,]true[,callback]).addClass("done");
Leave a comment on cloudream's reply
Re: Unelegant Code
14 years ago
i would suppose a generic toggle util-func which could be used with
any other func:
e.g.
$.toggle($('#bar'), 'val', 'A', 'B', 'C'));
$.toggle($('#bar'), 'text', 'A', 'B', 'C'));
$.toggle($('#bar'), 'class', 'A', 'B', 'C'));
Leave a comment on markus.staab's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jeresig's discussion
{"z2656670":[14737000000459663,14737000000459689,14737000000459695,14737000000459701,14737000000459705,14737000000459709,14737000000459713,14737000000459717,14737000000459721,14737000000459727,14737000000459731,14737000000459739,14737000000459745],"z394073":[14737000000459645,14737000000459671,14737000000459675,14737000000459735,14737000000459743],"z2949382":[14737000000459673,14737000000459677],"z2878318":[14737000000459687,14737000000459691,14737000000459699],"z2949822":[14737000000459679,14737000000459683,14737000000459749],"z345938":[14737000000459703,14737000000459719,14737000000459725,14737000000459729,14737000000459733,14737000000459741],"z1163840":[14737000000459685],"z2951963":[14737000000459667,14737000000459697],"z2949726":[14737000000459757],"z2566198":[14737000000459637,14737000000459643,14737000000459647,14737000000459649,14737000000459653,14737000000459659,14737000000459693,14737000000459707,14737000000459711,14737000000459715,14737000000459747,14737000000459751],"z464496":[14737000000459639,14737000000459657],"z63268":[14737000000459641,14737000000459651,14737000000459737,14737000000459755],"z2600866":[14737000000459753],"z2950064":[14737000000459723],"z-1":[14737000000459655,14737000000459661,14737000000459665,14737000000459669,14737000000459681]}