This document can be found on gist

1. Two space soft indents (fake tabs)

2. Whitespace, Parens, Braces, Linebreaks

  
  
  if/else/for/while/try always have spaces, braces and multiple lines.
  --------------------------------------------------------------------

  
  
  //  Bad
  
  if(condition) doSomething();
  
  while(condition) iterating++;
  
  for(var i=0;i<100;i++) someIterativeFn();
  
  
  //  Good
  
  if ( condition ) {
    
    doSomething();
  
  }
  
  while ( condition ) {
    
    iterating++;
    
  }
  
  for ( var i = 0; i < 100; i++ ) {
    
    someIterativeFn();
    
  }
  
  

  //  Bad
  if ( true )
    foo();

  //  Good
  if ( true ) {
    foo();
  }  
  
  
  //  Bad
  if ( true ) return;
  if ( true ) blah();

  //  Good
  if ( true ) {
    return;
  }

  if ( true ) {
    blah();
  }  
  
  if ( true ) {
    
    foo();
    
  } else {
    
    bar();
  }  
  
  
  
  
  Function declarations, assignments and expressions to be proud of
  --------------------------------------------------------------------
  
  
  function foo( arg1, argN ) {
  
  }
  
  var f = foo( arg1, argN );
  
  
  function bar( arg1, callback ) {
  
  }
  
  var b = bar( arg1, function() {
  
  });
  

  function FooBar( arg1, argN ) {
    
  }
  

  var fooBar = new FooBar( arg1, argN );
  
  
  var a = [ 1, 2, 3, 4 ];
  
  
  foo( a[1] );
  
  
  
  Conditional Block Whitespace
  --------------------------------------------------------------------
  
  
  //  Bad
  if(blah==='foo'){
   foo('bar','baz',{zoo:1});
  }

  //  Good
  if ( blah === "foo" ) {
    foo( "bar", "baz", { zoo: 1 } );
  }  
  
  
  
  Don't use tabs inside a line.
  --------------------------------------------------------------------
  
  
  var a = true,
      // Bad
      c   = false,
      // Good
      b = false;


  
  Paren whitespace exceptions
  --------------------------------------------------------------------

  //  Functions with callbacks 
  foo(function() { 
  
  });
  
  //  Functions accepting arrays
  foo([   ]);
  
  //  Functions accepting object
  foo({   });  
  
  
3. Style  

  var Module = (function() {
    
    // really private 
    var private = "secret";
    
    return {
      
      // pseudo private 
      _props: {
        
        bool: true, 
        
        string: "a string",
        
        array: [ 1, 2, 3, 4 ], 
        
        object: {
          
          lang: "en-Us"
          
        }
      }, 
      
      _method: function() {
        // pseudo private 
      }, 
      
      getBool: function() {
        // comments
        return this._props.bool;
      }
      setBool: function( arg1 ) {
        // comments
        return ( this._props.bool = arg1 );
      }
    };
  })();
  
  * NOTE: Comments are never at the end of the line, 
          always on the line above.
  
  
  
4. Naming

  `dog` is a string
  
  `dogs` is an array of `dog` strings
  
  
  camelCase; function and var declarations
  
  PascalCase; constructor function
  
  
  `idx` is an index
  
  `fn` is a function
  
  
  Use {} instead of new Object(). Use [] instead of new Array().
  
  

5. Conditions, Evaluation, Ducktyping, Etc.


  //  Bad, unless absolutely necessary
  if ( foo === true ) {

  }

  //  Good
  if ( foo ) {

  }

  //  Bad 
  if ( typeof thing === "undefined" ) {

  }

  //  Bad 
  if ( thing === false ) {

  }

  //  Good
  if ( !thing ) {

  }

  ... unless you absolutely must explicitly check for `undefined`, `null`...
  in which case exceptions can be made



  Using `switch` should be avoided. 
  --------------------------------------------------------------------
  
  * Modern method tracing will blacklist functions with switch statements


  //  Bad:

  switch( foo ) {

    case "alpha":
      alpha();
      break;

    case "beta":
      beta();
      break;

    default:
      // something to default to
      break;
  }


  //  Really good:

  var module = (function () {

    return {

      alpha: function() {

      }, 
      beta: function() {

      }, 
      default: function() {

      }
    };        
  };

  //  If `foo` is a property of `module`, execute the method 
  module[ foo ] && module[ foo ]();

  
  //  This pattern is also really good because it promotes code reusability.
  


  Early returns are nice perf boosts
  --------------------------------------------------------------------

  //  Instead of this:
  function returnLate( foo )  {
    var ret;

    if ( foo ) {

      ret = "foo";

    } else {

      ret = "quux";
    }  

    return ret;
  }

  //  Try this:

  function returnEarly( foo ) {

    if ( foo ) {

      return "foo";
    }

    return "quux";
  }




5. Comments

  JSDoc style is good
  
  Single line above the code that is subject
  
  
  
  End of line comments are prohibited.
New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

1.452% complete

 

Completed 142 of 271 tickets

Pages