View source | Discuss this page | Page history | Printable version   
Main Page
Upload file
What links here
Recent changes

PDF Books
Add page
Show collection (0 pages)
Collections help


JavaScript Coding Conventions



This document is based on Google's JavaScript Style Guide and Douglas Crockford's Code Conventions for the JavaScript Programming Language

JSLint and JSBeautifier

JSLint and JSBeautifier are the tools you should use if you're developing JavaScript. Openbravo has in place a wrapper scripts to check the code before committing it. You just need to open the .hg/hgrc in your working copy and add at the end of the file:

pretxncommit= ./modules/org.openbravo.client.kernel/jslint/jscheck-hg
pre-commit = ./modules/org.openbravo.client.kernel/jsbeautify/jscheck-btfy-hg

If you work in a custom module then from MP31 for JSLint and from 16Q3 for JSBeautifier, there are another scripts which you should use, add hooks like these in the hgrc file in the .hg directory in your module:

pretxncommit = ../org.openbravo.client.kernel/jslint/jscheck-module-hg
pre-commit = ../org.openbravo.client.kernel/jsbeautify/jscheck-btfy-module-hg

You also can execute these scripts for js files in openbravo using these comands:

//Execute this in openbravo root folder to check all js files
//Execute this in module root folder to check jsbeautify in all js files of your module

Note: You can hook the script to another mercurial hooks. See this link.

Code Formatting

Spaces instead of Tabs

Configure your editor to use 2 spaces instead of tabs.

Curly Braces

Because of implicit semicolon insertion, always start your curly braces on the same line as whatever they're opening. For example:

if (something) {
  // ...
} else {
  // ...

Variable Declaration

A single var statement is preferred. All the variables in a function must be declared on top of the function.

Bulbgraph.png   Why do I need to declare the variables on top of the function? Check JavaScript Hosting explained
function f() {
  var i = 0, j = 1; // Just one var
  // {...}
function x() { 
  var i = 0; // one var statement per variable is discouraged
  var j = 0;
  // {...}
// Variables on top of the function
function z() {
  var i, j, k;
  // {...}
function s() {
  var i;
  for (i = 0; i < 10; i++) {
    // do something
  // {...}
  var j; // Variable declaration in the middle of a function is discouraged

Array and Object Initializers

Single-line array and object initializers are allowed when they fit on a line:

var arr = [1, 2, 3];  // No space after [ or before ].
var obj = {a: 1, b: 2, c: 3};  // No space after { or before }.

Multiline array initializers and object initializers are indented 2 spaces, just like blocks.

// Object initializer.
var inset = {
  top: 10, // Notice the space after the colon
  right: 20,
  bottom: 15,
  left: 12
// Array initializer.
this.rows_ = [
  '"Slartibartfast" <>',
  '"Zaphod Beeblebrox" <>',
  '"Ford Prefect" <>',
  '"Arthur Dent" <>',
  '"Marvin the Paranoid Android" <>',
// Used in a method call.
OB.ViewManager.openView('_140', {
  command: 'DEFAULT'
  icon: 'Window'
  id: '180'
  tabId: '180'
  tabTitle: 'Product'
  viewId: '_140'
  windowId: '140'

Single Quotes

A string can be defined with single or double quotes. For consistency, single quotes are preferred.

var s = 'Openbravo 3 is great!';

Function Declaration

All functions should be declared before they are used. Inner functions should follow the var statement. This helps make it clear what variables are included in its scope.

There should be no space between the name of a function and the ( (left parenthesis) of its parameter list. There should be one space between the ) (right parenthesis) and the { (left curly brace) that begins the statement body. The body itself is indented four spaces. The } (right curly brace) is aligned with the line containing the beginning of the declaration of the function.

function outer(c, d) {
  var e = c * d;
  function inner(a, b) {
    return (e * a) + b;
  return inner(0, 1);

If a function literal is anonymous, there should be one space between the word function and the ( (left parenthesis). If the space is omited, then it can appear that the function's name is function, which is an incorrect reading.

someObj = {
  method: function () {
    return this.datum;
  datum: 0

Function Arguments

When possible, all function arguments should be listed on the same line. If doing so would exceed the 100-column limit, the arguments must be line-wrapped in a readable way. To save space, you may wrap as close to 100 as possible, or put each argument on its own line to enhance readability. The indentation may be either four spaces, or aligned to the parenthesis.

// Four-space, wrap at 100.  Works with very long function names, survives
// renaming without reindenting, low on space. = function (
    veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
    tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
  // ...
// Four-space, one argument per line.  Works with long function names,
// survives renaming, and emphasizes each argument. = function (
    artichokeDescriptorAdapterIterator) {
  // ...
// Parenthesis-aligned indentation, wrap at 80.  Visually groups arguments,
// low on space.
function foo(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
             tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
  // ...
// Parenthesis-aligned, one argument per line.  Visually groups and
// emphasizes each individual argument.
function bar(veryDescriptiveArgumentNumberOne,
             artichokeDescriptorAdapterIterator) {
  // ...

Tips and Tricks

True and False Boolean Expressions

The following are all false in boolean expressions:

  '' // the empty string
  0  // the number

But be careful, because these are all true:

  '0'  // the string
  []   // the empty array
  {}   // the empty object

This means that instead of this:

while (x != null) {

you can write this shorter code (as long as you don't expect x to be 0, or the empty string, or false):

while (x) {

And if you want to check a string to see if it is null or empty, you could do this:

if (y != null && y != '') {

But this is shorter and nicer:

if (y) {

Caution: There are many unintuitive things about boolean expressions. Here are some of them:

  Boolean('0') == true
  '0' != true
  0 != null
  0 == []
  0 == false
  Boolean(null) == false
  null != true
  null != false
  Boolean(undefined) == false
  undefined != true
  undefined != false
  Boolean([]) == true
  [] != true
  [] == false
  Boolean({}) == true
  {} != true
  {} != false

Conditional (Ternary) Operator (?:)

Instead of this:

if (val != 0) {
  return foo();
} else {
  return bar();

you can write this:

return val ? foo() : bar();

&& and ||

These binary boolean operators are short-circuited, and evaluate to the last evaluated term. || has been called the 'default' operator, because instead of writing this:

function foo(opt_win) {
  var win;
  if (opt_win) {
    win = opt_win;
  } else {
    win = window;
  // ...

you can write this:

function foo(opt_win) {
  var win = opt_win || window;
  // ...

&& is also useful for shortening code. For instance, instead of this:

if (node) {
  if ( {
    if ([index]) {

you could do this:

if (node && &&[index]) {

or this:

var kid = node && &&[index];
if (kid) {

Retrieved from ""

This page has been accessed 9,768 times. This page was last modified on 2 June 2016, at 07:35. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.