As more Javascript code in Melange is going to be developed, here‘s a draft for code guidelines. These guidelines are inspired by PythonStyleGuide page (but adapted to JS), and from Code conventions for the Javascript Programming Language. In this very moment our code doesn’t respect them, but these are going to be strict rules when JavascriptRefactoring will come to an end. More infos on why these rules are important later.

As poor-written Javascript is more dangerous than as it‘s in other languages, we’re going to use Jslint to verify code conventions compliance. See JavascriptRefactoring for more information on how to use it.

More infos on how to write good Javascript code on Efficient javascript article and in Jslint code checking rules, some useful patterns and a great article about closures

Javascript Language Rules

  1. Private and public/privileged vars/functions: we're going to use Module pattern, more info in JavascriptRefactoring page.

  2. With statement: Do not use with statement. If you want to provide shortcuts, just create a variable that points to the object you want to access repeatedly. See explanations on why with statement is harmful

  3. Iterations: as we've jQuery always loaded, use jQuery's each() function to iterate over objects/arrays. Do not use for...in loops, as they can lead to potential errors

  4. Ajax calls: always use ?=_"+(new Date().getTime()) when invoking an URL to avoid caching issues

  5. Global namespace pollution: at least avoid it (more infos when we come to an agreement for JavascriptRefactoring)

Javascript Style Rules

  1. Semicolons: Always, not after functions as in:

function foo() { };

This is unnecessary. But yes when you're storing an anonymous function inside a variable like this:


var foo = function () { };
  1. Line length: 80 columns maximum. If you need to break one line, indent it by 2 spaces

  2. Indentation: 2 spaces (no tabs)

  3. Whitespaces: no whitespaces inside parentheses, brackets or braces

  4. HTML Django templates: there should be no code in them

  5. Comments: use JSDocToolkit style

  6. Functions: no space between the name of the function and the parenthesis

  7. Anonymous functions: 1 space between the word function and the parenthesis

  8. Immediately invoked functions: wrap them between parenthesis, as in:

var myvar = (function () {
  return true;
}());
  1. Objects and arrays: use {} to declare objects (not new Object()) and [] to declare arrays (not new Array())

  2. Variables: always use var, otherwise the variable will pollute the global namespace

  3. Primitive objects: never extend their prototype

  4. String concatenation: use

var concatenated = ["string1","string2"].join("");

instead of

var concatenated = "string1" + "string2";

It's usually faster for browsers and more beautiful when new lines are needed because line is too long.

If line is too long or you're going to store HTML, than indent it like this:

var foo = [
  '<div>',
  '  <table>',
  '  </table>',
  '</div>'
].join("");

This won't break jsLint and helps understanding indentation in the HTML code as well.