任何你寫的代碼，超過 6 個月不去看它，當(dāng)你再看時，都像是別人寫的。

本期編輯： 小蟲巨蟹，九彩拼盤。

條件語句的寫法

常規(guī)寫法

if (type === 'foo' || type === 'bar') {
}

寫法1:用正則

if (/^(foo|bar)$/.test(type)) {
}

寫法2:用對象

if (({foo:1, bar:1})[type]) {
}

對于上面的3種寫法。

1. 常規(guī)寫法的性能比用正則好。
2. 在條件判斷數(shù)量（數(shù)量小于5）比較少的情況下，常規(guī)寫法比用對象快。條件多的情況下，用對象更快。

具體的benchmark 見這里

常規(guī)寫法

if (value == 0) {
  return result0;
} else if (value == 1) {
  return result1;
} else if (value == 2) {
  return result2;
} else if (value == 3) {
  return result3;
} else if (value == 4) {
  return result4;
} else if (value == 5) {
  return result5;
} else if (value == 6) {
  return result6;
} else if (value == 7) {
  return result7;
} else if (value == 8) {
  return result8;
} else if (value == 9) {
  return result9;
} else {
  return result10;
}

優(yōu)化寫法:用二分法

if (value < 6) {
  if (value < 3) {
    if (value == 0) {
      return result0;
    } else if (value == 1) {
      return result1;
    } else {
      return result2;
    }
  } else {
    if (value == 3) {
      return result3;
    } else if (value == 4) {
      return result4;
    } else {
      return result5;
    }
  }
} else {
  if (value < 8) {
    if (value == 6) {
      return result6;
    } else {
      return result7;
    }
  } else {
    if (value == 8) {
      return result8;
    } else if (value == 9) {
      return result9;
    } else {
      return result10;
    }
  }
}

判斷值是數(shù)字的常規(guī)寫法

if (value == 0) {
  return result0;
} else if (value == 1) {
  return result1;
} else if (value == 2) {
  return result2;
}

優(yōu)化寫法: 用數(shù)組

var results = [result0, result1, result2];
return results[value];

對于 if 內(nèi)容只有一行內(nèi)容的簡寫

var 
      type = 'foo',
      type2 = 'bar',
      result = 0;
      
type == 'foo' && result++;
console.log(result); // 1
!type == 'foo' || result++;
console.log(result); // 2
type == 'foo' && type2 == 'bar' && result++;
console.log(result); //3
type == 'foo' && type2 == 'bar' && result == 3 && (result=0)
console.log(result); //0
type == 'OOF' || result++; //equivalent: type != 'OOF' && result++;
console.log(result); //1

所有 JavaScript 模式：http://shichuan.github.io/javascript-patterns/

文章推薦

《Vue 組件間的樣式污染》

背景

Vue 組件的組件化寫法符合 web component 這種面向未來的規(guī)范，然而在樣式隔離方面，它依然有一點美中不足。

概要

1. 污染是如何產(chǎn)生的？
2. 增加 Scoped 標(biāo)識
3. ScopeId 的繼承
4. 怎么破？
5. 這應(yīng)當(dāng)屬于 Vue-loader 的一個 bug

閱讀地址：http://www.itdecent.cn/p/b7292d01c361