JavaShuo
欄目
標籤
前端代碼重構
時間 2020-03-25
標籤
前端
代碼
简体版
原文
原文鏈接
1、代碼規範化
整理一套vscode中格式化配置,在頁面保存時自動格式化,團隊成員格式統一(搭配eslint)。
整理項目中的命名(不要嫌長,但也不能過於冗長,儘可能能讓人一眼看明白)
html
私有變量前加'_'
方法使用駝峯命名
組件大寫開頭的駝峯命名
樣式'-'鏈接
文件名統一
html嵌套儘可能少於5層,標籤語義化。
規範項目中的註釋(可稍晚點進行)
2、刪除冗餘代碼
刪除項目中沒有用到的代碼
去掉頁面中引入了卻沒有使用的組件
刪掉項目中用不到的文件
3、重構樣式(sass)
通用樣式中的代碼需適當合理放置(基礎樣式、顏色樣式、邊距樣式、字體樣式等)。
無需大批量生成基礎樣式,用到的放上就行了。
組件及頁面內的獨立樣式使用scoped區別開。
佈局統一,不要em/rem/px混合使用。
少用或不用通配符。
4、修復一些邏輯或代碼錯誤
項目中出現一些js異常報錯問題(例如,遍歷接口返回的數據,可是接口返回的是null,這時就須要兼容下)
由於前開發者的邏輯問題,致使代碼異常難改,各類混亂引用。
對於可能出現問題的地方,須要盡行異常捕獲,並處理異常狀況。
對於定時器,在離開頁面的時候必須清理掉。
5、抽離公共方法
基礎方法需抽離出來,放到公共模塊。
項目中,兩次及以上用到的同一功能方法,都需提取出來。
一個方法超過一屏幕,基本就要考慮抽離了。
6、抽離公共組件
基礎組件需抽離出來。
兩次及以上用到同一功能的代碼,都應該抽離成組件的形式,便於重複使用。
組件能夠引用組件,可是必須防止死鎖。
7、優化組件內部代碼
組件內部代碼,若有不合理或者冗餘的地方,必須進行優化。
props中參數,補全類型及默認值。
8、優化公共方法實現
方法內,若有不合理的實現,必須優化掉。
簡單邏輯簡單化,不要過於複雜實現。
公共方法,儘可能通用,解偶。
9、接口相關優化
請求接口功能統一封裝。
請求url統一管理。
錯誤信息必須捕獲並提示。
10、提升頁面加載性能
這裏主要涉及到前端優化的一些工做,不展開。
相關文章
1.
前端代碼重構和解耦
2.
Web前端開發最佳實踐(2):前端代碼重構
3.
重構之前的代碼
4.
phalcon 前端代碼結構
5.
前端 | 重構 gulpfile.js
6.
代碼重構
7.
重構代碼
8.
代碼 重構
9.
前端代碼考(算)古(帳)與翻(重)新(構)
10.
重構,第一個案例,重構前的代碼
更多相關文章...
•
Markdown 代碼
-
Markdown 教程
•
Eclipse 代碼模板
-
Eclipse 教程
•
IntelliJ IDEA代碼格式化設置
•
使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
代碼重構
前端+後端代碼
前端構建
代碼架構
前端編碼
附前、後端代碼
重構
前端
代碼
前端+後端(java)
SQLite教程
Spring教程
MyBatis教程
代碼格式化
架構
後端
0
分享到微博
分享到微信
分享到QQ
每日一句
每一个你不满意的现在,都有一个你没有努力的曾经。
最新文章
1.
吳恩達深度學習--神經網絡的優化(1)
2.
FL Studio鋼琴卷軸之工具菜單的Riff命令
3.
RON
4.
中小企業適合引入OA辦公系統嗎?
5.
我的開源的MVC 的Unity 架構
6.
Ubuntu18 安裝 vscode
7.
MATLAB2018a安裝教程
8.
Vue之v-model原理
9.
【深度學習】深度學習之道:如何選擇深度學習算法架構
本站公眾號
歡迎關注本站公眾號,獲取更多信息
相關文章
1.
前端代碼重構和解耦
2.
Web前端開發最佳實踐(2):前端代碼重構
3.
重構之前的代碼
4.
phalcon 前端代碼結構
5.
前端 | 重構 gulpfile.js
6.
代碼重構
7.
重構代碼
8.
代碼 重構
9.
前端代碼考(算)古(帳)與翻(重)新(構)
10.
重構,第一個案例,重構前的代碼
>>更多相關文章<<