學(xué)習(xí)筆記——JavaScript 編碼規(guī)范

lufficc 發(fā)布于2019-08-26 11:39 / 1809人閱讀

類型 基本類型

 - string
 - number
 - boolean
 - null
 - undefined
 - symbol(表示獨(dú)一無二的值,使用時(shí)需要注意瀏覽器是否支持)
     //example
    const symbol1 = Symbol();
    const symbol2 = Symbol(42);
    const symbol3 = Symbol("foo");
    
    console.log(typeof symbol1);
    // expected output: "symbol"
    
    console.log(symbol3.toString());
    // expected output: "Symbol(foo)"
    
    console.log(Symbol("foo") === Symbol("foo"));
    // expected output: false

復(fù)雜類型

- array
- object
- function

聲明變量

//塊級(jí)作用域內(nèi)有效
- let
//塊級(jí)作用域內(nèi)有效 不可重復(fù)賦值
- const

對(duì)象 直接聲明

//bad
let obj = new Object();
//good
let obj = {};

動(dòng)態(tài)屬性名

//bad
function getKey(key){
    return `${key}`
}
let obj = {
    id:1
    name:"jack"
}  
obj[getKey("age")] = 18;
console.log(obj.age) //18

//good
let obj = {
    name:"jack",
    age:18,
    [getKey("age")]:18
}

對(duì)象方法簡(jiǎn)寫

//bad
let obj = {
    name:"jack",
    age:18,
    show:function(arg){
        console.log(arg)
    }
}  
//good
let obj = {
    name:"jack",
    age:18,
    show(arg){
        console.log(arg)
    }
}

屬性值簡(jiǎn)寫

//bad
let age = 18;
let obj = {
    name:"jack",
    age:age
}
//good
let obj = {   
    age,//簡(jiǎn)寫最好放前面
    name:"jack",
    "data-id":5//鍵名盡量不加引號(hào)，除非沒有引號(hào)不合法
}

不要直接使用Object.prototype的方法

//不要直接使用Object.prototype的方法，如hasOwnProperty, propertyIsEnumerable和isPrototypeOf
//bad
let obj = {
    id:1,
    name:"jack"
}
obj.hasOwnProperty("name");
//good
Object.prototype.hasOwnProperty.call(obj,"name");
//best
var has = Object.prototype.hasOwnProperty;
has.call(obj,"name")

用變量的解構(gòu)賦值代替Object.assign()做淺拷貝

//用變量的解構(gòu)賦值代替Object.assign()做淺拷貝
//bad
let ori = {a:1,b:2};
let copy = Object.assign({},ori,{c:3});
//good
let ori = {a:1,b:2};
let copy = {...ori,c:3};//{a:1,b:2,c:3}
let {a,...notA} = copy; // notA={b:2,c:3}

數(shù)組 簡(jiǎn)潔聲明

//bad
let arr = new Array();
//good
let arr = [];

使用push代替直接分配元素給數(shù)組

//bad
let arr = [];
arr[arr.length] = "abc";
//good
arr.push("abc");

擴(kuò)展運(yùn)算符...代替數(shù)組拷貝

