日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端開發(fā)效率提高之代碼規(guī)范篇

 代碼并不是寫完了就寫完了，因為代碼是寫給未來的自己和他人看的。那如何保證別人懂你代碼的意思呢?要是有一套合適的規(guī)范以后維護代碼效率豈不是很高呢！

“專業(yè)、務(wù)實、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站制作、做網(wǎng)站、軟件開發(fā)、設(shè)計服務(wù)業(yè)務(wù)。我們始終堅持以客戶需求為導(dǎo)向，結(jié)合用戶體驗與視覺傳達，提供有針對性的項目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！

常見的命名規(guī)則

1.大駝峰命名法,首字母都大寫 

 
 
 
    
  
  
  
  1. FirstOne 
    2.

2.小駝峰命名法，第一個單詞首字母小寫，其他跟大駝峰一樣 

 
 
 
    
  
  
  
  1. firstOne 
    2.

3.蛇形命名法，單詞之間用下劃線拼接 

 
 
 
    
  
  
  
  1. first_one 
    2.

4.減號命名法,單詞之間用減號分割 

 
 
 
    
  
  
  
  1. first-one 
    2.

這些命名法最大的好處就是可以輕易區(qū)分單詞跟單詞

代碼規(guī)范中的那些潛規(guī)則

html 代碼中的潛規(guī)則

1.html 是不區(qū)分大小寫的

瀏覽器解析標(biāo)簽是不區(qū)分大小寫的。 

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2. // 編譯出來是這樣的 
    3. 
  
  
  
  3.  
    4.

雖然里面的 class ，id 或者其他的自定義屬性支持大寫。但是基本上沒有用大寫的，因此建議 html 中的代碼統(tǒng)一采用蛇行命名法和減號姓名法(好像是因為早期的 xhtml 不支持大寫)

2.語義化標(biāo)簽

說實在的語義很好掌握，但是了解這些語義標(biāo)簽的默認(rèn)屬性并且重置是很不容易的。(要想知道如何重置屬性歡迎觀看我的文章 《開發(fā)效率創(chuàng)新高，只因收下了這波 CSS 操作》)

個人感覺語義化標(biāo)簽主要有倆個優(yōu)勢

  1. 支持 seo 搜索
  2. 閱讀起來很舒服，不會被別人噴 div 仔。

語義化標(biāo)簽就那么多，掌握了就是掌握了。實打?qū)嵉暮锰?，建議大家還是要掌握一下的。

JS 代碼中的潛規(guī)則

JS 是區(qū)分大小寫的所以常見的命名法都是大小駝峰命名法。但是花樣要多得多：

1.構(gòu)造函數(shù)采用大駝峰命名法(或者 es6 的 class 類) 

 
 
 
    
  
  
  
  1. // 構(gòu)造函數(shù)簡單說就是需要 new 出來的 
    2. 
  
  
  
  2. function FistOne() {} 
    3. 
  
  
  
  3. new FirstOne() 
    4. 
  
  
  
  4. // class 就是符合下面這種語法糖的 
    5. 
  
  
  
  5. class FirstOne () {} 
    6.

2.常量采用全大寫的蛇形命名法

常量就是不能更改的變量，為了醒目所以都遵循著全大寫的蛇形命名法則 

 
 
 
    
  
  
  
  1. const FIRST_ONE = 3 
    2.

3.其他變量采用小駝峰命名法

4.類型名字簡寫

JS 是一門弱類型語言，寫起來特別方便。但是下面這種情況我想你肯定遇到過 

 
 
 
    
  
  
  
  1. // 情況 1, 名為 true 的字符串 
    2. 
  
  
  
  2. let a = true 
    3. 
  
  
  
  3. let b = 'true' 
    4. 
  
  
  
  4. // 情況 2, 全部是數(shù)字的字符串 
    5. 
  
  
  
  5. let c = '123' 
    6. 
  
  
  
  6. let d = 123 
    7.

c 和 d 這種還好說，因為 js 存在隱式轉(zhuǎn)換。你去比較還是相等的，但是 a 和 b 是不相等的。我在跟后端聯(lián)調(diào)的時候就碰到過這種情況，他跟我說返回的是 boolean 類型的值結(jié)果返回了個字符串。我就直接把他作為判斷條件了 

 
 
 
    
  
  
  
  1. let a = 'false' // 假設(shè)這是后端給我返回的 boolean 值 
    2. 
  
  
  
  2. if (a) { 
    3. 
  
  
  
  3.     // XXXXX 一些列操作 
    4. 
  
  
  
  4. } 
    5.

結(jié)果可想而知，值明明是 false 確一直執(zhí)行。當(dāng)時我都快懷疑人生了，所以看到這篇文章你是幸運的。這里有一個細(xì)節(jié)：谷歌控制臺在打印值的時候是有顏色變化的，字符串是純黑色，其他類型的值是深藍(lán)色

這部分說了這么多足以可見類型的重要性，那么有哪些好的命名方式呢?

類型 簡寫 舉例 說明
arrayaaApple一組蘋果
numbernnApple蘋果的數(shù)量
stringssApple額，反正是個字符串
objectooApple一個蘋果對象
functionfnfnApple關(guān)于蘋果的函數(shù)
booleanbbApple有沒有蘋果
 

當(dāng)然了這部分仁者見仁智者見智，如果你有更好的命名方式歡迎評論交流

5.函數(shù)專有的那些動詞

動詞 含義 類型值
has有沒有某個東西boolean
is是不是boolean
get獲取某個東東非布爾值
set設(shè)置某個東東無返回值
 

