技術文章 » 怎麼開發前端才更優雅

怎麼開發前端才更優雅

2022-12-28 21:00:33

本文主要講述對命名規範、工具、外掛的一些建議，具體內容參見【參見】字樣的超連結

本文將帶你調整開發姿勢，先來看以下幾點

  1. 讓公司給你配備三臺顯示器，第一臺用來看瀏覽器效果，第二臺用來寫程式碼，第三臺用來看開發者工具
  2. 讓公司給你配備電競椅，要可以躺下的那種，方便中午睡午覺
  3. 讓公司給你配備獨立辦公室，並且可以抽菸
  4. 要彈性工作時間，前後可彈兩個小時

如果公司都不同意（你不敢說不賴我），那隻好在自己這邊下手了。一些看起來繁瑣的事情，有時反而讓我們輕鬆。

資料夾、檔案、變數、函數命名以及CSS選擇器命名

如果你說這個不重要我不會反駁你的，因為每個人有自己的想法。但是有一套自己的命名規範，對在一段時間以後回頭來看程式碼有很大的幫助。

資料夾

在vscode中下載 vscode-icons外掛後，一些關鍵詞資料夾圖示會被替換成特殊圖示，例如：

利用好關鍵詞資料夾命名（注意不要濫用），會提升你找檔案的速度

不要重複資料夾功能，意思就是，如果你有這麼一個資料夾 src\assets\imgs，就不要再建立src\assets\images了。

如果有圖片沒有放在 src\assets\imgs 而放在了另外的資料夾，也是不可取的，這樣會導致圖片的路徑難以追蹤，如果想對圖片進一步分類，可以 src\assets\imgs\icons，以此類推，其他型別的檔案也是如此。

如果你想做一個第三方小工具的 js 資料夾，那麼可以 src\plugins ,自己寫的公共方法，可以建立成src\utils或者src\tools等

注意：

  1. 如果你已經建立了 src\tools ,就不要再建立 src\xxx\tools 了，這樣在列表中看起來很混亂，並且難以追蹤
  2. 不要建立框架中自帶的關鍵詞資料夾，比如 vue 專案中，不要建立 src\views\home\components ,因為已經有了src\components ，如果想建立home頁專屬的components ，可以建立src\components\home
  3. 避免用檔案格式命名資料夾，時間長了可能就忘了這個資料夾的功能，例如 src\utils\json 、src\utils\script
  4. 避免使用短橫線，可以使用下劃線，下劃線不推薦用在開頭或結束
  5. 統一使用大駝峰、小駝峰下劃線命名，不要混用，下劃線命名是相容性比較高的，小駝峰命名是識別性比較強的，大駝峰是比較美觀的
  6. 拼音和英文不要混用，要麼全用英文，要麼全用拼音

檔案

一個資料夾中的主檔案最好和資料夾同名，如 src\views\remoteBD\remoteBD.vue ，不要使用 src\views\remoteBD\index.vue 或者 src\views\remoteBD\main.vue

  1. 避免使用短橫線，可以使用下劃線，下劃線不推薦用在開頭或結束
  2. 統一使用大駝峰、小駝峰下劃線命名，不要混用，下劃線命名是相容性比較高的，小駝峰命名是識別性比較強的，大駝峰是比較美觀的
  3. 拼音和英文不要混用，要麼全用英文，要麼全用拼音
  4. 不要以框架專案的關鍵字命名 如 vue.config.js
  5. 不要以簡單的、無意義的字元命名 如：a.png、b.png、topBtnBg.png、innerData.json、config.json、tools.js等，正確命名如：meatInAView.png、meatInBView.png、sendMsgBtnInTopBg.png、foodInnerData.json、foodConfig.json、eatTools.js，看起來長了一些，但是意義更加明確了

做到以上兩個方面，你將擁有一個乾淨整潔、分類明確的檔案樹，恭喜。

變數和函數

見名知意是唯一的要求，千萬不要怕名字長，還有一件事，動詞名詞的前後順序一定要固定，比如：sendMsgToServer，是動詞在前，名詞在後，serverMsgSender就是名詞在前，動詞在後。

這個雖然無傷大雅，但是在日常的閱讀中會稍微增加一點負擔。

變數的命名也不能以簡單的、無意義的字元命名，比如：let data = {}、let str1 = "" 、let newArr = []。改成 let originalData= {}、let msg= "" 、let recArr= [] 更好一點

CSS選擇器

推薦使用less作為前處理器，你可以完全不用學習less，而只使用它的巢狀功能，更多的功能還需要你在實際開發中探索。

css選擇器命名只需要見名知意即可，不推薦使用短橫線（"-"）分類，推薦使用更多的class名來分類，很多人可能習慣

&-xxx這種寫法，但是這種寫法可讀性極差，如果想為某些元素加同樣的樣式，可以令起一個類，比如

.flex{
    display:flex;
}

這樣，把flex類加到任何元素即可。摒棄了短橫線後，還可以便捷的雙擊選中並搜尋。這裡推薦一個vscode外掛：CSS Navigation

使用ES6

很多人只知道es6新語法有 let const、箭頭函數、陣列物件解構什麼的，很多小的實用功能卻很少有人用過。

可選鏈操作符

//const name = obj && obj.name;
const name = obj?.name;

字串模板和物件屬性表示式

//let obj = {};
//let index = 1;
//let key = `topic${index}`;
//obj[key] = '話題內容';
let obj = {};
let index = 1;
obj[`topic${index}`] = '話題內容';

非空判斷

//if(value !== null && value !== undefined && value !== ''){
    //...
//}
if((value??'') !== ''){
  //...
}

更多實用語法，參見：你會用ES6，那倒是用啊！ 、ES6基本全部語法

使用工具（powerToys）

powerToys是微軟開發的一款小工具合集，功能如圖所示

簡直是前端開發必備工具

使用瀏覽器外掛

瀏覽器外掛可以幫你完成很多工作，比如介面測試、管理cookie和本地快取，甚至可以做到自動化流水線，如果你還不會開發瀏覽器外掛，參見：一文學會瀏覽器外掛 不要重複造輪子！

另外

學習node.js（或任何一個後端語言）和mysql（或任何一個資料庫）都對前端開發有幫助，至少你應該知道應該把鍋甩給誰，而不是唯唯諾諾不敢說話，個人推薦學習後端語言從node.js（好上手）學起，資料庫從mysql（好上手）學起。這裡推薦一個學習全棧開發的開源專案：Vue-Admin-Xmw-Pro ，後端使用的egg.js（node.js框架）也是好上手的一款，鑽透這個專案，就可以獨立開發一個全棧專案了

學習強型別的語言可能會給你帶來一些好處，但是在前端開發中的效率提升不明顯。比如，一些小型專案如果使用TS開發，只會徒增負擔和降低效率。所以不用擔心不會TS會影響你的仕途，大部分專案是用不到的。如果希望學一款強型別語言，也不推薦學習TS（TS不能稱之為一門語言，它只是js的型別檢查工具），可以考慮從java入手，更完整的體驗強型別的語言。

當你掌握了上述內容，你就擁有了打敗80%的人的快速麵向業務的能力，加油，召喚師 前端人