<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cPanel JavaScript Style Guide</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// specifying the type on the script tag really isn't necessary, but it doesn't hurt anything and allows for w3 validation
// ditto escaping the <![CDATA[ - not something that really matters much, but allows for w3 validation when using the XHTML doctype
// if we ever want to simplify/change these opening tags it will be easy to do with an automated script as long
// as we're consistent in applying them across the product
// priorities:
// 1. Consistency
// 2. Readability
// 3. Match as much existing code as possible.
// principles:
// > when in doubt, be more verbose
// > use standard JavaScript functions supported in all browsers, be consistent in the functions you use and the way that you use them
// variables in the global scope should always be in all caps
var GLOBAL;
// only use global variables when necessary and/or it makes sense to
// good examples of global variables:
// TODO: example here
// bad examples of global variables:
// TODO: example here
// use literal notation for functions to remind you that functions are just objects
var toggle_panel = function(id) {
// your function in here
};
// user unix_hacker style variable names, not camelCase
var row_length = 5;
// declare arrays using [] and objects using {}
var array = [];
var obj = {};
// try to write all loops consistently and on one line
for (var i = 0; i < array.length; i++) {
// do something
}
// if you need to deviate from a full iteration, be sure to comment how or why
// we only need every other entry of the array because ...
for (var i = 0; i < array.length; i += 2) {
// do something
}
// if you have a long iteration (10,000+) or a loop that runs very often on a page (ie: on a mouse movement event)
// it's OK to pre-calculate the array length
var len = array.length;
for (var i = 0; i < len; i++) {
// do something
}
// follow this format for if/else statements
if (row_length == 5) {
alert("Row length is five.");
}
else {
alert("Row length is not five.");
}
// use ternary operators for simple assignments
// good use of ternary
var zebra_class = (i % 2 == 0) ? "rowA" : "rowB";
// bad use of ternary (taken from filemanager.js ;)
var sUrl = "listfiles" + (usejson ? '.json' : (useaspx ? '.aspx' : '.xml')) + "?types=dir&dir=" + node.data.path;
// put a space after the ! operator
var el = document.getElementById("foo");
if (! el) return;
// it is OK to exit a function "early" using return
var toggle_div = function(id {
var el = document.getElementById(id);
// exit the function if el does not exist
if (! el) return;
// do something with el
};
//]]>
</script>
</body>
</html>