前端开发规范总结

// bad

var items = new Array();

// good

var items = [];

var someStack = [];

// bad

someStack[someStack.length] = 'abracadabra';

// good

someStack.push('abracadabra');

var len =items.length,

    itemsCopy = [],

    i;

// bad

for (i =0; i < len; i++) {

  itemsCopy[i] = items[i];

}

// good

itemsCopy= items.slice();

function trigger() {

var args = Array.prototype.slice.call(arguments);

...

}

// bad

var name = "Bob Parr";

// good

var name = 'Bob Parr';

// bad

var fullName = "Bob " + this.lastName;

// good

var fullName = 'Bob ' + this.lastName;

// bad

var errorMessage = 'This is a super long error thatwas thrown because of Batman. When you stop to think about how Batman hadanything to do with this, you would get nowhere fast.';

// bad

var errorMessage = 'This is a super long error that \

was thrown because of Batman. \

When you stop to think about \

how Batman had anything to do \

with this, you would get nowhere \

fast.';

// good

var errorMessage = 'This is a super long error that '+

  'was thrownbecause of Batman.' +

  'When you stopto think about ' +

  'how Batmanhad anything to do ' +

  'with this,you would get nowhere ' +

'fast.';

var items,

    messages,

    length, i;

messages = [{

    state:'success',

    message:'This one worked.'

},{

    state:'success',

    message:'This one worked as well.'

},{

    state:'error',

    message:'This one did not work.'

}];

length = messages.length;

// bad

function inbox(messages) {

  items ='<ul>';

  for (i = 0; i< length; i++) {

    items +='<li>' + messages[i].message + '</li>';

  }

  return items +'</ul>';

}

// good

function inbox(messages) {

  items = [];

  for (i = 0; i< length; i++) {

    items[i] =messages[i].message;

  }

  return '<ul><li>'+ items.join('</li><li>') + '</li></ul>';

}

// 匿名函数表达式

var anonymous = function() {

  return true;

};

// 有名函数表达式

var named = function named() {

  return true;

};

// 立即调用函数表达式

(function() {

 console.log('Welcome to the Internet. Please follow me.');

})();

// bad

if (currentUser) {

  functiontest() {

   console.log('Nope.');

  }

}

// good

if (currentUser) {

  var test =function test() {

   console.log('Yup.');

  };

}

// bad

function nope(name, options, arguments) {

  // ...stuff...

}

// good

function yup(name, options, args) {

  // ...stuff...

}

var luke= {

  jedi: true,

  age: 28

};

functiongetProp(prop) {

  return luke[prop];

}

varisJedi = getProp('jedi');

// bad

superPower = new SuperPower();

// good

var superPower = new SuperPower();

// bad

var items = getItems();

var goSportsTeam = true;

var dragonball = 'z';

// good

var items = getItems(),

    goSportsTeam= true,

    dragonball ='z';

// bad

var i, len, dragonball,

    items =getItems(),

    goSportsTeam= true;

// bad

var i, items = getItems(),

    dragonball,

    goSportsTeam= true,

    len;

// good

var items = getItems(),

    goSportsTeam= true,

    dragonball,

    length,

    i;

// bad

function() {

  test();

 console.log('doing stuff..');

  //..otherstuff..

  var name =getName();

  if (name ==='test') {

    returnfalse;

  }

  return name;

}

// good

function() {

  var name =getName();

  test();

 console.log('doing stuff..');

  //..otherstuff..

  if (name ==='test') {

    returnfalse;

  }

  return name;

}

// bad

function() {

  var name =getName();

  if(!arguments.length) {

    returnfalse;

  }

  return true;

}

// good

function() {

  if(!arguments.length) {

    returnfalse;

  }

  var name =getName();

  return true;

}

if ([0]) {

  // true

  // An array isan object, objects evaluate to true

}

// bad

if (name !== '') {

  // ...stuff...

}

// good

if (name) {

  // ...stuff...

}

// bad

if (collection.length > 0) {

  // ...stuff...

}

// good

if (collection.length) {

  // ...stuff...

}

// bad

if (test)

  return false;

// good

if (test) return false;

// good

if (test) {

  return false;

}

// bad

function() { return false; }

// good

function() {

  return false;

}

// bad

function() {

∙∙var name;

}

// bad

function() {

∙var name;

}

// good

function() {

∙∙∙∙var name;

}

// bad

function test(){

 console.log('test');

}

// good

function test() {

 console.log('test');

}

// bad

dog.set('attr',{

  age: '1 year',

  breed:'Bernese Mountain Dog'

});

// good

dog.set('attr', {

  age: '1 year',

  breed:'Bernese Mountain Dog'

});

// bad

$('#items').find('.selected').highlight().end().find('.open').updateCount();

// good

$('#items')

 .find('.selected')

    .highlight()

    .end()

  .find('.open')

   .updateCount();

// bad

var leds =stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)

   .attr('width',  (radius + margin)* 2).append('svg:g')

   .attr('transform', 'translate(' + (radius + margin) + ',' + (radius +margin) + ')')

   .call(tron.led);

// good

