Javascript Guidelines

Commenting
It is assumed that you will want to document things like: namespaces, classes, methods, method parameters, etc.
Comments should generally be placed immediately before the code being documented. It must start with a /** seq
uence or //
Simple Documentation

/** This is a description of the foo function. */

function foo(){
//statements here
}

Adding a description is simple, just type the description you want in the documentaton comment.
Special "documentation tags" can be used to give more information. For example, if the function is a constructor,
you can indicate this by adding a tag.
Documentation with tag to describe your code

/**
* Represents a video.
* @constructor
*/
function Video( title, user ){
//statements here
}

More tags can be used to add more information.

Adding more information with tags

/**
* Represents a video.
* @constructor
* @param {string} title - The title of the video.
* @param {string} user - The user of the video.
*/
function Video( title, user ){
//statements here
}

Source: Commenting guideline

Understandability
Choose easy to understand and short names for variables and functions.
Bad variable names

var x1 = '',
fe2 = '',
xbqne = '',
incrementerForMainLoopWhichSpansFromTenToTwenty = '',
createNewMemberIfAgeOverTwentyOneAndMoonIsFull = '';

Avoid describing a value with your variable or function name.

//Might not make sense in some countries:

isOverEighteen();
//Works everywhere
isLegalAge();

Avoid using dash "-" as var name in javascript or class name in css, use camelcase and or underscore "_" to name
your vars and classes.

Var names

//Bad variable names

var my-div = document.getElementById( 'my-div' );
//Use camelcase and or underscore instead
var my_customDiv = document.getElementById( 'my_blockHtml' );

Your code is a story - make your storyline easy to follow!

Source: Javascript Best Practices

Long List of Variables? Omit the "Var" Keyword and Use Commas Instead
Long list of vars

//Instead of using var per each line

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';
//use comma instead
var someItem = 'some string',
anotherItem = 'another string',
oneMoreItem = 'one more string';

...Should be rather self-explanatory. I doubt there's any real speed improvements here, but it cleans up your code a
bit.

Using class names for JS purposal

When a class is created in order to be used for javaScript purposes use "js_" as a prefix for this class name. It
doesn't matter if you are going to use that class name for CSS purposes.

HTML

<!--IN THE HTML-->

<div id="my_div" class="js_myClass">This div is used in JS and
CSS</div><!--/#my_div-->
<div id="my_SecondDiv" class="js_myClass">This div is used in JS and
CSS</div><!--/#my_SecondDiv-->
<div id="my_ThirdDiv" class="js_myClass">This div is used in JS and
CSS</div><!--/#my_ThirdDiv-->

CSS

/** IN CSS */
#my_div {
background-color: red;
}
#my_SecondDiv {
background-color: blue;
}
#my_ThirdDiv{
background-color: #000;
}
.js_myClass {
display: block;
width: 240px;
}

JS

/** IN JAVASCRIPT */
var myDivs = document.getElementsByClassname( 'js_myClass' ),
i = 0,
j = myDivs.length;
for( ; i<j; i++ ){
//Do something with myDivs[i]
}

Avoid Globals, use the page_params object instead

Coordinate with Back End the global values you need for the page, and make sure that all the data needed for the
page is inside that object. If you need more global or general data for the page then you can add the value to the
page_params object as depicted in the following image and code block.

page_params object set up

//Declare the var in the header

var page_params = {};
//Set up data in coordination with Back End
page_params = {
"video_id":"599361",
"video_hash":"8879764237c2b072d811e30e9aafd523",
"rating_up":669,
"rating_down":27,
"user_has_voted":false,
"segment":0,
"uploader_id":"0",
"download_cdn":"true",
"has_favorited":false,
"is_loggedin":false,
"has_voted":false,
"has_voted_direction":0,
"video_layout":"normal"
.....
};
//In case you need to add some global values to that object you can create your own
keys
page_params.jsUrl =
"http://front.tube8.gutierrez.trunk.nayul-tube8.na.manwin.local/mobile/js/";
page_params.video_urls = {};
page_params.video_urls.sd =
"http://cdn1.mobile.tube8.com/201101/23/599361/240P_358K_599361.mp4?sr=1200&int=6144
00b&nvb=20140916212825&nva=20140916232825&hash=0c6817364661629df00c0";
page_params.video_urls.hd =
"http://cdn1.mobile.tube8.com/201101/23/599361/240P_358K_599361.mp4?sr=1200&int=6144
00b&nvb=20140916212825&nva=20140916232825&hash=0c6817364661629df00c0";

Our Guidelines
Avoid 'eval'
The eval() function in javascript is a way to run arbitrary code at run-time. In almost all cases, eval should never be
used. If it exists in your page, there is almost always a more correct way to accomplish what you are doing. For
example, eval is often used by programmers who do not know about using Square Bracket Notation.
The rule is, "Eval is evil."