//bad
let arr = [1,2,3];
let copy = [];
for(let i=0;i
轉(zhuǎn)換類數(shù)組的對(duì)象為數(shù)組
let div = document.querySelectAll("div");
//good
let arr = Array.from(div);
//best
let arr = [...div]
數(shù)組方法中的return
//當(dāng)function大括號(hào)只有一個(gè)表達(dá)式時(shí)，{}和rerun都可以省
//bad
[1,2,3].map(x=>{
    let y = x+1;
    return x*y
}) 
//good
[1,2,3].map(x=>x+1) 

解構(gòu)賦值
//object
//good
function getFullName(user){
    let {firstName,lastName} = user;
    return `${firstName}${lastName}`
}
//best
function getFullName({firstName,lastName}){
    return `${firstName}${lastName}`
}

//array
let arr = [1,2,3,4];
//bad
let first = arr[0];
let sec = arr[1];
//good
[first,sec] = arr

函數(shù)的多個(gè)返回值用對(duì)象解構(gòu)賦值
//bad
function processInput(input){
    return [let,top,right,bottom]
}
//good
function processInput(input){
    return {let,top,right,bottom}
}
//use
let {left,bottom} = processInput(input);

字符串
使用單引號(hào)
//bad
let str = "hello world";
//good
let str = "hello world"
             
盡量別轉(zhuǎn)行
//有轉(zhuǎn)行時(shí),當(dāng)然字符數(shù)不超過100的情況盡量別轉(zhuǎn)行
//bad
let str = "hello world,"+
          "balabalabala";
//good
let str = "hello world,balabalabala"
字符串變量拼接
//bad
let str = "hello "+name+" !";
//good
let str =`hello ${name} !`;

函數(shù)
復(fù)雜名稱的函數(shù)賦值給一個(gè)簡(jiǎn)潔變量名
  //bad
  let foo= function(){}
  function foo(){}
  //good
  let foo = function getPageFooComponent(){}
  //use
  foo();
別在if while等語句中聲明函數(shù)
//bad
if(){
    function test(){}
}
//good
let test;
if(){
    test = ()=>{console.log("hello")}
}
別用arguments作為參數(shù)名
//bad
function foo(name,arguments){}
//good
function foo(name,arg){}
擴(kuò)展運(yùn)算符...代替arguments
//bad
function test(){
    let args = Array.portotype.slice.call(arguments);
    return args.join("");
}
//good
function test(...args){
    return args.join("");
}
默認(rèn)參數(shù)
//bad
funtion test(opt){
    let opt = opt || {}
}
//good
function test(opt={}){

}
別在參數(shù)體里面計(jì)算
//bad
let a=1;
function test(b = a++){
    
}
將賦值的參數(shù)放在最后
//bad
function test(opt = {},name){
}
//good
function test(name,opt = {}){
}
別對(duì)參數(shù)重新賦值
//bad
function test(a){
    let a=1;
}
function test(a){
   if(!a){
    let a=1;
   }
}
//good
function test(a){
    let b = a || 1;
}
function test(a = 1){
  
}
類&構(gòu)造方法
用class代替?zhèn)鹘y(tǒng)的prototype手動(dòng)方法
//bad
function Queue(contents = []){
    this.queue = [contents];
}
Queue.prototype.pop = function(){
    let value = this.queue[0];
    this.queue.spice(0,1);
    return value;
}
//good
class Queue {
    constructor(contents = []){
        this.queue = [contents]
    }
    pop(){
        let value = this.queue[0];
        this.queue.spice(0,1);
        return value;
    }
}
用extend做繼承
//good
class Dog extends Animal{
    yell(){
        return "wangwang"
    }
}
this的指向
 //bad
 Jedi.prototype.jump = function(){
     this.jumping = true;
     return true;
 }
 Jedi.prototype.setHeight= function(height){
     this.height = height;
 }
 let luck = new Jedi();
 luck.jump();
 luck.setHeight(20);
//good
class Jedi{
    jump(){
        this.jumping = true;
         return true;
    }
    setHeight(height){
        this.height = height;
    }
}
let luck = new Jedi();
luck.jump();
luck.setHeight(20);
子類的構(gòu)造函數(shù)必須執(zhí)行一次super函數(shù)
//bad
class test {
    constructor() {}//空constructor不需要
    
    getName() {
        return this.name;
    }
}
//bad
class test {
    constructor(...args) {
        super(...args)//只是為了繼承constructor不需要
    }
}
//good
class test {
    constructor(...args) {
        super(...args)
        this.name = "key"
    }
}
模塊
import/export
//bad
let AirbnbJavascriptGuide = require("./AirbnbJavascriptGuide ");
module.exports = AirbnbJavascriptGuide.es6;
//ok
import AirbnbJavascriptGuide  from "./AirbnbJavascriptGuide ";
export default AirbnbJavascriptGuide.es6;
//best
import {es6} from "./AirbnbJavascriptGuide ";
export default es6;
忌用通配符import
//bad
import * as AirbnbJavascriptGuide from "./AirbnbJavascriptGuide ";
//good
import AirbnbJavascriptGuide from "./AirbnbJavascriptGuide ";
別在import時(shí)同時(shí)export
//bad
export { es6 as default } from "./AirbnbJavascriptGuide ";
//good
import { es6 } from "./AirbnbJavascriptGuide ";
export default es6;
同一個(gè)地址放在一個(gè)import
//bad 
import foo form "foo";
...
import { name,age } from "foo";
//good
import foo,{ name,age } form "foo";
//best
import foo,{ 
            name,
            age 
            } form "foo";
只有一個(gè)export時(shí) 用export default
//bad
export function foo() {}
//good
export default foo() {}
不要在import時(shí)用Webpack loader
//bad
import foo from  "css!sass!foo.scss";
//good
import foo from "foo.css";
迭代遍歷
用map、every、filter,find,findIndex,some,reduce等代替for-in,for-of
let numbers = [1,2,3,4]
//bad
let sum = 0;
for(let num of numbers){
    sum += num;
}    
//good
let sum = 0;
numbers.forEach(num => sum += num);

//bad
let increaseByOne = [];
for(let i = 0;i< numbers.length;i++){
    increaseByOne .push(numbers[i]+1);
}
//good
let increaseByOne = numbers.map(num => num + 1);
正確的constructor的書寫
//good
let  test = function* (){
    //...
}
屬性
通過.訪問屬性
let  luke = {
    jedi:true,
    age:28
}
//bad
let isJedi = luke["jedi"];
//good
let isJedi = luke.jedi;
通過變量訪問屬性時(shí)使用中括號(hào) []
let  luke = {
    jedi:true,
    age:28
}
function getProp(prop) {
    return luke[prop];
}
let isJedi = getProp("jedi")
##變量##
用let和const聲明變量
//good
let superPower = new SuperPower();

