前端JS代碼規範

互聯網人學習成長社群

第五期Web全棧架構師火爆報名中~

前 言

下面這幾點將工作中所踩的一些坑簡單整理了一下，團隊幾個人開發，一些默契就比較重要，可以提高開發效率和代碼的可讀性。

命名，編碼和注釋

命名

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和定時器

2.存在定時器

vardata2=54;

let_this=this;

Promise.resolve().then(function(){

returnnewPromise(function(res,rej){ setTimeout(()=>{ data2=36console.log(data2)

console.log(_this) res()

returndata2; },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遍歷對象包括所有繼承的屬性,所以如果只是想使用對象本身的屬性需要做一個判斷。

以上。

https://segmentfault.com/a/1190000012576194

有你想看的精彩

感謝您的閱讀，如果你覺得我的公眾號還不錯，請多幫我推薦給你的朋友，多謝了。

前端大牛愛好者：每天一篇前端技術文章，不定時前端乾貨發送

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！