摘要:最近在知乎上看到這個作為程序員,有沒有讓你感到既無語又崩潰的程序命名。今天,也分享下最近自己在使用的命名習慣,當然只是個人習慣。但是兩個函數的命名,一個是,另一個是。關于的命名規范,應該很多人都是習慣用大駝峰命名。
把一件平凡的事情做好,很平凡。把一件平凡的事情堅持的做好,很不平凡。1.前言
如果說計算機科學只存在兩個難題:緩存失效和命名。那么我就覺得命名的難點只有兩個:詞匯量和堅持貫徹執行制定的規范。
最近在知乎上看到這個:作為程序員,有沒有讓你感到既無語又崩潰的程序命名?。頓時感慨萬千,因為命名對于程序員來說是就是一個難題,有時候因為命名,可能會引起別人的誤導,疑惑等,對開發效率,項目的質量影響可大可小。今天,也分享下最近自己在使用的命名習慣,當然只是個人習慣。更希望能在評論區看到大家推薦的命名方式,互相學習,交流。
關于整篇內容,主要提及兩個:2.盤點那些難以讀懂的命名1.如何寫出讓別人容易讀懂的命名
2.針對不同的對象,使用對象命名的格式
首先,先盤點下有哪些命名的一些方式是很難讓別人讀懂的。這些情況,大家看到就應該在開發上盡量避免下。
2-1.單詞拼寫錯誤舉個例子
//提交表單(把 Form 寫成了 From ) submitFrom(){...}
之前寫文章也有說過,單詞拼寫正確可以說是一個底線了。如果單詞拼寫錯誤,比如 form 和 from 都是正確的單詞,但完全不一樣的意思,如果把 form 寫成 from ,以后讀代碼的人(也可能是你自己),很有可能會懵逼。
2-2.中英文混用單詞拼寫錯誤會誤導別人,中英文混用這個命名方式就可以說讓人云里霧里的感覺,不會誤導,只會看不懂。
比如下面
let chanpinList=[];
這個變量名,一開始不知道是什么,注釋也沒有,完全懵逼。后來看了需求,才知道這個的意思是:產品列表。
2-3.以1-9,a-z命名這個情況相信大家都會遇到過,比如頁面上有幾個按鈕,有人命名成 btn1,btn2,btn3,btn4...。或者 btnA,btnB,btnC,btnD。這樣的命名看似簡單,但實際上從這些命名里面讀取不到任何信息,以后會可能會痛苦些。
2-4.混用命名格式這個可以說沒那么可恨,但是看著就別扭,比如表示評論列表,有地方這樣命名:comments,另一個地方這樣命名: comment-list,還有這樣命名: commentList。幾種規范混在一起,就感覺不規范了。
還用一種雖然一般不會出現的情況,也遇見了。比如一個地方有添加供應商的按鈕,命名是:addSupplier 。在另一個地方也有相同的功能按鈕,完全一樣,結果命名是:addSupplierInfo 。當時就以為這兩個不是同一個功能,造成了誤會。
2-5.強制中文拼音命名有些名詞,被中國人創造出來(淘寶-taobao,微博-weibo),沒有英文翻譯的。就可以用中文拼音命名,其他的都建議用英文。
但是偏偏有時候就算有英文的單詞,有些人還是用中文拼音命名,比如一個文章列表,很多人就是沒用 articleList,直接寫 wenzhangliebiao。但是看的時候,一定會懵逼一會。
2-6.強制簡寫簡介雖然可以讓命名看著更加的簡潔,但是有時卻會遇上強制簡寫的命名,比如一個函數是提交用戶評論信息的功能。原本以為是:handleCommentSubmit/submitComment/publishComment。結果后來一看--tjyhpl。強制簡寫還是用拼音的簡寫,后來讓他改一下,改成了ac。后來一問才知道他想表達的意思是 addComment ,當時差點動手了。
2-7.單復數不分這個情況不算惡劣,只算是一種規范吧,之前有分別有兩個操作函數,一個是下載全部訂單數據,一個是下載當前訂單數據。但是兩個函數的命名,一個是downloadOrderData,另一個是downloadOrder。這樣也產生了一點懵逼感。
面對這樣的情況,建議還是區分下單復數,downloadOrder,downloadOrderAll/downloadOrderList。區分了單復數的命名,如果有返回值,也可以讓別人大概知道,單數可能就是返回單個記錄,復數可能返回一個數組。
2-8.正反義詞錯用這個情況同上,不算是惡劣,只能算是不規范。比如:分別有兩個操作函數一個是顯示彈窗,一個是關閉彈窗。結果命名上面,一個是 showEditDialog 。另一個是 closeEditDialog 。
上面的案例,show 和 close ,一個是顯示,一個是關閉,顯然不是正反義詞。應該出現的姿勢是,showEditDialog 和 hideEditDialog ,或者 openEditDialog 和 closeEditDialog
2-9.為所欲為的命名還有其它的搞笑命名,在知乎上面看到的情況,別人遇到的情況。大家移步到知乎吧,這個不重復太多。
作為程序員,有沒有讓你感到既無語又崩潰的程序命名?。
3.命名相關格式說完了命名第一個,命名單詞應該正確的書寫之后。再來說下命名的相關格式在說自己的命名實例之前,先說下不同的命名對象,命名方式是不一樣的。具體如下:
待命名對象 | 推薦名稱 |
---|---|
圖片 | 小寫字母,‘-’或者‘_’ 分割 |
css(class,id) | ‘-’ 分割 |
文件,變量 | 小駝峰命名 |
js類(class) | 大駝峰命名 |
常量 | 大寫字母,‘_’ 分割 |
臨時變量,私有變量 | ‘_’ 開頭,駝峰命名 |
在說命名 HTML 命名之前,先說下布局的三個概念:模塊( module )和元件( unit )
模塊:各種常見的網頁內容模塊,通常可以重復使用的較大的整體,比如導航、菜單、幻燈、圖文列表等。命名前面建議帶有 m-
元件:各種常見的網頁內容元件,比如按鈕、標題、輸入框等。命名前面建議帶有 u-
兩者關系,模塊包含元件,元件組成模塊。
小小實例
看到上面的一個小彈窗。整個彈窗,當成一個模塊。可以把標題,提示內容,按鈕當做元件。HTML 代碼就如下,CSS , JS 代碼就不貼了。模塊就帶 m- ,元件就帶 u-
提示2這里是提示內容2確定
至于這樣的寫法有什么優劣,注意事項,這里就不展開講了,以后再寫文章。5.JavaScript命名
在js命名里面,應該只有四種命名方式:小駝峰(productList),大駝峰(ProductList),大寫字符,下劃線分割(PRODUCT_LIST),下劃線開頭+小駝峰(_productList)
5-1.按照類型命名 5-1-1.小駝峰在js寫法里面,小駝峰命名應該是最多的一種。變量,函數一般而言都是使用小駝峰命名。
//登錄處理函數 let handleLogin=function(){}5-1-2.大駝峰
在es6之前,js還沒有class的概念,但是也組織不了開發者模擬class。現在有了class,自然而然,class的命名規范就更離不開了。關于class的命名規范,應該很多人都是習慣用大駝峰命名。
//創建一個類 class Person{ //... }5-1-3.常量
常量建議還是使用大寫字符+下劃線命名。
//配置最大金額 const PRICE_MAX=10000;5-1-4.私有變量
私有變量相對于外面作用域而言,為了區分變量是公用的,還是私有的。建議命名上面就做下區分,私有變量建議使用下劃線開頭+小駝峰命名方式。
let myObj={ name:"守候", setName(){ //保存當前的this let _this=this; setTimeOut(function(){ alert(_this.name) },1000) } }5-2.按職責命名
函數命名,一般都是動詞開頭。
5-2-1.獲取值如果函數是為了獲取值(函數最后會返回一個值的),函數前面建議帶有get。
//根據 ID 獲取用戶信息 function getUserInfo(id){ }5-2-2.設置值
如果函數是為了設置值(函數最后會返回一個值的),函數執行就是為了給某一個變量賦值,函數前面建議帶有set。
//設置用戶信息 function setUserInfo(){ }5-2-3.處理動作
如果函數是為了處理一些操作,比如登錄,注冊,渲染列表等。那么就建議命名前面帶有handle。
//分頁操作 handleChangeCurrent(val){ } //注冊操作 handleRegister(){ }
這個處理動作,有些開發者也是習慣直接以動作開始。openDialog,closeDialog等。
6.目錄,文件,圖片命名 6-1目錄,文件名稱的命名規則統一小駝峰命名法。
如下例子:
目錄,文件 | 建議命名 |
---|---|
首頁 | index,index.html |
搜索頁面 | search,search.html |
產品列表 | productList,productList.html |
產品詳細頁面 | productDetail,productDetail.html |
新聞列表 | newslist,newslist.html |
新聞詳細頁面 | newsdetail,newsdetail.html |
評論列表 | commentList,commentList.html |
關于我們 | about,about.html |
如果發現名稱過長,可以在團隊約定好簡寫格式:比如 product 簡寫成 pro 。6-2圖片命名規范
如果是通用性質的圖片,例如LOGO,菜單,側邊欄,背景等,就直接使用小寫字母命名。比如:logo.jpg ,menu.jpg,aside.jpg,bg.jpg。
如果不是通用的圖片,就建議根據類別-模塊-功能的格式。使用小寫字母,‘-’或者‘_’分割,如下例子:
圖片名稱 | 意義 |
---|---|
btn-submit-comment.jpg | 提交評論的按鈕 |
bg-product-list.jpg | 產品列表模塊的背景 |
icon-views.png | 瀏覽數的圖標 |
icon-btn-vote.png | 投票按鈕 |
ad-news-aside.jpg | 在新聞側邊欄的廣告圖片 |
一些前端書寫規范建議
關于團隊合作的css命名規范
8.小結關于命名,很簡單,也很難。也是困擾著很多的開發者,包括我。該文章的命名方式,也是我在用的一種個人命名方式,希望能讓大家有所收獲。當然其中還有很多的瑕疵,希望大家多多指點,或者推薦下自己建議的命名方式。
關于命名的規范,每個公司都有自己的編碼規范,只是很少公司能認真貫徹執行自己的規范,從而導致命名錯亂。所以命名的難點,我不認為是命名本身有難度,難度在于在項目上,面對各種需要命名的對象,堅持使用一套命名格式,正確的命每一個名。
-------------------------華麗的分割線--------------------
想了解更多,和我交流,內推職位,請添加我微信。或者關注我的微信公眾號:守候書閣
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52995.html
摘要:最近在知乎上看到這個作為程序員,有沒有讓你感到既無語又崩潰的程序命名。今天,也分享下最近自己在使用的命名習慣,當然只是個人習慣。但是兩個函數的命名,一個是,另一個是。關于的命名規范,應該很多人都是習慣用大駝峰命名。 把一件平凡的事情做好,很平凡。把一件平凡的事情堅持的做好,很不平凡。 1.前言 如果說計算機科學只存在兩個難題:緩存失效和命名。那么我就覺得命名的難點只有兩個:詞匯量和堅持...
摘要:最近在知乎上看到這個作為程序員,有沒有讓你感到既無語又崩潰的程序命名。今天,也分享下最近自己在使用的命名習慣,當然只是個人習慣。但是兩個函數的命名,一個是,另一個是。關于的命名規范,應該很多人都是習慣用大駝峰命名。 把一件平凡的事情做好,很平凡。把一件平凡的事情堅持的做好,很不平凡。 1.前言 如果說計算機科學只存在兩個難題:緩存失效和命名。那么我就覺得命名的難點只有兩個:詞匯量和堅持...
摘要:整個系統變得日益繁復,人們也會去選擇使用一些預處理器或者后處理器來管理這種復雜性。的預處理器或者語言的擴展會在無聲無息之間提供類似于變量以及繼承這些特性。最主要的兩個的預處理器就是與。 本文的 Github Repo本文翻譯自 FreeCodeCamp 的 from-zero-to-front-end-hero-part。本文的第二部分:這里 譯者的廢話,不感興趣的直接忽略 前兩天才翻...
閱讀 1537·2021-11-04 16:10
閱讀 2774·2021-09-30 09:48
閱讀 2838·2019-08-29 11:31
閱讀 1577·2019-08-28 18:22
閱讀 3225·2019-08-26 13:44
閱讀 1319·2019-08-26 13:42
閱讀 2844·2019-08-26 10:20
閱讀 753·2019-08-23 17:00