Javascript in the footer

Place Scripts at the Bottom of Your Page after the </body> closing tag
Remember -- the primary goal is to make the page load as quickly as possible for the user. When loading a script,
the browser can't continue on until the entire file has been loaded. Thus, the user will have to wait longer before
noticing any progress.
If you have JS files whose only purpose is to add functionality -- for example, after a button is clicked -- go ahead
and place those files at the bottom, just before the closing body tag. This is absolutely a best practice.

<p>And now you know my favorite kinds of corn. </p>

</body>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
<script type="text/javascript">
var amazingVar = "amazing string";
... AMAZING CODE NEEDED HERE ( IF NOT POSSIBLE TO PUT IN AN EXTERNAL FILE ) ...
</script>
</html>

No inline JavaScript
Avoid inline JavaScript as much as you can, is better to load the scripts in external files, however, if you need to get
values from back end in the page please place the script at the end of the template.

Avoiding inline javaScript

<div id="footer-copyright">
<span id="copyright">Copyright &copy; 2007-2014 Tube8.com, All Rights Reserved:
</span>
<div class="ascapContainer"></div>
<div class="rtaLogoContainer"><a
href="http://www.tube8.com/info.html#rta"></a></div>
</div><!--/footer-copyright-->
<script type="text/javascript">
/**
* HUBTRAFFIC SCRIPT TE-5017
**/
function mg_playerEvent(onSeek) {
//statements here
}
/* =========================================== */
/* FUNCTION TO CHECK IF THE USER IS LOGGUED IN */
/* =========================================== */
function downloadVideo() {
//statements here
}
/* ========================================= */
/* RELATED VIDEO BUTTONS NEXT AND PREV LOGIC */
/* ========================================= */
function updateRelated (page) {
//statements here
}
</script>
<!--HTML CODE HERE-->
<div id="footer-copyright2">
<span id="copyright2">Copyright &copy; 2007-2014 Tube8.com, All Rights Reserved:
</span>
<div class="ascapContainer"></div>
<div class="rtaLogoContainer"><a
href="http://www.tube8.com/info.html#rta"></a></div>
</div><!--/footer-copyright2-->

Always, Always Use Semicolons

The title is very descriptive, in order to minify the code properly is a good practice to use ALWAYS semicolon " ; " at
the end of the line.

Use Semicolon

//instead of
alert( 'I am not using semicolon' )
//please use
alert( 'I am using semicolon' );

Use === Instead of ==

JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to
always use the former set when comparing.
"If two operands are of the same type and value, then === produces true and !== produces false." JavaScript: The Good Parts
However, when working with == and !=, you'll run into issues when working with different types. In these cases,
they'll try to coerce the values, unsuccessfully.
If you need numeric values to do Math operation then you can check if the value is a string '1234' or an integer 1234
in order to be able to do Math operation with numbers.

//behaviour example
var idNumber = '1352544'; //the value is a string not an integer
if( idNumber == 1352544 ){ // true in some browsers
//statements here
}
if( idNumber == '1352544' ){ // true in all browsers
//statements here
}
if( idNumber === '1352544' ){ //true in all browsers
//statements here
}
if( idNumber === 1352544 ){ //false in all browsers
//statements here
}

Style
Always use braces & have them on the same line

Functions in JS

if( foo ){
alert( 'Hello world!' );
}

Avoid comparing true or false

Comparing TRUE or FALSE

if( foo ){ //true

//This is a good practice
}
if( !foo ){ //false
//This is a good practice
}
if( foo === true ){
//This works but we are trying to avoid this practice
}
if( foo === false){
//This works but we are trying to avoid this practice
}

Use shorthand, if possible

Shorthands

var element = ( type ) ? "video" : "photo";

Declare the vars before the loop

For Loop

var myArray = [ 'value 01', 'value 02', 'value 03', valueId ],

i = 0,
j = myArray.length;
for( ; i<j; i++ ){
console.log( myArray[i] );
}

Multiline conditions
Multiline statements

//this is good
if($(this).find("option:selected").val() == "Gender" ||
$(this).find("option:selected").val() == "Birth Year"){
//statements here
}

//this is better
if( $( this ).find( 'option:selected' ).val() === 'Gender' ||
$( this ).find( 'option:selected' ).val() === "Birth Year" &&
$( this ).find( 'option:selected' ).val() !== 'undefined' ){
//statements here
}

Beautiful Syntax
if / else / for / while / try always have spaces, braces and span multiple lines this encourages readability.

Parens, Braces, Linebreaks

