大家好，我是若川。今天分享一篇關于如何命名更優雅的文章。
點擊下方卡片關注我、加個星標，或者查看源碼等系列文章。學習源碼整體架構系列、年度總結、JS基礎系列
本文首發于政采云前端團隊博客：編寫高質量可維護的代碼：優雅命名
https://www.zoo.team/article/good-name
前言
俗話說得好，萬事開頭難。而對于前端 coder 來說，每次新項目、新需求來的時候，我想大家最苦惱的往往就是如何去命名，無論是項目名稱、頁面的文件名稱亦或是代碼中的方法名稱，對于我來說，但凡名字想好了以后，我覺得需求就已經寫完一半了。
如何才能更好，更優雅的去解決這些命名問題呢？在這之前，先隨我看一些不合適的命名示例吧。
不合適的命名
我們先來看一些例子：
無意義的，抽象的，任何地方可以使用，誰都不知道你這里用的命名來源是誰
//?bad
const?data;
const?info;
const?tool;
簡稱，單詞的簡稱或者縮寫很容易讓人無法確定具體指代什么
//?bad
const?comp;
const?crt_date;//?good
const?components;
const?company;
const?current_date;
數字或者字母結尾的命名，讓其他人無法獲取這些之間的區別
//?bad
const?button1;
const?button2;
const?info1;//?good
const?importButton;
const?userInfo;
全局的地方不要用前置或后置下劃線，前置下劃線通常代表了私有變量
//?bad
const?_firstName_?=?'Zcy';
const?firstName_?=?'Zcy';
const?_firstName?=?'Zcy';//?good
const?firstName?=?'Zcy'
命名規則
如何讓命名更簡單呢，只要遵循一些規則規范，總能將復雜的事情拆分開來，變成一件簡單的事情。
直白、有意義
想要讓你的命名簡單易懂，最簡單的方式就是直白并且有意義，直接了當的在命名中體現出你這個命名的功能，或者描述，舉個例子：
//?bad
function?getInfo(){};
function?formatList(){};
const?data?=?[];//?good
function?getUserInfo(){};
function?formatNewsList(){};
const?articleData?=?[];
如果在頁面中定義了上面這樣的變量，哪種寫法可以讓你在沒有注釋的情況下，就能快速了解原作者的書寫意圖呢？（當然，代碼中還是需要一些必要注釋的）。
所以在命名的時候，需要的就是直白、完備、有意義，讓別人通過命名就能了解到這個名稱（無論是變量、方法或者是樣式名）背后的的含義，這樣的命名就是高效的、易懂的。
遵從慣例、標準
習慣使用業界習慣的命名標識，或者是約定俗成的書寫習慣。
用
id當做數據標識命名，而不是identifier例如布爾值命名類型，通常只有兩個值類型：真，假，根據不同的使用場景，也可以有一些常用的命名方式
//?可見、狀態等，可用?is+動詞/形容詞的方式
const?isVisible;
const?isLoading;//?配置，選項等類型，可以用?withXxx、hasXxx?來標識是否有某個屬性等,enableXxx?來表示是否開啟配置
const?withTab;
const?hasPlan;
const?enableFilter;
例如方法命名，也可以使用動詞 + 名次類的組合命名方式，操作類方法 fetchXxx，getXxx，當需要根據某些屬性獲取數據時可用 ，getXxxByYxx 這類的命名，刪除類方法 deleteXxx，格式化數據 formatXxx
//?數據獲取方法
function?getUserInfo(){};
function?fetchSearchList(){};//?需要根據一些屬性去獲取數據
function?getGoodsById(){};
function?queryUserByName(){};//?刪除數據
function?deleteUser(){};
function?removeGoodsItem(){};//?格式化數據
function?formatDate(){}；
function?sortByDesc(){}
規范約束
團隊如果用統一的命名規范，那就一定要遵守，例如文件名的命名是大寫字母開頭的駝峰寫法，那你的命名就不能再修改為其他方式，在規范創建之初或者修訂時可以提出修改意見并進行討論，但如果已經確立的，就不要再。去自由的破壞規范。
當然也可以使用一些輔助手段幫助約束代碼中的命名校驗，例如在 Eslint 配置中加入 id-match 或者 camelcase，前者可以直接通過正則配置自己需要的命名規范，后者則是直接采用了駝峰命名的規范約束。
這里也舉例介紹一下在 VsCode 中 Eslint 的使用
首選電腦全局安裝 eslint
npm?install?eslint?-g
VsCode?中安裝ESlint插件并且啟用
在自己項目中，執行
eslint --init命令來創建項目的.eslintrc.js文件，之后可以在.eslintrc.js文件中的rules規則添加上規范的約束條件來使用這個規則
module.exports?=?{"rules":?{"id-match":?["error",?"^[a-z]+([A-Z][a-z]+)*$"],"camelcase":?["error",?{"properties":?"always"}]}
}
項目中如果碰到不符合規范的就會直接報錯提示
命名規范推薦
上面簡單介紹了一些命名的規則，那么具體到實際操作中，我們又有哪些較好的命名規范可以選擇呢？下面根據不同的使用場景，也簡單給大家介紹一些經常推薦使用的命名規范。
項目名稱、文件名稱
項目或者單文件的命名方面，常見規則：
kebab-case：橫短線命名，也叫串式命名法，小寫字母的詞組，中間加-拼接的方式，這種方式命名便于同類內容快速查找
//?good
news-index;
news-list;
news-detail;
camelcase：小駝峰命名，第一個單字以小寫字母開始，第二個單字的首字母大寫
//?good
newsIndex;
newsList;
newsDetail;
JavaScript
變量：常用小駝峰命名
//?good
const?userInfo;
const?userAddressList;
const?currentDate;
全部使用大寫字母，單詞之間采用
_分割
//?good?
const?ITEM_LIST;
const?PAGE_ITEM_LIST;
const?DEFAULT_CONFIG;
方法：小駝峰命名，并且推薦命名時添加一些動詞類，可以幫助快速理解方法含義，例如以 handle 開頭，中間 xxx 表示操作內容，show 表示具體操作，
handlexxxxChange，handlexxxxShow，而比如數據獲取可以用 get，fetch 這類
//?小駝峰命名
function?getUserInfo(){};
function?addSuplierInfo(){};//?添加一些操作類的輔助命名
function?handleUserInfoChange(){};
function?handleTitleClick(){};
function?fetchPageData(){};
類名：大駝峰命名
export?class?CommonLogo;
export?class?CartCenter;
css
BEM 規范
BEM 是一種命名 CSS 樣式的命名方法和規范，全稱 Block（塊）、 Element（元素）、Modifier（修飾符） ，想必很多人都比較熟悉了。
Block：一般可以看做是獨立具有實際意義的模塊部分，例如 header,container,menu 等
Element：組成 Block 的一部分，沒有具體的實際意義，一般也不獨立使用，例如 menu item，list item，header title 等
Modifier：一般是塊或者元素的修飾狀態或者行為，例如 disabled，color，checked 等
而 BEM 的寫法一般是 .block-name__element-name--modifier-name，其中 Block 與 Element 之間連接是通過 __ 雙下劃線，Block，Element 與 Modifier 之間是通過 -- 雙中劃線進行連接，當使用less或者 sass 語法編寫 css 時，通過嵌套語法也能夠很簡潔的書寫這部分樣式。
<div?class="head"><div?class="head__title">標題<div?class="head__title--disabled">置灰內容</div></div>
</div>
.head?{background-color:?#fff;&__title?{font-size:?14px;color:?#666;&--disabled:?{color:?#f00;?}}
}
BEM 命名規范可以讓樣式的命名更加模塊化，組件之間結構獨立，減少了命名之間的沖突，有著不錯的易讀性、維護性等等，但可能會讓項目中的樣式命特別的長。
下面也有一些使用 BEM 命名規范的網站，有興趣的可以去看看：
https://csswizardry.com/
https://mediatemple.net/
https://www.udemy.com/
常用 CSS 樣式名稱
這里引用一下掘金作者 冷石Boy 的 css 樣式名稱
包裹類： container, wrapper, outer, inner, box, header, footer, main, content, aside, page, p, block
狀態類： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading
尺寸類： large, middle, small, bigger, smaller
組件類： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog
位置類： first, last, current, prev, next, forward, back
文本類： title, desc, content, date, author, category,label,tag
人物類： avatar, name, age, post, intro
取名推薦工具
當然對于命名有困難選擇癥的朋友來說，可以推薦你們一個意想不到的網站 —— Codelf (https://unbug.github.io/codelf)，一個幫你搜索 Github、GitLab 等網站中，你想查找的內容的不同命名。
并且這個網站支持 JavaScript、CSS、HTML、Java 等多種語言的搜索，可以方便的過濾不需要的搜索類型。
Hover 搜索詞后的操作，Search 會再以當前選詞進行一次搜索，Repo 可以跳轉這個詞語的出處項目，Copy 當然就不說了，有興趣的朋友都可以嘗試一下。
總結
命名其實并不麻煩，遵循一些定好的規則規范，或者自己給自己定義好這個規范，然后進行直白、有意義的命名，那么之后的命名就只會成為你的一種習慣，而不再是困擾你的難題，也希望大家可以分享一些自己的命名規范或者技巧，共同討論下吧。
參考文獻
故宮命名法：https://juejin.cn/post/6844903913892610061
如何代碼命名：https://www.cyningsun.com/07-04-2020/how-to-naming-things.html
最近組建了一個江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進群。
·················?若川出品?·················
今日話題
略。歡迎在下方留言~? 歡迎分享、收藏、點贊、在看我的公眾號文章~
一個愿景是幫助5年內前端人走向前列的公眾號
可加我個人微信?ruochuan12，長期交流學習
推薦閱讀
我在阿里招前端，我該怎么幫你？（現在還能加我進模擬面試群）
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？
點擊上方卡片關注我、加個星標，或者查看源碼等系列文章。
學習源碼整體架構系列、年度總結、JS基礎系列
：Silverlight的界面布局)
