- Use Include Files
- Use Consistent Document Structure
- Bind Granular Functions to Events
- JavaScript Style Conventions
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
JavaScript Style Conventions
It's important to adopt a convention that is enforced among all work in a project—or, better, across all projects in the enterprise. Exactly what that convention is, is less important than the fact that one is followed. However, the following sections offer some suggestions for naming conventions, formatting style, and commenting that have proven in practice to enhance the readability of code and, hence, its maintainability and reusability.
Use Consistent, Descriptive Names
Identifier names should, at a minimum, describe the purpose of the variable or function. In addition, while client-side scripting languages do not generally offer strong typing, a simplified form of Hungarian Notation has proven effective when used as a hint about the type and scope of data meant to be stored in a variable. Table 1 illustrates some examples of this.
Table 1 Simplified Hungarian Notation
|
Prefix |
Type |
|
b |
Boolean |
|
n |
Integer number |
|
f |
Floating-point number |
|
s |
Character string |
|
Modifier |
Description |
|
g |
Character string |
|
a |
Array |
Set and follow a few simple rules about naming identifiers. For example, use mixed-case naming for variables and functions (see Listing 4). The standard JavaScript convention is that class names are capitalized, as in Array() and String(), but methods are mixed-case, with a lowercase first atom, as in toString() and getItem(). Functions are mixed-case, with all atoms proper case, while statements are usually lowercase, as in switch, throw, and if.
Listing 4: Variable Declarations
function InvoiceTotal() {
var nCounter = 0;
var fCost;
var nItems;
var fTotalCost = 0.0;
// ...
}
Also, it's a good idea to limit the length of identifiers, for the same reason that it was suggested that HTML names were kept short: The script code all has to be downloaded as text to the client. The shorter the text string is, the shorter the time required to download it will be. Preparing a set of standard abbreviations ahead of time will help developers keep names short but consistent.
Format Code Consistently
Personal styles for the use of indentation, character alignment, and delimiters abound. For example, Listing 5 illustrates three common conventions for placement of brackets in JavaScript code. Not one of these is superior to any others, but the consistent use of one formatting scheme throughout will enhance the readability of the code.
Listing 5: Formatting Example
function Foo() {
}
function Foo()
{
}
function Foo()
{
}
In addition, use indentation and whitespace to make code easier to read. For example, indent the contents of loops and if statements, the case statements in a switch block, the contents of a try-catch block, and the contents of functions. Use whitespace between functions and to set off logical blocks of processing.
Also remove all unused code from client-side scripts. Not only does excess code make the program harder to read and understand, but it also increases the download time and exposes intellectual property unnecessarily.
Use Comments Judiciously
Finally, as is the case with HTML code, there is a trade-off between the need for thorough commenting of source code to improve its maintainability and reusability, and the efficiency of the application. Like HTML, client-side script code is sent as a string from the server to the browser, where it is parsed and executed by the scripting engine. Comments add nothing to the functionality of the code on the client, but they do increase the amount of data being transferred.
For effective code comments, place an empty line before the comment. Indent comments with the code that they are documenting, and keep comments as short as reasonably possible.