var leds = stage.selectAll('.led')

    .data(data)

 .enter().append('svg:svg')

   .class('led', true)

   .attr('width',  (radius + margin)* 2)

 .append('svg:g')

   .attr('transform', 'translate(' + (radius + margin) + ',' + (radius +margin) + ')')

   .call(tron.led);

// bad

var once

  , upon

  , aTime;

// good

var once,

    upon,

    aTime;

// bad

var hero = {

    firstName: 'Bob'

  , lastName: 'Parr'

  , heroName: 'Mr. Incredible'

  , superPower: 'strength'

};

// good

var hero = {

  firstName: 'Bob',

  lastName: 'Parr',

  heroName: 'Mr. Incredible',

  superPower: 'strength'

};

// bad

var hero = {

  firstName: 'Kevin',

  lastName: 'Flynn',

};

var heroes = [

  'Batman',

  'Superman',

];

// good

var hero = {

  firstName: 'Kevin',

  lastName: 'Flynn'

};

var heroes = [

  'Batman',

  'Superman'

];

// bad

(function() {

  var name = 'Skywalker'

  return name

})()

// good

(function() {

  var name = 'Skywalker';

  return name;

})();

// good

;(function() {

  var name = 'Skywalker';

  return name;

})();

//  =>this.reviewScore = 9;

// bad

var totalScore = this.reviewScore + '';

// good

var totalScore = '' + this.reviewScore;

// bad

var totalScore = '' + this.reviewScore + ' totalscore';

// good

var totalScore = this.reviewScore + ' total score';

var inputValue = '4';

// bad

var val = new Number(inputValue);

// bad

var val = +inputValue;

// bad

var val = inputValue >> 0;

// bad

var val = parseInt(inputValue);

// good

var val = Number(inputValue);

// good

var val = parseInt(inputValue, 10);

// good

/**

 * parseInt wasthe reason my code was slow.

 * Bitshiftingthe String to coerce it to a

 * Number madeit a lot faster.

 */

var val = inputValue >> 0;

var age = 0;

// bad

var hasAge = new Boolean(age);

// good

var hasAge = Boolean(age);

// good

var hasAge = !!age;

// bad

dragon.age();

// good

dragon.getAge();

// bad

dragon.age(25);

// good

dragon.setAge(25);

// bad

if (!dragon.age()) {

  return false;

}

// good

if (!dragon.hasAge()) {

  return false;

}

function Jedi(options) {

  options ||(options = {});

  var lightsaber= options.lightsaber || 'blue';

 this.set('lightsaber', lightsaber);

}

Jedi.prototype.set = function(key, val) {

  this[key] =val;

};

Jedi.prototype.get = function(key) {

  returnthis[key];

};

function Jedi() {

 console.log('new jedi');

}

// bad

Jedi.prototype = {

  fight:function fight() {

   console.log('fighting');

  },

  block:function block() {

   console.log('blocking');

  }

};

// good

Jedi.prototype.fight = function fight() {

 console.log('fighting');

};

Jedi.prototype.block = function block() {

 console.log('blocking');

};

// bad

Jedi.prototype.jump = function() {

  this.jumping =true;

  return true;

};

Jedi.prototype.setHeight = function(height) {

  this.height =height;

};

var luke = new Jedi();

luke.jump(); // => true

luke.setHeight(20) // => undefined

// good

Jedi.prototype.jump = function() {

  this.jumping =true;

  return this;

};

Jedi.prototype.setHeight = function(height) {

  this.height =height;

  return this;

};

var luke = new Jedi();

luke.jump()

 .setHeight(20);

function Jedi(options) {

  options ||(options = {});

  this.name =options.name || 'no name';

}

Jedi.prototype.getName = function getName() {

  returnthis.name;

};

Jedi.prototype.toString = function toString() {

  return 'Jedi -' + this.getName();

};

// bad

$(this).trigger('listingUpdated', listing.id);

...

$(this).on('listingUpdated', function(e, listingId) {

  // dosomething with listingId

});

// good

$(this).trigger('listingUpdated', { listingId :listing.id });

...

$(this).on('listingUpdated', function(e, data) {

  // dosomething with data.listingId

});

// fancyInput/fancyInput.js

!function(global) {

  'use strict';

  varpreviousFancyInput = global.FancyInput;

  functionFancyInput(options) {

    this.options= options || {};

  }

 FancyInput.noConflict = function noConflict() {

   global.FancyInput = previousFancyInput;

    returnFancyInput;

  };

 global.FancyInput = FancyInput;

}(this);

// bad

function setSidebar() {

 $('.sidebar').hide();

  // ...stuff...

 $('.sidebar').css({

   'background-color': 'pink'

  });

}

// good

function setSidebar() {

  var $sidebar =$('.sidebar');

 $sidebar.hide();

  // ...stuff...

  $sidebar.css({

   'background-color': 'pink'

  });

}

// bad

$('.sidebar', 'ul').hide();

// bad

$('.sidebar').find('ul').hide();

// good

$('.sidebar ul').hide();

// good

$('.sidebar > ul').hide();

// good (slower)

$sidebar.find('ul');

// good (faster)

$($sidebar[0]).find('ul');