前端基礎(chǔ)開發(fā)文檔

1. 駝峰式命名法

-Pascal Case ?駝峰式命名法:?字??寫。eg:StudentInfo、UserInfo、ProductInfo -Camel Case?

?駝峰式命名法:?字??寫。eg:studentInfo、userInfo、productInfo

2. ?件命名規(guī)范

?件名不能含有空格 ?件名建議只使??寫字?,不使??寫字?。(但?如說像github的說明類?件, README,則應(yīng)該全部使??寫)

1. 駝峰式命名法

2. ?件命名規(guī)范

3. ?件名包含多個單詞時,單詞之間建議使?半?的連詞線 ( - ) 分隔。

3. vue的開發(fā)規(guī)范

3.1 vue的?命鉤?函數(shù)

3.2 vue?件基本結(jié)構(gòu)

3.4 v-for

在執(zhí)? v-for 遍歷的時候,總是應(yīng)該帶上 key 值使更新 DOM 時渲染效率更?

3.5 v-if / v-else-if / v-else

3.5 method ?法命名命名規(guī)范

駝峰式命名,統(tǒng)?使?動詞或者動詞+名詞形式

請求數(shù)據(jù)?法,以 data 結(jié)尾

3.6 views/components 下的?件命名

只有?個?件的情況下不會出現(xiàn)?件夾,?是直接放在 views/components ?錄下?,如 index.vue

盡量是名詞,且使?駝峰命名法

開頭的單詞就是所屬模塊名字(workbenchIndex、workbenchList、workbenchEdit)

名字?少兩個單詞(good: workbenchIndex)(bad:workbench)?

3.7 元素特性的順序

原?屬性放前?,指令放后?

3.8 ?錄?件夾及??件規(guī)范

可以根據(jù)??的習(xí)慣來使?components和views?件夾

3.9 注釋規(guī)范

代碼注釋在?個項(xiàng)?的后期維護(hù)中顯的尤為重要,所以我們要為每?個被復(fù)?的組件編寫組件使?說明,

為組件中每?個?法編寫?法說明

3.9.1 務(wù)必添加注釋列表

公共組件使?說明

各組件中重要函數(shù)或者類說明

復(fù)雜的業(yè)務(wù)邏輯處理說明

特殊情況的代碼處理說明,對于代碼中特殊?途的變量、存在臨界值、函數(shù)中使?的 hack、使?了某種算

法或思路等需要進(jìn)?注釋描述

多重 if 判斷語句

注釋塊必須以/**(?少兩個星號)開頭**/

單?注釋使?//

3.9.2 單?注釋

3.9.3 多?注釋

4. 語法

4.1 變量申明

4.1.1 盡量使? const

應(yīng)當(dāng)使??const?來定義所有引?變量;避免使??var 。 這能夠確保你的引?值不會被重新賦值,減少項(xiàng)?中的 bug,并提?代碼的可讀性。

4.1.2 不要使? var

如果必須要使??個可以被重新賦值的引?,必須??let?來代替?var 。

原因是,let 創(chuàng)建塊級作?域的變量,? var 創(chuàng)建的函數(shù)級作?域變量會造成變量提升。

4.1.3 最?作?域

變量應(yīng)當(dāng)在最接近它們被使?的地?被定義,?不是定義在塊級作?域的開頭。這樣能確 保它們影響最?的作?域范圍。

需要注意的是,let 和 const 都是塊級作?域的

4.2 對象

4.2.1 使?字?量創(chuàng)建新對象

創(chuàng)建對象時,應(yīng)當(dāng)使?字?量創(chuàng)建對象。

由于?者在性能上沒有區(qū)別,?使?字?量能減少代碼?件的??,且讓團(tuán)隊(duì)?格統(tǒng)?。因 此字?量創(chuàng)建對象是?個更好的?法。


4.2.2 動態(tài)屬性名

對象的動態(tài)屬性名應(yīng)當(dāng)使?計(jì)算屬性名的?式定義

這能夠讓對象的所有屬性在同?個地?被定義,減少維護(hù)?作量


4.2.3 使?對象?法簡寫

這是 ES6 提供的語法糖,這個語法可以更簡潔地定義復(fù)雜對象字?量。


4.2.4 僅在必要時給屬性名加上引號

