Appendix A.2 Javascript Coding Standards
With Ajax, Javascript is used as a first class programming language, not just as a value-ad to html mark up. Thus, it is very important to establish good coding practices. The following lists some key points on how to use javascript in the ETrade project:
Use objects rather than functions
Traditional javascript makes extensive use of functions. Where ever possible these functions should be grouped together as an Object. Thus, instead of writing:
function asFLoat(t)
{
return parseFloat(t.innerHTML);
}
var dftDigits=2;
function fixedDigits(t, digits)
{
if (digits)
return (t.toFixed) ? t.toFixed(digits) : t;
return (t.toFixed) ? t.toFixed(dftDigits) : t;
} This should be written as:
var numUtil =
{
_digits: 2,
asFloat: function(t)
{
return parseFloat(t.innerHTML);
},
fixedDigits: function(t,digits)
{
if (digits)
return (t.toFixed) ? t.toFixed(digits) : t;
return (t.toFixed) ? t.toFixed(numUtil._digits) :t;
}
}Private fields and functions should have names starting with ’_’.
(notice) This is a very lightweight form of object and any concept of class must not be used. It is equivalent to a javaclass of static members and simply groups related function together for name space clarity.
Javascript also supports classes through the prototype mechanism. This should also be used when appropriate but is not covered by the example above.
JS Files as Packages
Just as Javascript functions should be grouped into objects, javascript objects should be grouped into files, which can be considered the equivalent of java packages.
Use Semicolon to End Statements
Semicolon makes it easier for old C-hacks to parse. This also makes it easier for the interpreters to spot errors if typos are made.
Use the Behavior Library
Currently, behavior(http://bennolan.com/behaviour/) library is being used and all developers should become familiar with it. The key aspect of behavior is that it allows developers to separate javascript from markup. You should not write any scripts of functions within html, nor should hard code onclick or onload attributed within html. With Ajax, much of the html will be generated and thus, using markup is not an option.
Unique Ids, multiple classes
The ID of a DOM element must be unique, while multiple DOM elements can have the same class. A frequent mistake is to use a non-unique ID, for example on a cell in a table (if the table has multiple rows then a cell ID is not unique). A class should be used if there are visual ramifications, otherwise normal attributes or external associative arrays should be used.
Understanding this
The this automatic field in js works differently to Java. If a member function of an object is called as a callback, then the this does not refer to the object but the calling scope. For example, in the following code:
var myhandler =
{
_handle: function(message)
{
alert(this);
},
register: function()
{
$('mybutton').onclick=this._handle;
}
};
myhandler.register(); The _handle method is called when you click the mybutton, but the this will not refer to the myhandler object, but rather the DOM element of the button. The object var myhandler can be used instead of this in these circumstances.
Use ‘single’ instead of “double” quotes
String in js and html can be quoted with single or double quotes. We should use single quotes in the javascript and double quotes in markup. It is then simpler for js to quote double quotes when generating markup.
Use var keyword for variables inside for loop
This is supposed to be optional but IE does not seem to handle well for loops with variables that are not declared with var. Thus instead of writing:for (i = 0; i < tokens.length; i++) {
//process
}
This should be written as:
for (var i = 0; i < tokens.length; i++) {
//process
}