這一部分帶擴充，歡迎萬能的同學(xué)們評論擴充

6.合理的注釋

只要你寫注釋了，后面維護代碼的人第一眼肯定是先看注釋。要是你說你第一反應(yīng)是看源碼好吧，我也拿你沒轍。。。

場景一：函數(shù)注釋

關(guān)鍵詞 含義
@param{TYPE}傳入的參數(shù)，應(yīng)該說明支持什么類型
@return{TYPE}返回的類型，應(yīng)該說明支持什么類型。無返回值是 void
@author作者信息
@date創(chuàng)作時間
@example舉個例子
 
 
 
 
    
  
  
  
  1. /** 
    2. 
  
  
  
  2.  * @param date { Date | timestamp } 需要格式化的時間 
    3. 
  
  
  
  3.  * @param format { string } 支持的關(guān)鍵字 yyyy MM dd hh mm ss 
    4. 
  
  
  
  4.  * @return { string } 
    5. 
  
  
  
  5.  * @author MrXu 
    6. 
  
  
  
  6.  * @date 2019年10月13日 
    7. 
  
  
  
  7.  * @example 
    8. 
  
  
  
  8.  * 1570929141012 -> 2019年10月15 
    9. 
  
  
  
  9.  * dateFormat(1570929141012, 'yyyy年MM月dd') 
    10. 
  
  
  
  10.  */ 
    11. 
  
  
  
  11. function dateFormat (date, format) { 
    12. 
  
  
  
  12.     // XXXXXXX 
    13. 
  
  
  
  13. } 
    14.

上面這種寫一串也是蠻累的，所以弄個代碼片段快速生成就很有必要了(有興趣的同學(xué)可以看我之前的文章 《如何讓 vscode 變成你的開發(fā)神器?》)

CSS 代碼中的潛規(guī)則

1.不能出現(xiàn)大寫

前面已經(jīng)說過了 html 標(biāo)簽是不能區(qū)分大小寫的，雖然屬性值支持大寫。但是并不建議用大寫。

減號命名方式有一個問題就是無法雙擊選中，不過我恰巧從別人的文章評論中找到了一個方法能夠設(shè)置雙擊選中減號命名方式的問題： 

 
 
 
    
  
  
  
  1. // vscode 或者 sublime 設(shè)置加上這個正則匹配就可以選中 
    2. 
  
  
  
  2. wordSeparators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", 
    3.

2.樣式也是能夠分類的

顯示屬性 自身屬性 文本屬性和其他修飾
displaywidthfont
visibilityheighttext-align
positionmargintext-decoration
floatpaddingvertical-align
clearborderwhite-space
list-styleoverflowcolor
topmin-widthbackground
 

建議先寫顯示屬性 -> 自身屬性(盒模型屬性) -> 文本屬性和其他修飾

3. BEM布局

  • block：模塊，名字單詞間用 - 連接
  • element：元素，模塊的子元素，以 __ 與 block 連接
  • modifier：修飾，模塊的變體，定義特殊模塊，以 -- 與 block 連接 
 
 
 
    
  
  
  
  1. // 舉個例子 
    2. 
  
  
  
  2. .person {} 
    3. 
  
  
  
  3. .person__header {} 
    4. 
  
  
  
  4. .person__main {} 
    5. 
  
  
  
  5. .person__footer {} 
    6. 
  
  
  
  6. .person--cap {} 
    7. 
  
  
  
  7. .person--clothing {} 
    8. 
  
  
  
  8. .person--shoe {} 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. // 現(xiàn)在 css 預(yù)編譯器也很火，所以貼個 css 預(yù)編譯器的。編譯出來效果跟上面一樣 
    11. 
  
  
  
  11. .person { 
    12. 
  
  
  
  12.     &__header {} 
    13. 
  
  
  
  13.     &__main {} 
    14. 
  
  
  
  14.     &__footer {} 
    15. 
  
  
  
  15.     &--cap {} 
    16. 
  
  
  
  16.     &--clothing {} 
    17. 
  
  
  
  17.     &--shoe {} 
    18. 
  
  
  
  18. } 
    19.

個人感覺 css 命名是這里面最復(fù)雜的。因為樣式代碼特別多，而且有一條潛規(guī)則是 html、css、js 代碼分離。但是 html 和 css 代碼分離還真的挺困難的，我在剛開始寫代碼的時候 html 和 css 代碼是分離的。后來 UI 讓調(diào)節(jié)樣式，就只是簡單的一些字體、間距我要定位到對應(yīng)的位置就特別麻煩，就會忍不住直接在行內(nèi)寫入樣式去進行樣式重置。因為只有一倆個屬性，所以一個合格的名字是特別重要的。

遺憾的是因為篇幅原因這篇文章就不詳細(xì)講解 BEM 了，因為這是一個大話題，但是我需要讓你保證你要知道這個東西。不過我找了倆篇質(zhì)量很高的文章，感興趣的可以看這倆篇文章：

[譯] 這些 CSS 命名規(guī)范將省下你大把調(diào)試時間

CSS 命名規(guī)范總結(jié)

總結(jié)

html，js，css 常見的應(yīng)該都已經(jīng)覆蓋到了。有一些很細(xì)致的就不展開討論了，比如 js 中的隱藏變量，css 盡量使用簡寫屬性等等。


當(dāng)前名稱：前端開發(fā)效率提高之代碼規(guī)范篇
文章出自：http://www.5511xx.com/article/djicsps.html