JavaScript编码风格精选指南(编写可维护的代码规范)

//好的写法
doSomething(arguments1, arguments2, arguments3, arguments4,
    arguments5)

var found = (values[0] === item);

if(found && (count > 10))；

for(var i = 0; i < count; i++)

var obj = {
  
  key1: value1,
  
    key2: value2,
  
    func: function() {
    
    },
  
    key3: value3
};

//好的写法
doSomething({
  key1: value1,
    key2: value2
})
//不好的写法
doSomething({key1: value1,key2: value2})

//好的写法
if(condition){
  
  //如果代码执行到这里，则表明通过了所有的安全检查
  allowed()
}

//不好的写法:注释前没有空行
if(condition){
  //如果代码执行到这里，则表明通过了所有的安全检查
  allowed()
}
//不好的写法:错误的缩进
if(condition){

//如果代码执行到这里，则表明通过了所有的安全检查
  allowed()
}

//好的写法
var a = 10; // 这里是注释
//不好的写法
var a = 10;// 这里是注释

//好的写法
if (condition) {
  
  /*
  * 这里是说明
  * 这也是
  * 打字真他妈累
  * 不好好看，我掐死你们
  */
    allowed();
}

//好的写法
var a = 1,
  b = 2,
  c = 3,
  d = 4;
//不好的写法
var a = 1;
var b = 2;
var c = 3;
var d = 4;
//不好的写法
var a = 1,
  b = 2,
  c = 3,
  d = 4;

//好的写法
var a = 1,
  b,
  c;
// 不好的写法
var b,
  c,
  a = 1;

// 好的写法
function fn(arg1, arg2) {
   
}
// 不好的写法：不恰当的空格
function fn (arg1, arg2){
  
}
// 不好的写法：花括号位置不对
function fn(arg1, arg2) 
{
   
}

//好的写法
function outer() {
  
  var count = 10,
    name = 'fengyu',
    age = 18,
    empty;
    
  function inner() {
    
  }
}

// 推荐使用
(function (){}());

// 其他的都不推荐。

// 好的写法
var accountNumber = "1234567"；
// 不好的写法：大写字母开头
var AccountNumber = "1234567"；
// 不好的写法：动词开头
var getAccountNumber = "1234567"；
//不好的写法：使用下划线
var account_Number = "1234567";

// 好的写法
function doSomething() {
  
}
// 不好的写法:首字母大写
function DoSomething() {
  
}
// 不好的写法:名词
function car() {
  
}
// 不好的写法：下划线
function do_something() {
  
}

// 好的写法
function MyObject() {
  
}
// 不好的写法：首字母小写
function myObject() {
  
}
// 不好的写法：动词开头
function getMyObject() {
  
}

// 好的写法
var TOTAL_COUNT = 10;
// 其他都是不好的写法

// 好的写法
var object = {
  _count: 10,
  
  _getCount: function (){
    return this._count;
    }
}

// 不好的写法：全局使用严格模式
"use strict";

function doSomething() {
  //code
};

// 好的写法
function doSomething() {
    "use strict";
    
    //code
};

(function (){
    "use strict";
    
  function doSomething() {
    
  };
  
  function doSomethingElse() {
    
  };
}());

// 好的写法
var flag = (i < count);

//不好的写法
var flag = i < count;

// 好的写法
var same = (a === b);

//不好的写法
var same = (a == b);

// 好的写法
var value = condition ? value1 : valule2;

// 不好的写法
condition ? doSomething() : doSomethingElse();

// 好的写法
count++;
a = b;

// 不好的写法
count++; a = b;

return;
return fengyu.length();
return (length > 18 ? length : 18);

if (condition) {
    statements
}

if (condition) {
    statements1
} else {
    statements2
}

if (condition1) {
    statements1
} else if (condition2) {
    statements2
} else {
    statements3
}

// 好的写法
if (condition) {
    doSomething();
}
//不好的写法：不恰当的空格
if(condition){
    doSomething();
}
// 不好的写法：省略花括号
if(condition)
    doSomething();