提升
var 聲明會(huì)被提升至該作用域的頂部，但它們賦值不會(huì)提升
//bad
// 由于變量提升的原因，
// 在引用變量后再聲明變量是可以運(yùn)行的。
// 注：變量的賦值 `true` 不會(huì)被提升。
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}
匿名函數(shù)表達(dá)式的變量名會(huì)被提升，但函數(shù)內(nèi)容并不會(huì)
function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function() {
    console.log("anonymous function expression");
  };
}    
函數(shù)聲明的名稱和函數(shù)體都會(huì)被提升
function example() {
  superPower(); // => Flying

  function superPower() {
    console.log("Flying");
  }
} 

比較和等號(hào)
優(yōu)先使用 === 和 !== 而不是 == 和 !=
//good
if(a===1){}
使用簡(jiǎn)寫
// bad
if (name !== "") {
  // ...stuff...
}

// good
if (name) {
  // ...stuff...
}

// bad
if (collection.length > 0) {
  // ...stuff...
}

// good
if (collection.length) {
  // ...stuff...
}
三元運(yùn)算符通寫在一行
// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

// split into 2 separated ternary expressions
const maybeNull = value1 > value2 ? "baz" : null;

// better
const foo = maybe1 > maybe2
  ? "bar"
  : maybeNull;

// best
const foo = maybe1 > maybe2 ? "bar" : maybeNull;   
避免不必要的三元運(yùn)算符
// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

// good
const foo = a || b;
const bar = !!c;
const baz = !c;
混合運(yùn)算時(shí)，盡量用括號(hào)，易懂
//bad
if(a || b && c){
    //...
}
//good
if(a || (b && c)){
    //...
}
代碼塊
用大括號(hào)包裹所有的多行代碼塊
// bad
if (test)
  return false;
// good
if (test){
  return false; 
}
條件語句
條件語句,換行將運(yùn)算符放在最前面
// bad
if ((foo === 123 || bar === "abc") && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  thing1();
}
//good
if (
    (foo === 123 || bar === "abc") 
    && doesItLookGoodWhenItBecomesThatLong() 
    && isThisReallyHappening()
    ) {
  thing1();
}
注釋
- 使用 /** ... */ 作為多行注釋
- 使用 // 作為單行注釋 ，上方空一行
- 使用 // FIXME: 標(biāo)注問題
- 使用 // TODO: 標(biāo)注問題的解決方式
逗號(hào)
- 行首逗號(hào)：不需要
- 結(jié)尾的逗號(hào): 需要
分號(hào)
- 別省略分號(hào)
類型轉(zhuǎn)換
字符串
// bad
const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string"

// bad
const totalScore = this.reviewScore + ""; // invokes this.reviewScore.valueOf()

// bad
const totalScore = this.reviewScore.toString(); // isn’t guaranteed to return a string

// good
const totalScore = String(this.reviewScore);
數(shù)字
let inputValue= 4;

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);
布爾
const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// good
const hasAge = !!age;    

命名規(guī)則
- 避免單字母命名。命名應(yīng)具備描述性
- 使用駝峰式命名對(duì)象、函數(shù)和實(shí)例
- 使用ES6命名構(gòu)造函數(shù)或類
class  User {
    constructor(options) {
        this.name = options.name;
    }
}
let good = new User({
    name:"yup"
});
- 使用下劃線 _ 開頭命名私有屬性
- 使用箭頭函數(shù)避免this引用錯(cuò)誤
//bad 
function test(){
    let self = this;
    return function(){
        console.log(self);
    }
}
//good
function test(){
    return ()=>{
        console.log(this);
    }
}
- 文件只輸出一個(gè)類,文件名必須和類名完全保持一致
// file contents
class CheckBox {
  // ...
}
export default CheckBox;

// in some other file
// bad
import CheckBox from "./checkBox";

// bad
import CheckBox from "./check_box";

// good
import CheckBox from "./CheckBox";
存取器
- 使用好get、set
- is、has
- 保持一致
// bad
dragon.age();

// good
dragon.getAge();
// bad
if (!dragon.age()) {
  return false;
}

// good
if (!dragon.hasAge()) {
  return false;
}
事件
// bad
$(this).trigger("listingUpdated", listing.id);

...

$(this).on("listingUpdated", function(e, listingId) {
  // do something with listingId
});    
// good
$(this).trigger("listingUpdated", { listingId : listing.id });

...

$(this).on("listingUpdated", function(e, data) {
  // do something with data.listingId
});
jQuery
使用 $ 作為存儲(chǔ) jQuery 對(duì)象的變量名前綴
// bad
const sidebar = $(".sidebar");

// good
const $sidebar = $(".sidebar");
緩存 jQuery 查詢
const $sidebar = $(".sidebar");
對(duì) DOM 查詢使用層疊
$(".sidebar ul")
$(".sidebar > ul")
對(duì)有作用域的 jQuery 對(duì)象查詢使用 find
// bad
$("ul", ".sidebar").hide();
// good
$sidebar.find("ul").hide();


參考:
https://github.com/airbnb/javascript