jQuery Coding Conventions

Question

I've been looking for some jQuery coding conventions, but really found a comprehensive list.

For example, how should I name the id of my html tags, I like the first one because it confoms to my css convention, but would it give me inconvenience in some senarios?

<div id="comment-list"></div>
<div id="commentList"></div>
<div id="CommentList"></div>

And, is single or double quote more preferrable $('#obj') vs $("#obj")?

Also, say I use one global file, should I surroud all my code with the following to avoid $ sign conflict if I were to use other js libs?

(function ($) {
   $(document).ready(function () {
     ...
   });
})(jQuery);

Should I use more js files or put everything in one global file?

etc. What are some of your conventions by following that made your coding in jQuery on large project easier?

Answer 1

I always use your preferred css convention - and have used jQuery on those elements without any issues. In terms of single/double quotes - I only use single quotes when the value contains HTML markup. i.e.

$("#el").html('<div class="wrap">Hey!</div>');

I notice you updated your question after I answered it.

For multi-library conflicts you can use the libraries in compatibility mode. For example:

var $j = jQuery.noConflict();
$j(document).ready(function () {
   $j("body").css('background', 'red');
});

As for using single/multiple files it really comes down to tidyness vs performance.

Each new .js file will require an extra request to the server, thus slowing down your site. But if you were to write 5000 lines of code that do many many different things, you could certainly consider organizing them in multiple files.

In these cases though, what I prefer to do is keep my scripts separate in my development environment, then combine them into one global.js file which I then minify for production.

HTH, Marko

Answer 2

In HTML, XML, CSS, and URLs, multi-word names are typically "dasherized" (where the words are separated by dashes). In these cases, dasherizing your own multi-word names is most in keeping with the context.

<div id="comment-list">...</div>

In JavaScript, single- and double-quotes are identical. Choose the most natural way of doing it, but be consistent about it.

You should write your code cleanly - in multiple files. In development and test, use the multiple files. For production (and staging sites), you may concatenate and minify your JavaScript and CSS files. Best practice is to make use of a helper function to write out the HTML linking to these scripts and stylesheets, but which is smart enough to use the multiple files in development and test and the processed files in production.

<%= javascript "jquery", "jquery-ui", "application", "users-page" %>

Answer 3

I usually stick with -s in class names and _s in id names.