前端程式碼規範

2020 年 9 月 5 日
筆記
javascirpt

這是我上家教育saas公司前端同事整理出來的(當時我們公司主要用的前端框架是React)，當時我在這家公司除了主寫後端之外，還需要寫一些前端程式碼，按照這個規範寫，前端程式碼可讀性、可維護性、可擴展性以及性能都會大大提高。

一、JS篇

1.變數（包括聲明，函數參數）

(1)變數均用英文單詞（不會要去翻譯）

(2)變數較長時用駝峰命名（狀態+變數），例如：currentCourseId

或者下劃線形式區分，例如：current_courseId

註：無論那種方式程式碼里只能出現一種

(3)字元串中包含變數：你是最${isPig ? '胖' : '完美'}的嗎?

(4)對象屬性遵循

const itemName = '優秀';

const newObject = { itemName } 

const newObject = { itemName: itemName };

(5)對象結構賦值，兼容處理例如:

const { listData = [], ...props } = this.props;

(6)對象取值盡量採用 … 擴展運算符完成組件間多props的情況

2.方法

(1)方法命名必須遵循駝峰命名，不怕長就怕看不懂，

例如：

handleChangeChecked = () => {}

(2)方法採用es6寫法（可省去react綁定當前組件程式碼）

(3)對於用戶交互方法作用於組件的方法，遵循以下:

<div onClick = { handleClick = () => {} }>點擊事件</div>

(4)介面請求方法語義化明確例如：

getListData = () => {}

(5)js方法（filter，map，find等等）遍歷時儘可能區分到遍歷的是什麼item

例如：

listData.map（testItem => ( <div></div>)）

(6)善於運用箭頭函數來縮短程式碼行數,例如過濾:

listData.filter(item => !!item.showFlag)

二、標籤篇

(1)文本展示的不要去用自帶樣式標籤，用div/span去代替h1….h5/p

(2)減少無用標籤層級，沒有樣式功能的層級去掉

三、樣式篇

(1)sass/less文件必須層級嵌套（防止污染全局樣式），當定義一個js文件時，需要給到當前唯一className，並在less樣式文件里用className包裹樣式

(2)className的值語義化明確，要用『-』符號隔開，並且不要出現漢字

無變數情況：

className = "course-list-item"

有變數情況：不要在className裡面去判斷，已變數方式

const status = isOpen ? 'open' : 'close'; className={`item-content-${status}`}

四、整體優化篇

(1)遍歷之後item取值做好兼容後，再賦值給標籤（方便控制Dom顯隱）

(2)抽離基礎純UI展示無狀態組件，減少一個render方法層級和行數

(3)render方法拆分化，renderTop，renderMiddle，renderFooter，簡稱布局大法

(4)一個less樣式文件對應一個js文件，用className聯通，形成封閉區內的樣式渲染

(5)控制單個文件程式碼<500行

Tags: javascirpt