Article
Comments
Evan Byrne
Dec 12 2009
Hey Tony, I tested the method I showed in the article on multiple browsers including IE and it works. Whitespace in this case is ignored by the javascript engine.
Ben
Dec 12 2009
Formatting code is down to personal preference.
Dec 12 2009
Evan, good to know it doesn't do that with this format.
Ben is right formatting code is personal decision, but it is harmful in a team if coding conventions are not follow.
Francesco
Dec 12 2009
Very very good... This tutorial is really usefull. Everyone teach you how jQuery works, but not how to format it!
Evan Byrne
Dec 12 2009
Ben, it is true that formatting comes down to personal preference, but it is also considered bad coding practice to place too much code on one line, which makes it harder to debug and maintain.
If you know of a better way to format code like this I would love to know how you do it. :)
MindstormsKid
Dec 12 2009
I completely disagree. Your first example is extremely easy to read, and the redone version annoys me because it takes up so much space for no reason.
Your second example still seems pretty easy to read, though more spaces (such as after the {, before the }, and after commas) would be nice. However if you have a lot of properties, then I agree with the redone version.
Evan Byrne
Dec 12 2009
While the "bad" examples I give are in fact readable, the "good" examples are much more readable, which was the objective.
Dec 12 2009
I'm going to have to agree with the other comments. Formatting is a personal preference. I actually found your "bad" examples easier to read than the "good" ones.
Evan Byrne
Dec 13 2009
Well perhaps I should rename the article to "Evan's Way of Formatting jQuery"... It might also help if I get some worse "bad" examples. :)
Do note though you don't see PHP programmers doing stuff like this:
$table->select('name','email')->where('id','=',123456)->clause('OR')->where('phone','=','555-555-5555')->order_by('date');
If I put code like that in the Dingo Documentation it wouldn't make a good first impression.
Large chains all on one line seems to be mainly a jQuery thing, and has actually been an area of criticism by other frameworks.
Dec 13 2009
Chaining them alphabetically is a wrong advice IMHO.
$('#div').fadeOut().fadeIn() is not equal to $('#div').fadeIn().fadeOut()
Evan Byrne
Dec 13 2009
Jeffery, I'm aware of that. In the example I gave it should work the same regardless if the text() function is after or before the slideOut() function. I'll add a note to that section as to avoid confusion.
Dec 14 2009
Thanks for the nice article. In php it is common practice to write no lines longer than 80 chars.
Dec 14 2009
I have a feeling you do multi-line CSS as well?
Personally, I think single line jQuery is a lot better much like single line CSS. It's much easier to read and doesn't create unnecessary lines full of white space.
Then again, how you format your code is personal preference.
Evan Byrne
Dec 15 2009
@Vince, actually, I use a hybrid of single-line and multi-line CSS. I place elements with less than 3 rules all on one line, any more than that and I go multi-line:
a{color:#ff0000;text-decoration:none;}
a:hover{text-decoration:underline;}
container{
position:relative;
margin:auto;
width:900px;
background:transparent url('bg.jpg');
}
I also do the same 3 rule thing with jQuery.
tony
Dec 12 2009
wouldn't this:
jQuery('#element') .data('hidden',true) .addClass('hidden') .text('Edit');cause semi-colon insertion from the javascript engine? I am not pretty sure about it, but I read it is better in general javascript to en the line with the . operator like this:
jQuery('#element'). data('hidden',true). addClass('hidden'). text('Edit');so that javascript won't do semi-colon insertion. I am not 100% sure about this, though.