JavaScript

Programa con ESTILO!



Consistencia


Mantenimiento


Sentido común

 

Entender

Modificar

"Picar"

Zen Coding


  • Beautiful is better than ugly.
  • Simple is better than complex.
  • Complex is better than complicated.
  • Flat is better than nested.
  • Readability counts.
  • Errors should never pass silently.
  • Now is better than never.
  • If the implementation is hard to explain, it's a bad idea.
  • Namespaces are one honking great idea - let's do more of those!
  • ... more!

¿Y si no lo cumplo?





WAT?


 

"All code in any code-base should look like a single person typed it, no matter how many people contributed.

Rick Waldron"

Espacios en blanco


  • Definirlos antes de cada proyecto
  • Nunca líneas con espacios en blanco
  • Jamás mezclar espacios y tabulaciones.

Bucles y Condicionales


if ( condition ) {
  // statements
}

while ( condition ) {
  // statements
}

for ( var i = 0; i < 100; i++ ) {
  // statements
}

Variables


// Variables
var foo = "bar",
    num = 1,
    undef;

// Literal notations:
var array = [],
    object = {};

Orden de declaración

// Bad
function foo() {

  // some statements here

  var bar = "",
    qux;
}
// Good
function foo() {
  var bar = "",
    qux;

  // all statements after the variables declarations.
}

Declaración de Funciones


// Named Function Declaration
function foo( arg1, argN ) {
    // some statements here
}
// Usage
foo( arg1, argN );

// Function Expression
var square = function( number ) {
    // Return something valuable and relevant
    return number * number;
};
// Usage
square( 4 );

Funciones con Callback


foo(function() {
    // Note there is no extra space between the first paren
    // of the executing function call and the word "function"
});

$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $( this ).addClass( "done" );
});

Arrays/Objetos por Parámetro


// Function accepting an array, no space
foo([ "alpha", "beta" ]);

// Function accepting an object, no space
foo({
    a: "alpha",
    b: "beta"
});

Strings




No importa si es " o ',
lo importante es

ESCOGER UNO

Condicionales


if ( array.length > 0 ) ...
if ( array.length ) ...

 

if ( array.length === 0 ) ...
if ( !array.length ) ...




if ( string !== "" ) ...
if ( string ) ...


if ( string === "" ) ...
if ( !string ) ...




if ( foo === true ) ...
if ( foo ) ...


if ( foo === false ) ...
if ( !foo ) ...




if ( foo === null || foo === undefined ) ...
if ( foo == null ) ...


// but not 'false', "" or 0
null == undefined

Comentarios




Siempre encima de la línea a la que hace referencia
JSDoc estaría genial

// TODO: Querido 'yo' del futuro...arregla esto por favor

Nombres


functionNamesLikeThis;
variableNamesLikeThis;
ConstructorNamesLikeThis;
EnumNamesLikeThis;
methodNamesLikeThis;
SYMBOLIC_CONSTANTS_LIKE_THIS;

 

""Arguments over style are pointless. There should be a style guide, and you should follow it.

Rebecca Murphey"

Always leave the campground cleaner than you found it.
The Boy Scout Rule

¿Cuando lo aplico?



SIEMPRE



GRACIAS!





JavaScript: Programa con estilo

By Anthanh

JavaScript: Programa con estilo

Descripción del estilo de código del lenguaje JavaScript basado en las propuesta de https://github.com/rwaldron/idiomatic.js/

  • 1,660

More from Anthanh