不應(yīng)當(dāng)給常規(guī)的對象屬性名加引號。

在性能上,?多數(shù) JS 引擎對?引號的屬性名讀取有更?的性能。?且代碼編輯器會對此有 語法?亮。?

4.3 類

4.3.1 class 關(guān)鍵詞

應(yīng)該使? Class 來創(chuàng)建?個類,?不是使?原型?式。

4.3.2 extend 關(guān)鍵詞

應(yīng)該?使? extends 來繼承?個類,?不是使?原型鏈或者 apply ?法

使?語法糖,提?代碼可讀性

4.4 函數(shù)

4.4.1 函數(shù)聲明

不應(yīng)當(dāng)使?函數(shù)聲明?式來創(chuàng)建函數(shù)。直接聲明函數(shù)會使函數(shù)聲明提前,導(dǎo)致它在函數(shù)定義之 前就可以被引?。這會影響可讀性和可維護(hù)性。

如果?個函數(shù)?法太?,或者太復(fù)雜,使得它影響了?件其余部分代碼的理解,應(yīng)當(dāng)將其獨(dú)? 出來作為?個模塊

4.4.2 不在?函數(shù)塊中定義函數(shù)

不允許在?函數(shù)塊作?域中(例如?if,?while?等)定義?個函數(shù)。應(yīng)當(dāng)先把函數(shù)分配給?個變量。

4.4.3 箭頭函數(shù)

當(dāng)必須使??個函數(shù)表達(dá)式時,例如作為回調(diào)函數(shù)傳遞給?法,應(yīng)當(dāng)使?箭頭函數(shù)。 箭頭的兩側(cè)必須有?個空格。

箭頭函數(shù)能避免 this 上下?的困擾,并且很簡潔。 如果有必須使?獨(dú)? this 上下?的情況,應(yīng)當(dāng)??定義函數(shù)后再進(jìn)?傳遞?

4.5 模塊

4.5.1 import/export

應(yīng)當(dāng)使??import/export?來導(dǎo)?模塊。 禁?導(dǎo)出?個導(dǎo)?語句。


4.5.2 通配符

禁?使?通配符導(dǎo)?模塊。 因?yàn)檫@要求對應(yīng)模塊必須有?個默認(rèn)導(dǎo)出項(xiàng)。

4.5.3 多次導(dǎo)?

禁?從?個?件中多次導(dǎo)?屬性。

4.5.3 默認(rèn)導(dǎo)出

當(dāng)只有?個導(dǎo)出項(xiàng)時,應(yīng)當(dāng)使?默認(rèn)導(dǎo)出。

4.6 ?較

4.6.1 ===/==

必須使??===?和?!==?來進(jìn)??較。如?必要,不應(yīng)當(dāng)使??==?和?!= 。

4.6.2 三元表達(dá)式

如?必要,禁?嵌套三元表達(dá)式。如?必要不應(yīng)當(dāng)折?。

實(shí)際在編寫代碼的時候?yàn)槭菇Y(jié)構(gòu)清晰是不建議使?這種三元表達(dá)式嵌套的,并且代碼的執(zhí)? 效率也會降低,因此還是使?常規(guī)的分?結(jié)構(gòu)


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,828評論 0 3
  • Android編碼規(guī)范 源文件基礎(chǔ) 文件名 源文件以其最頂層的類名來命名,大小寫敏感,文件擴(kuò)展名為.java。 文...
    呼呼哥閱讀 1,115評論 0 0
  • 洞中玉像倒不見得真的另有其人。無崖子也不見得移情別戀。 這樣才比較有現(xiàn)實(shí)意義。 你被某個人吸引、以為是愛情。 于是...
    寶寶打怪獸閱讀 173評論 0 0
  • 由于教材改版,開學(xué)初就對新課文《夢回繁華》的作者毛寧很感興趣。不僅是我,大家都在討論,這個毛寧是哪個毛寧呢?由于課...
    焦點(diǎn)周青閱讀 983評論 0 1
  • 如果不主動,以后一切的一切都只與別人有關(guān)如果主動,某個人的一切很多事情也許就是跟自己有關(guān)了!勇敢的踏出第一步,真的...
    yoliChan閱讀 246評論 0 0

友情鏈接更多精彩內(nèi)容