Organización de archivos

• Todos los archivos JavaScript deben colocarse en la carpeta pública '''script''' del proyecto.
• Los archivos de bibliotecas de terceros utilizados se colocan en la carpeta '''script/lib'''.
• Los módulos personalizados reutilizables se colocan en la carpeta '''script/commons'''. Si un módulo reutilizable involucra varios subarchivos, es necesario crear una carpeta de módulo independiente.
• Los archivos JavaScript utilizados por los módulos de páginas individuales se colocan en la carpeta '''script/{module_name}'''.
• Los datos JSON simulados del proyecto se colocan en la carpeta '''script/json''', creando subcarpetas independientes según la página.
• Cuando JavaScript utiliza un framework MVC, los archivos de plantilla se colocan en la carpeta '''script/templates''', creando subcarpetas independientes según la página.

Formato

• Los principios generales pueden consultarse en [PhpGuideline Normas de codificación de PHP].
• Usa siempre 'var' para definir variables.

var global = '';

function method() {
    var local = '';
}

• Termina siempre las declaraciones con punto y coma.
• No uses comas extra en arrays y objetos (compatible con IE).

//wrong
var arr = [1,2,];
var person = {
    name: 'name',
    age: 20,
};
//wrong
var arr = [1,2];
var person = {
    name: 'name',
    age: 20
};

• Define un espacio de nombres de nivel superior como 'inBike', y debajo de él define espacios de nombres privados personalizados, clasificados según el módulo.
• Coloca todo el código de los módulos en una función anónima autoejecutable y exponlo asignándolo al espacio de nombres personalizado bajo el objeto window.

if (!window.inBike) {
    window.inBike = {};
}
window.inBike.rideway = rideway;

• El código de enlace de eventos debe ejecutarse dentro de la función 'dom ready'.

$(function() {
     //bind function is in the init function
     window.inBike.rideway.init();
})

• Coloca los métodos de los módulos personalizados en un objeto; el nombre del método va inmediatamente después de ':', hay un espacio entre ':' y 'function', y hay un espacio entre 'function()' y la siguiente '{'.

var module = function() {
    method: function() {

    }
};

• Usa comillas simples para las cadenas.

var str = 'some text';

• Todas las variables deben definirse antes de usarse e inicializarse inmediatamente después de definirse.

var obj = null;
var num = 0;
var arr = [];
var isEmpty = true;

• Antes de usar la herramienta console del navegador, primero hay que verificar si es compatible.

if (console) {
    console.log('this is my log');
}

Nombres

• Los principios generales pueden consultarse en [PhpGuideline Normas de codificación de PHP].
• Usa notación camelCase para variables y métodos, con la primera letra en minúscula; para nombres de clases, la primera letra en mayúscula.

var numberList = [1,2];
var util = {
    removeNode: function(){
        ....
    }
};

function Person(name, age) {
    this.name = name;
    this.age = age;
}

• Usa $name para nombrar objetos de jQuery, elementos DOM nativos con 'dom' al inicio, y variables privadas dentro de objetos con guion bajo al inicio.

var $image = $('#cover');
var domImage = document.getElementById('cover');
var obj = {
    _privateVar: null,
    method: function() {

    }
};

Comentarios

• Los principios generales pueden consultarse en [PhpGuideline Normas de codificación de PHP].
• Usa más comentarios de una sola línea para indicar el significado de los bloques lógicos.

// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
    return rootjQuery.find( selector );
}

// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;

• Indica el método constructor de la clase.

/**
 * @constructor
 */
some.long.namespace.MyClass = function() {
};

• Anota el tipo y el significado de las constantes de enumeración.

/** @enum {string} */
some.long.namespace.Fruit = {
  APPLE: 'a',
  BANANA: 'b'
};

• Usa comentarios para identificar la visibilidad de métodos o variables, facilitando la verificación estática.

/** @protected */
AA_PublicClass.staticProtectedProp = 31;

/** @private */
AA_PublicClass.prototype.privateMethod_ = function() {};

Mejores prácticas

• Evita usar 'eval'.
• Evita usar 'with' para objetos y 'for-in' para arrays.
• Usa los closures con precaución y evita las referencias circulares.
• Ten cuidado con el contexto de 'this'.

var $button = $('#my-button');
$button.click(function(){
    var self = this;
    var util = {
       getVal: function() {
           return self.val();
       }
    }
});

• Usa código corto siempre que sea posible, por ejemplo el operador ternario, conmutadores lógicos, incrementos, etc.

var name = ('undefined' == typeof(name)) ? '' : name;
(age < 0) && (age = 0);
count++;

• No uses 'function' dentro de ámbitos de bloque.

// 错误
if (x) {
  function foo() {}
}

// 正确
if (x) {
  var foo = function() {}
}

• Enlaza el listener de eventos en el nodo padre y responde según el origen del evento.
• Para módulos de página complejos, usa bibliotecas de gestión de dependencias como SeaJS, RequireJS, o frameworks MVC como Backbone, Knockout, Stapes para organizar tu código.