// 不好的写法：代码在一行
if (condition) {doSomething();}
// 不好的写法：在一行还省略花括号
if (condition) doSomething();

for (initialization; condition; Step) {
    statements
}

for (variable in object) {
    statements
}

// 好的写法
var i,
  len;
for (i = 0, len = 10; i < len; i++) {
    //code
}

// 不好的写法
for (var i = 0, len = 10; i < len; i++) {
    //code
}
for (var prop in object) {
    //code
}

while (condition) {
  //code       
}

do {
  //code
} while (condition);

#除了第一个case之外，包括default在内的每一个case之前都应当有一个空行
switch (expression) {
    case exp1:
      //code
      break;
    
    case exp2:
      //code
      break;
    
    default:
      //code
      break;
}

switch (expression) {
    case exp1:
      //code
      break;
    
    case exp2:
      //code
      break;
    
    // 没有default
}

// 好的命名方式
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不好的命名方式
let setCount = 10;
let getTitle = 'LoginTable';

const MAX_COUNT = 10;
const URL = 'http://.com';

// 是否可阅读
function canRead(): boolean {
  return true;
}
// 获取名称
function getName(): string {
  return this.name;
}

class Person {
  public name: string;
  constructor(name) {
    this.name = name;
  }
}
const person = new Person('mevyn');

class Person {
  private _name: string;
  constructor() { }
  // 公共方法
  getName() {
    return this._name;
  }
  // 公共方法
  setName(name) {
    this._name = name;
  }
}
const person = new Person();
person.setName('mervyn');
person.getName(); // ->mervyn

function test() { // 测试函数
  console.log('Hello World!'); // >Hello World!
  return 3 + 2; // ->5
}

// 调用了一个函数；1)单独在一行
setTitle();

/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle();

/** 
* 函数说明 
* @关键字 
*/

/**
* 合并Grid的行
* @param grid {Ext.Grid.Panel} 需要合并的Grid
* @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
* @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
* @return void
* @author polk6 2015/07/21 
* @example
* _________________                             _________________
* |  年龄 |  姓名 |                             |  年龄 |  姓名 |
* -----------------      mergeCells(grid,[0])   -----------------
* |  18   |  张三 |              =>             |       |  张三 |
* -----------------                             -  18   ---------
* |  18   |  王五 |                             |       |  王五 |
* -----------------                             -----------------
*/
function mergeCells(grid: Ext.Grid.Panel, cols: Number[], isAllSome: boolean = false) {
  // Do Something
}

// bad
function () {
  var self = this;
  return function () {
    console.log(self);
  };
}

// bad
function () {
  var that = this;
  return function () {
    console.log(that);
  };
}

// bad
function () {
  var _this = this;
  return function () {
    console.log(_this);
  };
}

// good
function () {
  return function () {
    console.log(this);
  }.bind(this);
}

// bad
var log = function (msg) {
  console.log(msg);
};

// good
var log = function log(msg) {
  console.log(msg);
};

// file contents
class CheckBox {
  // ...
}
module.exports = CheckBox;

// in some other file
// bad
var CheckBox = require('./checkBox');

// bad
var CheckBox = require('./check_box');

// good
var CheckBox = require('./CheckBox');

// fancyInput/fancyInput.js

!function (global) {
  'use strict';

  var previousFancyInput = global.FancyInput;

  function FancyInput(options) {
    this.options = options || {};
  }

  FancyInput.noConflict = function noConflict() {
    global.FancyInput = previousFancyInput;
    return FancyInput;
  };

  global.FancyInput = FancyInput;
}(this);

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 jump() {
  this.jumping = true;
  return true;
};

Jedi.prototype.setHeight = function setHeight(height) {
  this.height = height;
};

var luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined

// good
Jedi.prototype.jump = function jump() {
  this.jumping = true;
  return this;
};

Jedi.prototype.setHeight = function setHeight(height) {
  this.height = height;
  return this;
};

var luke = new Jedi();

luke.jump()
  .setHeight(20);