摘要:函數的命名規范拼寫準確比如我的與把函數未執行歸咎于代碼邏輯問題使用正常的時態特別是代碼中狀態的變量或者函數的命名,比如表示已經啟動了,表示正在連接。
變量命名規范 前言
好的命名規范可以讓你不用天天為取名字而苦惱、找bug時,更快的定位到bug在哪個位置
組件的命名和它的功能相配套
不與其他業務組件重名,讓人一眼就區分
不一定要好聽酷炫,但是實用.讓開發者產生條件反射,看到命名就會想到這個組件的實用場景
易寫易記,短小卻精煉,不繁瑣
BEM.nav某一塊展示/功能區域 (div)
.nav__item這塊展示/功能區域(div)里面的某個元素,比如: nav__item
.nav__item--hide/ .nav__item--open 某個元素或者某個塊的狀態
我曾經給一個元素取了個class為advertisement,后來測試人員發現頁面上這塊元素不見了。后來發現360瀏覽器開啟去廣告模式,直接把這個div給刪了。
函數的命名規范拼寫準確 比如我的confirm與confrim 把函數未執行歸咎于代碼邏輯問題
使用正常的時態
特別是代碼中狀態的變量或者函數的命名,比如 onXxxxStarted 表示xxx已經啟動了,isConnecting表示正在連接。正確的時態可以給使用者傳遞準確的信息。
函數和屬性的命名是有區別的
如果是函數,建議使用動賓結構
動賓結構就是 doSomething,這樣的函數命名含義明確
比如: openFile, setName, addNumber...
- **如果是屬性命名,建議使用定語+名詞**
比如 fileName, maxLength, textSize
不要單詞+拼音混合使用
比如:useJiFen,huKouNumber.. 缺乏美感不說,可讀性大幅度降低。
謹慎使用縮寫
除非是約定俗成已經被廣泛使用的縮寫,否則老老實實用完整拼寫。典型的反面例子: count->cnt, manager->mgr password->pwd button->btn無論我們使用eclipse 或者intellij, 都有很好的自動完成功能,名字長一點沒關系的,可讀性更重要。
Ant.design 的 React 組件是下面這樣的時候,我感覺到一種自由的味道。首先,組件名可以使用原生 HTML 標簽名,意味著再也不用較勁腦汁去規避原生 HTML 標簽了。另外,這些組件都使用了首字母大寫標簽名,使它們很容易地與原生小寫的 HTML 標簽區分。
ReactDOM.render(基礎組件命名, mountNode );
應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭,比如 Base、App 或 V。
**反例** components/ |- button.vue |- loading.vue |- slide.vue **正例** components/ |- BaseButton.vue |- BaseLoading.vue |- BaseSlide.vue單個活躍實例的組件
單個活躍實例的組件應該以 The 前綴命名,以示其唯一性
這不意味著組件只可用于一個單頁面,而是每個頁面只使用一次。這些組件永遠不接受任何 prop,因為它們是為你的應用定制的,而不是它們在你的應用中的上下文。如果你發現有必要添加 prop,那就表明這實際上是一個可復用的組件,只是目前在每個頁面里只使用一次。
**反例** components/ |- SaleManage.vue |- ImportExcel.vue **正例** components/ |- TheSaleManage.vue |- TheImportExcel.vue緊密耦合的組件名
和父組件緊密耦合的子組件應該以父組件的命名為前綴.如果一個組件只在其父組件某個場景下有意義,這層關系應該體現在組件名上,因為編輯器通常按照首字母順序組織文件.
**反例** components/ |- SearchBox.vue |- SearchItem.vue |- SearchButton.vue **正例** components/ |- SearchBox.vue |- SearchBoxItem.vue |- SearchBoxButton.vue組件命中的單詞順序
組件名應該以高級別的 (通常是一般化描述的) 單詞開頭,以描述性的修飾詞結尾。
**反例** components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue **正例** components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue完整單詞的組件名
編輯器中的自動補全已經相當友好,讓書寫長的組件名的代價已經可以微乎其微,同樣的效率更易于理解,何樂而不為?
**反例** components/ |- soManage.vue |- woManage.vue **正例** components/ |- SaleOrderManage.vue |- WorkOrderManage.vueprop的大小寫
在聲明時始終采用(camelCase),在模板和 JSX 中應該始終使用( kebab-case)。
單純的遵循每個語言的約定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中則是 kebab-case。
**反例** props: { "greeting-text": String }vue中變量命名規范**正例** props: { greetingText: String }
變量命名使用主要集中在data和methods中
data中更多的是名詞與狀態布爾類型名詞:名詞太多,大致分為復數、后綴加Arr、加Obj之類作為約定規則
狀態布爾型:
1.表示是不是,用is+ :如 isEmpty
表示有沒有,用has+... : 如 hasClass
表示能不能,用can+... :如 canSubmit
單詞本身的形式(過去式、進行時、將來時):had開頭、ing、ed結尾等
methods中handle+以下:dd/remove,添加/移除
add/delete,添加/刪除
insert/delete,插入/刪除
start/stop,開始/停止
begin/end,開始/結束
send/receive,發送/接收
get/set,取出/設置
get/release,獲取/釋放
put/get,放入/取出
up/down,向上/向下
show/hide,顯示/隱藏
open/close,打開/關閉
increment/decrement,增加/減少
lock/unlock,鎖/解鎖
next/previous,下一個/前一個
create/destroy,創建/銷毀
min/max,最小/最大
visible/invisible,可見/不可見
pop/push,出棧/入棧
store/query,存儲/查詢
結合業務:
表單提交:submit、send
表單增刪改查:add、delete、update、search、reset
上傳附件:upload
關閉打開彈窗:open/close
檢查:check
CSS命名方式=》BEM
如何定義一個好的變量名
理解CSS命名規范--BEM
聊聊 Vue 組件命名那些事
談談函數的命名規范
vue組件命名指南,不為取名而糾結
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113173.html
摘要:在上一篇的編程風格學習二中我們學習了一些在編碼過程中的格式規范,遵循這些規范毋庸置疑是我們的書寫高質量代碼的前提與基礎。二語言編程規范常量命名常量的每個單詞均大寫,單詞之間使用下劃線連接。方法表示動作,采用動詞命名。 在上一篇的java編程風格學習(二)中我們學習了一些在Java編碼過程中的格式規范,遵循這些規范毋庸置疑是我們的書寫高質量代碼的前提與基礎。今天我們更進一步,一起來學習J...
摘要:這樣的變量增加了代碼量,并且混淆讀者。錯誤代碼示例變量雖然聲明了,但沒被使用持續更新 JavaScript 編碼規范 一、命名規范 1. 變量 命名方法:小駝峰式命名法(由小寫字母開始,后續每個單詞首字母都大寫) 命名建議:語義化的名詞 特殊:布爾值變量建議添加符合其含義的前綴動詞 is:是否 can:能不能 has:有沒有 示例: // 頁面標題 let pageT...
摘要:最近在知乎上看到這個作為程序員,有沒有讓你感到既無語又崩潰的程序命名。今天,也分享下最近自己在使用的命名習慣,當然只是個人習慣。但是兩個函數的命名,一個是,另一個是。關于的命名規范,應該很多人都是習慣用大駝峰命名。 把一件平凡的事情做好,很平凡。把一件平凡的事情堅持的做好,很不平凡。 1.前言 如果說計算機科學只存在兩個難題:緩存失效和命名。那么我就覺得命名的難點只有兩個:詞匯量和堅持...
閱讀 821·2023-04-25 19:49
閱讀 3756·2021-09-30 09:47
閱讀 2742·2021-09-13 10:21
閱讀 2680·2021-08-24 10:04
閱讀 3168·2019-08-30 15:55
閱讀 2296·2019-08-30 15:55
閱讀 2399·2019-08-30 15:54
閱讀 3471·2019-08-30 13:53