前端代碼重構

1、代碼規範化

  1. 整理一套vscode中格式化配置,在頁面保存時自動格式化,團隊成員格式統一(搭配eslint)。
  2. 整理項目中的命名(不要嫌長,但也不能過於冗長,儘可能能讓人一眼看明白)html

    1. 私有變量前加'_'
    2. 方法使用駝峯命名
    3. 組件大寫開頭的駝峯命名
    4. 樣式'-'鏈接
    5. 文件名統一
  3. html嵌套儘可能少於5層,標籤語義化。
  4. 規範項目中的註釋(可稍晚點進行)

2、刪除冗餘代碼

  1. 刪除項目中沒有用到的代碼
  2. 去掉頁面中引入了卻沒有使用的組件
  3. 刪掉項目中用不到的文件

3、重構樣式(sass)

  1. 通用樣式中的代碼需適當合理放置(基礎樣式、顏色樣式、邊距樣式、字體樣式等)。
  2. 無需大批量生成基礎樣式,用到的放上就行了。
  3. 組件及頁面內的獨立樣式使用scoped區別開。
  4. 佈局統一,不要em/rem/px混合使用。
  5. 少用或不用通配符。

4、修復一些邏輯或代碼錯誤

  1. 項目中出現一些js異常報錯問題(例如,遍歷接口返回的數據,可是接口返回的是null,這時就須要兼容下)
  2. 由於前開發者的邏輯問題,致使代碼異常難改,各類混亂引用。
  3. 對於可能出現問題的地方,須要盡行異常捕獲,並處理異常狀況。
  4. 對於定時器,在離開頁面的時候必須清理掉。

5、抽離公共方法

  1. 基礎方法需抽離出來,放到公共模塊。
  2. 項目中,兩次及以上用到的同一功能方法,都需提取出來。
  3. 一個方法超過一屏幕,基本就要考慮抽離了。

6、抽離公共組件

  1. 基礎組件需抽離出來。
  2. 兩次及以上用到同一功能的代碼,都應該抽離成組件的形式,便於重複使用。
  3. 組件能夠引用組件,可是必須防止死鎖。

7、優化組件內部代碼

  1. 組件內部代碼,若有不合理或者冗餘的地方,必須進行優化。
  2. props中參數,補全類型及默認值。

8、優化公共方法實現

  1. 方法內,若有不合理的實現,必須優化掉。
  2. 簡單邏輯簡單化,不要過於複雜實現。
  3. 公共方法,儘可能通用,解偶。

9、接口相關優化

  1. 請求接口功能統一封裝。
  2. 請求url統一管理。
  3. 錯誤信息必須捕獲並提示。

10、提升頁面加載性能

  1. 這裏主要涉及到前端優化的一些工做,不展開。
相關文章
相關標籤/搜索