前端代碼整潔之道

1. 前言

ES6 新增了很多語法和語法糖，在使用這些語法和語法糖的時候我們可以讓我們的代碼更加優雅。另外，在程序上有一些約定俗成的東西，這樣會幫助我們更好地書寫和閱讀代碼。本節我們將學習前端代碼的整潔之道幫助你更好地書寫你的代碼。

2. 變量的使用

2.1 命名

在定義變量時最好使用駝峰命名（如：aaBbCc）的方式，并且要使用有準確意義的變量名，這樣容易閱讀。

// bad
var getname = function() { return 'imooc'; }
// good
var getName = function() { return 'imooc'; }

在聲明變量時不要添加沒必要的上下文，如果你的類名稱 / 對象名稱已經說明了它們是什么，不要在 (屬性) 變量名里重復。

// bad
const dog = {
  dogType: '斗牛犬'
  dogColor: '黑色',
};
dog.dogType = '牧羊犬'

// good
const dog = {
  type: '斗牛犬'
  color: '黑色',
};
dog.type = '牧羊犬'

2.2 let 和 const 的選擇

ES6 提出了兩個新的聲明變量的命令：let 和 const 用于代替 var，使用 let 來聲明可變變量，使用 const 來聲明常量。對于全局環境下的常量，變量名可以使用純大寫加下劃線的方式命名。

let name = 'xiaoming';
name = 'Jack';

const PI_COUNT = 3.14;

{
  const lession = 'ES6 Wiki';
  console.log(lession);
}

在選擇 let 和 const 時，優先使用 const，尤其是在全局環境，不應該設置變量，只應設置常量。

const 比 let 好的幾個原因。

• 不會對值產生副作用，也就是值被修改，告訴開發者此變量不能被修改；
• const 比較符合函數式編程思想，運算不改變值，只是新建值；
• JavaScript 編譯器會對 const 進行優化，所以多使用 const，有利于提高程序的運行效率，也就是說 let 和 const 的本質區別，其實是編譯器內部的處理不同。

在作用域內聲明的變量需要使用，如果下文沒有用到就不要聲明。

// bad
const name = 'xiaoming';	// 下文沒有使用就不要定義了

// good
const name = 'xiaoming';
console.log(name);

2.3 字符串

對于靜態字符串一律使用單引號，不使用雙引號。在拼接字符串的時候需要使用反引號的方式，更加易于閱讀。

// bad
const name = "imooc";
const info = name + ' ES6 Wiki';

// good
const name = 'imooc';
const info = `${name} ES6 Wiki`;

2.4 解構賦值

在批量定義有默認值的變量時可以使用數組的解構賦值。

// bad
const a = 1, b = 2, c = 3;

// good
const [a, b, c] = [1, 2, 3];

在獲取數組或對象中值時也可以優先使用解構的方式：

const arr = [1, 2, 3, 4];
const obj = {a: 1, b: 3};

// bad
const x = arr[0];
const y = arr[1];
const a = obj.a;
const b = obj.b;

// good
const [x, y] = arr;
const [a, b] = obj;

在函數參數中，如果函數接收的參數是一個對象時，可以直接在函數的括號中解構對象，這樣可以在函數內部之間使用變量。

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}

// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
}

// best
function getFullName({ firstName, lastName }) {}

對于函數中有返回值是對象時，對象中屬性名和要返回的變量名相同時可以省了變量。

// bad
function foo() {
  const a = 'aaa';
  const b = 'bbb';
  
  return {
    a: a,
    b: b
  }
}

// good
function foo() {
  const a = 'aaa';
  const b = 'bbb';
  
  return { a, b }
}

2.5 盡量減少使用條件語法

在條件語句中，可以使用或（ || ）運算符來設置有默認值的變量。

// bad
function createPerson(name) {
  var newName;
  if (name) {
    newName = name;
  } else {
    newName = 'Jack';
  }
}
// good
function createPerson(name) {
  const newName = name || 'Jack';
}

如果符合條件運算符（?:）那就盡量使用條件運算符。

const age = 26;

// bad
let status = ''
if (age > 18) {
	status = '成年人'
} else {
  status = '未成年'
}
// good
const status = age > 18 ? '成年人' : '未成年';

3. 函數

3.1 使用箭頭函數

在定義匿名函數時最好使用箭頭函數的形式，更加簡潔。

// bad
const foo = function(){}
(function() { console.log('100') })()


// good
const foo = () => {}
(() => { console.log('100') })()

// best
[1, 2, 3].map(x => x * x);

當函數只有一個參數，并且返回值是一個表達式時，可以將參數外的括號和表達式外的大括號都省略。

// bad
[1, 2, 3].map((x) => {
  return x * x;
});

// good
[1, 2, 3].map(x => x * x);

使用箭頭函數的另一個好處是，在箭頭函數內部是不綁定 this 的，這樣在調用函數時 this 的指向是不會變的。

var title = "全局標題";
// bad
var imooc = {
	title: "慕課網 ES6 Wiki",
	getTitle : function(){
		console.log(this.title);
	}
};
imooc.getTitle();		// 慕課網 ES6 Wiki
var bar = imooc.getTitle;
bar();		// 全局標題

// good
var imooc = {
	title: "慕課網 ES6 Wiki",
	getTitle : () => {
		console.log(this.title);
	}
};
imooc.getTitle();		// 全局標題
var bar = imooc.getTitle;
bar();		// 全局標題

3.2 函數參數

在函數傳參時，參數不要超過兩個，這樣會讓你更容易測試這個函數，如果超過 2 個參數會導致組合膨脹，以至于你必須根據不同的參數對大量不同的情況進行測試。理想情況下是兩個，如果參數過多可以使用對象來處理。

// bad
function fn(a,b,c,d) {
	// todo
}

// good
const params = {
  a: 1,
  b: 2,
  c: 3,
  d: true
}
function fn(params) {
	// todo
}

不要使用函數的內部的參數 arguments 來獲取函數的不定參數，使用 ... 來接收。因為 arguments 獲取的參數是一個類數組需要轉化為真正的數組。

function foo() {
  const args = [].slice.call(arguments);
  console.log(args)
}
foo(1,2,3);	// [1,2,3]

function foo(...args) {
  console.log(args)
}
foo(1,2,3);	// [1,2,3]

當函數的參數有默認值時，可以使用最短路徑的方法設置。

// bad
function foo(a, b) {
  a = a || 1;
  b = b || 2;
}

// good
function foo(a=1, b=2) {
  // todo
}

3.3 一個函數只做一件事

一個函數最好只做一件事，這是軟件工程中最重要的原則。如果函數做了較多的事情，它就難以組合、測試和推測。當你讓函數只做一件事情的時候，它們就很容易重構，而且代碼讀起來也會清晰得多。

// bad
function foo(params) {
  params.forEach(param => {
    let param1 = fun1(param);
    if (param1.isActive) {
      email(client);
    }
  });
}

// good
function foo(params) {
  params.forEach(param => {
    step1(param)
  });
}
function step1(param) {
  if (foo2(param)) {
    email(client);
  }
}
function step2(param) {
  return fun1(param).isActive
}

上文中我們提到了在定義變量時要有意義，從命名就可以知道表達什么意思，所以在定義函數名時要有意義。

// bad
function foo() {}

// good
function setTitle() {}

3. 小結

本節我們從幾個方向入手通過好的寫法與不好的寫法進行對比，可以窺探到程序的優雅，多使用好的規范的寫法養成代碼規范的好習慣。