var i = 0,
length = 100;
for( ; i<length; i++ ){
// statements
}
var prop;
for( prop in object ){
// statements
}
if( true ){
// statements
} else {
// statements
}
// Named Function Declaration
function foo( arg1, argN ){
// statements
}
// Usage
foo( arg1, argN );
// Named Function Declaration
function square( number ){
return number * number;
}
// Usage
square( 10 );

Use Correct <script> Tags

The LANGUAGE attribute is deprecated in the <script> tag. The proper way to create a javascript code block is:
Script Tag

<script type="text/javascript">
// code here
</script>

Use {} Instead of new Object() and [] instead of new Array()

There are multiple ways to create objects in JavaScript. Perhaps the more traditional method is to use the "new"
constructor, like so:

//Good
var o = new Object();
o.name = 'Carlitos';
o.lastName = 'Way';
o.someFunction = function() {
console.log( this.name );
}
//Better
var o = {
'name': 'Carlitos',
'lastName' : 'Way',
'someFunction' : function() {
console.log( this.name );
}
};
//Note that if you simply want to create an empty object, {} will do the trick.
var o = {};

Array
//good
var a = new Array();
a[0] = 'Carlitos';
a[1] = 'Way';
//better
var a = [ 'Carlitos', 'Way' ];

Use JSON
When storing data structures as plain text or sending/retrieving data structures via Ajax, use JSON instead of XML
when possible. JSON (JavaScript Object Notation) is a more compact and efficient data format, and is
language-neutral.

var myJson = {};

myJson.name = 'Carlitos';
myJson.lastName = 'Way';

Selectors
Use ID selector whenever possible. It is faster

$( '#js-loadMore' ) // FASTER
$( '.greyButton' ) // SLOWER

When using class selectors, dont use the element type

var products = $( '.products' );// FASTER

var products = $( 'div.products' );// SLOWER

Avoid excessive specificity

$( '#more' )// FASTER

$( '#wrapper .underPlayer #more' )// SLOWER

Use find() for Id->Child nested selectors. The .find() approach is faster because the first selection is handled without
going through the Sizzle selector engine.

$( '#header' ).find( '.searchType' );// FASTER

$( '#header .searchType' )// SLOWER

Objects
In order to make code reusable let's divide the objects in two modules (files): the object file with all the core

functionalities and the controller file with all the set up and events. Both should share the same filename but as for
the controller let's add the following suffix "_controller.js", meaining if we have a terminator.js file we should have a t
erminator_controller.js file.
As convention let's use the object name convention where the object name starts with capital letter.
In the above filename example for the terminator.js file it should contain the object with the core functionality for
instance:
Objects
var Terminator = function() {
"use strict";
var Self = this; // Self var instead of this in order to avoid confusion between
this according to object and this according to jquery or functionallity
/**
* Let's leave the object to know if the code is running in a legacy browser
*/
Self.shittyBrowser = ( navigator.appName + " " + navigator.appVersion );
Self.isShitty = Self.shittyBrowser.match( ( /(Microsoft Internet Explorer).+(MSIE
7|MSIE 8\.)/gi ) !== null );
/**
* Init method to set up more vars or initialite methods inside the object
*/
Self.init = function( options ){
Self.params = options; //Let's keep the Self.params var as default to access all
the params / options inside the object
!Self.isShitty ? "THIS" : "THEN THAT" ; // In case we need to set up something for
shitty browsers
...AMAZING SET UP OR INIT METHODS HERE...
},
/**
* Method needed in the object
*/
Self.amazingMethod = function( location, newTag ){
...AMAZING CODE HERE...
};
}

Code for the terminator_controller.js should contain the whole set up for the object
Object_controller
var blockRender = new Terminator();
blockRender.init({
'key' : value,
...AMAZING SET UP 'key' : value HERE...
});

The idea about separating the object from the controller is to permit us the share the core functionalities even tho

there is a different set up, for instance, if there is a set up for pc ( elements and events ) and a different kind of set
up for mobile and tablets but all of them sharing the same core functionalities.In the above filename example for the
terminator_controller.js file it should contain the set up for the object.

Emulating a private method with closure

Languages such as Java provide the ability to declare methods private, meaning that they can only be
called by other methods in the same class.
JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures.
Private methods aren't just useful for restricting access to code: they also provide a powerful way of
managing your global namespace, keeping non-essential methods from cluttering up the public interface to
your code.
Here's how to define some public functions that can access private functions and variables, using closures which is
also known as the module pattern:

Private method with closure

var makeCounter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};
var counter1 = makeCounter();
var counter2 = makeCounter();
alert(counter1.value()); /* Alerts
counter1.increment();
counter1.increment();
alert(counter1.value()); /* Alerts
counter1.decrement();
alert(counter1.value()); /* Alerts
alert(counter2.value()); /* Alerts

0 */

2 */
1 */
0 */

Use semicolon after "use strict"

Put semicolon on the last method inside the objects.