Search the articles  
  

• Coding Guidelines for JavaScript

Wednesday, August 12, 2009

Naming Conventions

- Use Camel case for function name which begins with a lowercase letter, and the first letter of each subsequent new word is uppercase with all other letters lowercase.
- Use Pascal case for class name which begins with a capital letter, and the first letter of each subsequent new word is capitalized with all other letters lowercase.
- Use Camel case for variable name which begins with a lowercase letter, and the first letter of each subsequent word is uppercase with all other letters lowercase.
- Use Upper case for constant or enum values.
- Use Hungarian notation for variable names to indicate the data type with a consistent prefix (bln – boolean; flt – floating point; int – integer; obj – object; str – string; img – image; arr - array).
- Variable names should demonstrate their purpose.
- All variables should be declared using the “var” keyword in first lines of code. In addition, all variables must be declared in functions to keep them local.
- Avoid using single character names, except the use of “i, j, k” as counters in “for” constructs.
-"is" prefix should be used for boolean variables and methods, for example isEditEnabled().
- The term "find" can be used in methods where something is looked up.
- The terms "initialize" or "init" can be used where an object or a concept is established.

Javascript Tag
- All Javascript tags should be in upper case.
- The Javascript text within the LANGUAGE=“ ” quotes should be spelled with an upper case J, the rest will be in lower case.
Example:
<SCRIPT LANGUAGE="Javascript">
<!--
// -->
</SCRIPT>


Indentation
All statements within a function will be indented with 1 hard tab (default tab size=8 spaces).
Example:
function setFocus(textObj)
{
        textObj.focus();
        textObj.select();
        return true;
}


Functions
- All functions should have an open curly bracket on the next line, aligned immediately below the letter “f”.
- The close curly bracket should also align with the letter “f” and the open curly bracket.
- If a parameter is to be passed into the function, the ( ) brackets should be immediately after the function name with no spacing in between.
Example:
function setFocus(textObj)
{
        textObj.focus();
        textObj.select();
        return true;
}


If Else Statements
- For single “if” statement, they should be placed in separate lines, indented with 1 hard tab. No curly brackets “{ }” should be used.
Example:
if (!checkNum(formObj.PIN0))
        return false;

-In cases where more than one statement follows, the open curly bracket should be at the same line as the “if”, with a single space in between.
-The closing curly bracket should be aligned directly below the ‘if”.
-The “else” statement should be aligned immediately below the close curly bracket.
-Text within each bracket should be indented with 1 hard tab.
Example:
if (!checkNum(formObj.PIN0)) {
        alert("Sorry, please enter numeric characters only.");
        return false;
}
else if(someOtherCondition) {
        doSomething();
        return true;
}
else {
        doSomething();
        return true;
}

-In cases where the “if” statement is very long (rough guide 80 characters), it should be separated into another line indented with 1 hard tab.
Example 1:
if (valid_alpha.indexOf(aChar) == -1 &&
        Upp_valid_alpha.indexOf(aChar) == -1)
        return false;

Example 2:
if (valid_alpha.indexOf(aChar) == -1 &&
        Upp_valid_alpha.indexOf(aChar) == -1) {
        alert(“hello”);
        return false;
}


For / While loop
Should follow the same style as “if else” statements.
Example 1:
for (var i=0; i<textObj.value.length; i++) {
        var ch = textObj.value.charAt(i);
        if (ch != ' ' && ch != '\t') {
                alert(“hello”);
                return false;
        }
}

Example 2:
while(!isDone){
        doSomething();
        isDone = moreToDo();
}

Example 3:
do{
        doSomething();
}while(isValid);


Switch Statement
Should follow the style below for Switch statements.
Example:
switch (condition){
        case ABC:
                statements;
                break;
        case DEF:
                statements;
                break;
        default:
                statements;
                break;
}


Try Catch Statement
Should follow the style below for Try… Catch statements.
Example:
try (condition){
        doSomething();
}catch(ex){
        doSomething();
}finally{
        doSomething();
}


Comments
- All classes and functions should contain comment sections that provide a description, parameters (if any), return value (if any), and change history.
- Any major sections of code should include comments to parlay its purpose.
- If possible, all variables should include a short comment describing their purpose; this utilizes the double forward slash (//) comment syntax.
Example:
function checkNum(textbox)
/*Description:
* Parameters:
* Return Value:
* Change History: Author/DateTime, Description
*/
{
        if (!isNumeric(textbox.value)) {
                alert("Sorry, please enter numeric characters only.");
                textbox.focus();
                textbox.select();
                return false;
        }
        else
                return true;
}


No comments:

Post a Comment