Skip to main content

Javascript Code Style Guide with examples


1.Variables, functions, properties methods:

// Good
var thisIsMyName;
var anotherVariable;
var aVeryLongVariableName;

Methods:
// Good
function getName() {
return myName;
}

// Bad: Easily confused with variable
function theName() {
return myName;
}


Constants:

// Good
eg:
// Changing this value will be problem
var MAX_COUNT = 10;

var URL = "http://www.mydomain.net/";
if (count < MAX_COUNT) {
doSomething();
}

Global References:
 // Note: Specify about below declaration,where they are used
 var globalPreferedMode = false;
 var globalUserPreferenceArr = [];  // Array used to compare with preference cols of trade grid while applying preferences


2. Single line comments:
eg:
// Good
if (condition) {

// if you made it here, then all security checks passed
allowed();
}

eg:
// Good
var result = something + somethingElse; // somethingElse will never be null

Multiline comments:
eg:
// Good
if (condition) {
/*
* if you made it here,
* then all security checks passed
*/
allowed();
}

eg:
// Bad: Don't use multiline comments for trailing comments
var result = something + somethingElse; /*somethingElse will never be null*/


3. Constructors:

// Good
function Person(name) {
this.name = name;
}
Person.prototype.sayName = function() {
alert(this.name);
};
var me = new Person("Raja");


4. Literal Values:

// Valid JavaScript
var name = "Sencha says, \"Hi.\"";

// Also valid JavaScript
var name = 'Sencha says, "Hi"';

// Good
var longString = "Here's the story, of a man " +
"named Brady.";

Numbers:

// Integer
var count = 10;
// Decimal
var price = 10.0;
var price = 10.00;


5.using NULL?

// Good
var person = null;

// Good
function getPerson() {
if (condition) {
return new Person("Sencha");
} else {
return null;
}
}

// Good
var person = getPerson();
if (person !== null) {
doSomething();
}

// Bad: Testing against uninitialized variable
var person;
if (person != null) {
doSomething();
}
// Bad: Testing to see whether an argument was passed
function doSomething(arg1, arg2, arg3, arg4) {
if (arg4 != null) {
doSomethingElse();
}
}


6. Using Undefined:

// Bad
var person;
console.log(person === undefined); //true

// foo is not declared
var person;
console.log(typeof person); //"undefined"
console.log(typeof foo); //"undefined"

// Good
var person = null;
console.log(person === null); //true


7. Object Literals:

// Bad
var book = new Object();
book.title = "Maintainable Sencha Code";
book.author = "Sencha EXTJS";


// Good
var book = {
title: "Maintainable Sencha Code",
author: "Sencha"
};

8. Array Literals:

// Bad
var colors = new Array("red", "green", "blue");
var numbers = new Array(1, 2, 3, 4);

// Good
var colors = [ "red", "green", "blue" ];
var numbers = [ 1, 2, 3, 4 ];

9.Line Length
Line length is less frequently found in JavaScript style guidelines, but Crockford’s Code
Conventions specifies a line length of 80 characters. I also prefer to keep line length at 80 characters.

10. Equality
Equality in JavaScript is tricky due to type coercion.

Use of === and !== is recommended by Crockford’s Code Conventions
// Null and undefined
console.log(null == undefined); // true
console.log(null === undefined);// false

// The number 5 and string 5
console.log(5 == "5"); // true
console.log(5 === "5"); // false

11. Primitive Wrapper Types
There are three primitive wrapper types: String, Boolean,
and Number. Each of these types exists as a constructor in the global scope and each
represents the object form of its respective primitive type. The main use of primitive
wrapper types is to make primitive values act like objects, for instance:

// Bad
var name = new String("Raja");
var author = new Boolean(true);
var count = new Number(10);

Comments

Popular posts from this blog

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( &

EXT JS 4: EMPTY VALUE IN A COMBOBOX

EXT JS 4: EMPTY VALUE IN A COMBOBOX Often, in an Ext JS combobox, it is difficult to go back to an empty value once you have selected an item, particularly if “forceSelection” is set to true.  Here is my roundup of alternative solutions found from around the web… 1. Override beforeBlur The solution from   http://www.sencha.com/forum/showthread.php?182119-How-To-Re-Empty-ComboBox-when-forceSelection-is-Set-To-TRUE  overrides beforeBlur on the combbox to clear out lastSelection.  Here is a copy of the override from the thread: 1 2 3 4 5 6 7 8 9 10 11 12 13 Ext.create( 'Ext.form.field.ComboBox' , {      ...      allowBlank: true ,      forceSelection: true ,      beforeBlur: function (){          var value = this .getRawValue();          if (value == '' ){              this .lastSelection = [];          }          this .doQueryTask.cancel();         this .assertValue();      } }); Or to apply the o