前端JS代碼規範

前言

下面這幾點將工做中所踩的一些坑簡單整理了一下,團隊幾我的開發,一些默契就比較重要,能夠提升開發效率和代碼的可讀性

命名,編碼和註釋

命名

A.文件夾命名:文件夾、文件的命名與命名空間應能表明代碼功能,可讀性強,如hub
B.函數和變量命名:
具備意義的駝峯命名,如hubList;
變量函數名禁止使用關鍵字和保留字,禁止從新定義(不能重名)或定義不用
C.常量:大寫字母,如HUBLIST

編碼

採用統一的縮進方式排版代碼。縮進爲2個ASCII空格,句末必須用分號結尾(待定,vue就無分號)

註釋

A單行註釋

B多行註釋

C.Js代碼註釋console.log和debugger再提交
D.重要函數或者類等都要添加頭描述

字符串拼接

應使用數組保存字符串片斷，使用時調用join方法。避免使用+或+=的方式拼接較長的字符串，每一個字符串都會使用一個小的內存片斷，過多的內存片斷會影響性能

例一:

例二:會影響性能

ES6的使用

變量聲明:

Let:不存在變量提高問題;不能重複聲明

常量聲明:

Const:原理是內存地址不可變

箭頭函數:

A.有函數名

B.無函數名

C.箭頭函數使用注意的問題:
This指向定義者,內部無arguments對象,不能new(由於箭頭函數的this就是指向定義自己),函數裏面不要有太多的return
D.函數的形參不超過7個,超過用數組,調用時實參和形參對應
E.不能有重複的返回
F.在循環內部聲明函數慎用,由於是循環執行完成函數調用纔會執行
G.Return後面不要寫代碼,而且不封裝成if…then…else…

導入和導出

使用import和export,只能位於代碼頂部和頂部,若是代碼中部須要按需導入文件使用require

解決地獄回調問題

A.方法一

B.方法二

C.promise解決多個ajax或定時器調用數據依賴問題

1.promise裏面不存在ajax和定時器

var data1=12;
  Promise.resolve().then(
    function(){data1=24})
  .then(function(){
    console.log(data1);
  })

2.存在定時器

var data2=54;
let _this=this;
  Promise.resolve().then(function(){
    return new Promise(function(res,rej){
        setTimeout(() => {
        data2=36
        console.log(data2)
        console.log(_this)
        res()
        return data2;
      }, 10);
      })
  }).then(function(){
    console.log(data2)
  })

在定時器裏面設置res(),res執行啦,纔會執行then(),若是對應的ajax也能夠作相似的封裝
promise裏面的this並不指向vue,因此須要在外面緩存

3.axios封裝的promise
能夠在axios裏面設置flag,用watch監聽,值返回再執行下面的代碼,並設置Flag爲false

If,for…in,for…of和的使用

A.能用三元運算符就用,減小if的嵌套,第一個花括號位於一行的結束

B.減小多餘條件判斷,若是是函數返回if裏面和外面返回相同的數據類型


C.If…else if…else多個條件時以else結尾,由於符合防護性編程規則
D.NaN不該該用於比較,應該是判斷是不是數字
E.Switch…case使用在至少有三個判斷值,case不可省,每次case必須用break跳出
F.for…of遍歷數組和字符串

可使用break,return(一個循環一個),continue不使用,下降代碼可讀性
G.for…in遍歷對象
For…in遍歷對象包括全部繼承的屬性,因此若是隻是想使用對象自己的屬性須要作一個判斷

總結

歡迎你們補充和修正!你們聖誕節快樂.