建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
代碼并不是寫(xiě)完了就寫(xiě)完了，因?yàn)榇a是寫(xiě)給未來(lái)的自己和他人看的。那如何保證別人懂你代碼的意思呢?要是有一套合適的規(guī)范以后維護(hù)代碼效率豈不是很高呢！
“專(zhuān)業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶(hù)的事當(dāng)成自己的事”是我們每一個(gè)人一直以來(lái)堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴(lài)的網(wǎng)站建設(shè)服務(wù)商、專(zhuān)業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專(zhuān)注于網(wǎng)站制作、做網(wǎng)站、軟件開(kāi)發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶(hù)需求為導(dǎo)向，結(jié)合用戶(hù)體驗(yàn)與視覺(jué)傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專(zhuān)業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！
常見(jiàn)的命名規(guī)則
1.大駝峰命名法,首字母都大寫(xiě)
- FirstOne
2.小駝峰命名法，第一個(gè)單詞首字母小寫(xiě)，其他跟大駝峰一樣
- firstOne
3.蛇形命名法，單詞之間用下劃線拼接
- first_one
4.減號(hào)命名法,單詞之間用減號(hào)分割
- first-one
這些命名法最大的好處就是可以輕易區(qū)分單詞跟單詞
代碼規(guī)范中的那些潛規(guī)則
html 代碼中的潛規(guī)則
1.html 是不區(qū)分大小寫(xiě)的
瀏覽器解析標(biāo)簽是不區(qū)分大小寫(xiě)的。
- // 編譯出來(lái)是這樣的
雖然里面的 class ，id 或者其他的自定義屬性支持大寫(xiě)。但是基本上沒(méi)有用大寫(xiě)的，因此建議 html 中的代碼統(tǒng)一采用蛇行命名法和減號(hào)姓名法(好像是因?yàn)樵缙诘?xhtml 不支持大寫(xiě))
2.語(yǔ)義化標(biāo)簽
說(shuō)實(shí)在的語(yǔ)義很好掌握，但是了解這些語(yǔ)義標(biāo)簽的默認(rèn)屬性并且重置是很不容易的。(要想知道如何重置屬性歡迎觀看我的文章 《開(kāi)發(fā)效率創(chuàng)新高，只因收下了這波 CSS 操作》)
個(gè)人感覺(jué)語(yǔ)義化標(biāo)簽主要有倆個(gè)優(yōu)勢(shì)
- 支持 seo 搜索
- 閱讀起來(lái)很舒服，不會(huì)被別人噴 div 仔。
語(yǔ)義化標(biāo)簽就那么多，掌握了就是掌握了。實(shí)打?qū)嵉暮锰?，建議大家還是要掌握一下的。
JS 代碼中的潛規(guī)則
JS 是區(qū)分大小寫(xiě)的所以常見(jiàn)的命名法都是大小駝峰命名法。但是花樣要多得多：
1.構(gòu)造函數(shù)采用大駝峰命名法(或者 es6 的 class 類(lèi))
- // 構(gòu)造函數(shù)簡(jiǎn)單說(shuō)就是需要 new 出來(lái)的
- function FistOne() {}
- new FirstOne()
- // class 就是符合下面這種語(yǔ)法糖的
- class FirstOne () {}
2.常量采用全大寫(xiě)的蛇形命名法
常量就是不能更改的變量，為了醒目所以都遵循著全大寫(xiě)的蛇形命名法則
- const FIRST_ONE = 3
3.其他變量采用小駝峰命名法
4.類(lèi)型名字簡(jiǎn)寫(xiě)
JS 是一門(mén)弱類(lèi)型語(yǔ)言，寫(xiě)起來(lái)特別方便。但是下面這種情況我想你肯定遇到過(guò)
- // 情況 1, 名為 true 的字符串
- let a = true
- let b = 'true'
- // 情況 2, 全部是數(shù)字的字符串
- let c = '123'
- let d = 123
c 和 d 這種還好說(shuō)，因?yàn)?js 存在隱式轉(zhuǎn)換。你去比較還是相等的，但是 a 和 b 是不相等的。我在跟后端聯(lián)調(diào)的時(shí)候就碰到過(guò)這種情況，他跟我說(shuō)返回的是 boolean 類(lèi)型的值結(jié)果返回了個(gè)字符串。我就直接把他作為判斷條件了
- let a = 'false' // 假設(shè)這是后端給我返回的 boolean 值
- if (a) {
- // XXXXX 一些列操作
- }
結(jié)果可想而知，值明明是 false 確一直執(zhí)行。當(dāng)時(shí)我都快懷疑人生了，所以看到這篇文章你是幸運(yùn)的。這里有一個(gè)細(xì)節(jié)：谷歌控制臺(tái)在打印值的時(shí)候是有顏色變化的，字符串是純黑色，其他類(lèi)型的值是深藍(lán)色
這部分說(shuō)了這么多足以可見(jiàn)類(lèi)型的重要性，那么有哪些好的命名方式呢?
| 類(lèi)型 | 簡(jiǎn)寫(xiě) | 舉例 | 說(shuō)明 |
|---|---|---|---|
| array | a | aApple | 一組蘋(píng)果 |
| number | n | nApple | 蘋(píng)果的數(shù)量 |
| string | s | sApple | 額，反正是個(gè)字符串 |
| object | o | oApple | 一個(gè)蘋(píng)果對(duì)象 |
| function | fn | fnApple | 關(guān)于蘋(píng)果的函數(shù) |
| boolean | b | bApple | 有沒(méi)有蘋(píng)果 |
當(dāng)然了這部分仁者見(jiàn)仁智者見(jiàn)智，如果你有更好的命名方式歡迎評(píng)論交流
5.函數(shù)專(zhuān)有的那些動(dòng)詞
| 動(dòng)詞 | 含義 | 類(lèi)型值 |
|---|---|---|
| has | 有沒(méi)有某個(gè)東西 | boolean |
| is | 是不是 | boolean |
| get | 獲取某個(gè)東東 | 非布爾值 |
| set | 設(shè)置某個(gè)東東 | 無(wú)返回值 |
這一部分帶擴(kuò)充，歡迎萬(wàn)能的同學(xué)們?cè)u(píng)論擴(kuò)充
6.合理的注釋
只要你寫(xiě)注釋了，后面維護(hù)代碼的人第一眼肯定是先看注釋。要是你說(shuō)你第一反應(yīng)是看源碼好吧，我也拿你沒(méi)轍。。。
場(chǎng)景一：函數(shù)注釋
| 關(guān)鍵詞 | 含義 |
|---|---|
| @param{TYPE} | 傳入的參數(shù)，應(yīng)該說(shuō)明支持什么類(lèi)型 |
| @return{TYPE} | 返回的類(lèi)型，應(yīng)該說(shuō)明支持什么類(lèi)型。無(wú)返回值是 void |
| @author | 作者信息 |
| @date | 創(chuàng)作時(shí)間 |
| @example | 舉個(gè)例子 |
- /**
- * @param date { Date | timestamp } 需要格式化的時(shí)間
- * @param format { string } 支持的關(guān)鍵字 yyyy MM dd hh mm ss
- * @return { string }
- * @author MrXu
- * @date 2019年10月13日
- * @example
- * 1570929141012 -> 2019年10月15
- * dateFormat(1570929141012, 'yyyy年MM月dd')
- */
- function dateFormat (date, format) {
- // XXXXXXX
- }
上面這種寫(xiě)一串也是蠻累的，所以弄個(gè)代碼片段快速生成就很有必要了(有興趣的同學(xué)可以看我之前的文章 《如何讓 vscode 變成你的開(kāi)發(fā)神器?》)
CSS 代碼中的潛規(guī)則
1.不能出現(xiàn)大寫(xiě)
前面已經(jīng)說(shuō)過(guò)了 html 標(biāo)簽是不能區(qū)分大小寫(xiě)的，雖然屬性值支持大寫(xiě)。但是并不建議用大寫(xiě)。
減號(hào)命名方式有一個(gè)問(wèn)題就是無(wú)法雙擊選中，不過(guò)我恰巧從別人的文章評(píng)論中找到了一個(gè)方法能夠設(shè)置雙擊選中減號(hào)命名方式的問(wèn)題：
- // vscode 或者 sublime 設(shè)置加上這個(gè)正則匹配就可以選中
- wordSeparators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
2.樣式也是能夠分類(lèi)的
| 顯示屬性 | 自身屬性 | 文本屬性和其他修飾 |
|---|---|---|
| display | width | font |
| visibility | height | text-align |
| position | margin | text-decoration |
| float | padding | vertical-align |
| clear | border | white-space |
| list-style | overflow | color |
| top | min-width | background |
建議先寫(xiě)顯示屬性 -> 自身屬性(盒模型屬性) -> 文本屬性和其他修飾
3. BEM布局
- block：模塊，名字單詞間用 - 連接
- element：元素，模塊的子元素，以 __ 與 block 連接
- modifier：修飾，模塊的變體，定義特殊模塊，以 -- 與 block 連接
- // 舉個(gè)例子
- .person {}
- .person__header {}
- .person__main {}
- .person__footer {}
- .person--cap {}
- .person--clothing {}
- .person--shoe {}
- // 現(xiàn)在 css 預(yù)編譯器也很火，所以貼個(gè) css 預(yù)編譯器的。編譯出來(lái)效果跟上面一樣
- .person {
- &__header {}
- &__main {}
- &__footer {}
- &--cap {}
- &--clothing {}
- &--shoe {}
- }
個(gè)人感覺(jué) css 命名是這里面最復(fù)雜的。因?yàn)闃邮酱a特別多，而且有一條潛規(guī)則是 html、css、js 代碼分離。但是 html 和 css 代碼分離還真的挺困難的，我在剛開(kāi)始寫(xiě)代碼的時(shí)候 html 和 css 代碼是分離的。后來(lái) UI 讓調(diào)節(jié)樣式，就只是簡(jiǎn)單的一些字體、間距我要定位到對(duì)應(yīng)的位置就特別麻煩，就會(huì)忍不住直接在行內(nèi)寫(xiě)入樣式去進(jìn)行樣式重置。因?yàn)橹挥幸粋z個(gè)屬性，所以一個(gè)合格的名字是特別重要的。
遺憾的是因?yàn)槠蜻@篇文章就不詳細(xì)講解 BEM 了，因?yàn)檫@是一個(gè)大話題，但是我需要讓你保證你要知道這個(gè)東西。不過(guò)我找了倆篇質(zhì)量很高的文章，感興趣的可以看這倆篇文章：
[譯] 這些 CSS 命名規(guī)范將省下你大把調(diào)試時(shí)間
CSS 命名規(guī)范總結(jié)
總結(jié)
html，js，css 常見(jiàn)的應(yīng)該都已經(jīng)覆蓋到了。有一些很細(xì)致的就不展開(kāi)討論了，比如 js 中的隱藏變量，css 盡量使用簡(jiǎn)寫(xiě)屬性等等。
文章名稱(chēng)：前端開(kāi)發(fā)效率提高之代碼規(guī)范篇
標(biāo)題鏈接：http://m.5511xx.com/article/djicsps.html
