分析一套源代碼的代碼規範和風格並討論如何改進優化代碼

個人工程實踐課題是《物聯網網關智能分析引擎》，我所作的是前端開發。基於此，我對Vue.js目錄結構進行分析。Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。

1.Vue.js目錄結構

結構圖以下所示：

• build：項目構建(webpack)相關代碼。
• config：配置目錄，包括端口號等。咱們初學可使用默認的。
• node_modules：npm 加載的項目依賴模塊。
• src：這裏是咱們要開發的目錄，基本上要作的事情都在這個目錄裏。裏面包含了幾個目錄及文件：assets: 放置一些圖片，如logo等。components: 目錄裏面放了一個組件文件，能夠不用。App.vue: 項目入口文件，咱們也能夠直接將組件寫這裏，而不使用 components 目錄。main.js: 項目的核心文件。
• static：靜態資源目錄，如圖片、字體等。
• test：初始測試目錄，可刪除。
• .xxxx文件：這些是一些配置文件，包括語法配置，git配置等。
• index.html：首頁入口文件，你能夠添加一些 meta 信息或統計代碼啥的。
• package.json：項目配置文件。
• README.md：項目的說明文檔，markdown 格式。

2.Vue.js的經常使用指令

Vue.js的指令是以v-開頭的，它們做用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會爲綁定的目標元素添加一些特殊的行爲，咱們能夠將指令看做特殊的HTML特性（attribute）。

Vue.js提供了一些經常使用的內置指令，接下來咱們將介紹如下幾個內置指令：

• v-if指令:條件渲染指令，它根據表達式的真假來刪除和插入元素，它的基本語法爲：v-if="expression",expression是一個返回bool值的表達式，表達式能夠是一個bool屬性，也能夠是一個返回bool的運算式。
• v-show指令：v-show也是條件渲染指令，和v-if指令不一樣的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地爲元素設置CSS的style屬性。
• v-else指令：能夠用v-else指令爲v-if或v-show添加一個「else塊」。v-else元素必須當即跟在v-if或v-show元素的後面——不然它不能被識別。
• v-for指令：v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法類似：v-for="item in items"，其中items是一個數組，item是當前被遍歷的數組元素。
• v-bind指令：v-bind指令能夠在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數一般是HTML元素的特性（attribute）。

3.代碼規範和風格的通常要求以及有悖於「代碼的簡潔、清晰、無歧義」的基本原則的作法及優化改進

3.1 組件名應該始終爲多個單詞，根組件App除外。這樣作能夠避免跟現有的以及將來的HTML元素相沖突。

正例：

export default{

 name: 'TodoItem',

 // ...

}

反例：

export default {

  name: 'Todo' ,

  // ...

}

 

 

3.2 組件中的data必須是一個函數，防止在組件複用的時候數據變更產生關聯。當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。

正例：

// In a .vue file

export default {

  data () {

  return {

  foo: 'bar'

  }

  }

}

// 在一個 Vue 的根實例上直接使用對象是能夠的，  由於只存在一個這樣的實例。

new Vue({

  data: {

  foo: 'bar'

  }

})

反例：

export default {

  data: {

  foo: 'bar'

  }

}

 

3.3 prop的定義儘可能詳細，至少須要指定其類型。

正例：

props: {

  status: String

}

props: {

  status: {

  type: String,

  required: true ,

  validator: function (value) {

  return [

  'syncing' ,

  'synced' ,

  'version-conflict' ,

  'error'

  ].indexOf(value) !== -1

  }

  }

}

反例：

props: [ 'status' ]

 3.4 爲v-for設置鍵值。老是用 key 配合 v-for，在組件上_老是_必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態。甚至在元素上維護可預測的行爲，好比動畫中的對象固化 (object constancy)，也是一種好的作法。

正例：

<ul>

  <li

  v- for = "todo in todos"

  :key= "todo.id"

  >

  {{ todo.text }}

  </li>

</ul>

反例：

<ul>

  <li v- for = "todo in todos" >

  {{ todo.text }}

  </li>

</ul>

3.5  避免 v-if 和 v-for 用在一塊兒。永遠不要把 v-if 和 v-for 同時用在同一個元素上。

正例：

<ul v- if = "shouldShowUsers" >

  <li

  v- for = "user in users"

  :key= "user.id"

  >

  {{ user.name }}

  </li>

</ul>

反例：

<ul>

  <li

  v- for = "user in users"

  v- if = "shouldShowUsers"

  :key= "user.id"

  >

  {{ user.name }}

  </li>

</ul>

3.6  爲組件樣式設置做用域。對於應用來講，頂級 App 組件和佈局組件中的樣式能夠是全局的，可是其它全部組件都應該是有做用域的。

正例：

<template>

  <button class= "c-Button c-Button--close" >X</button>

</template>

<!-- 使用 BEM 約定 -->

<style>

.c-Button {

  border: none;

  border-radius: 2px;

}

.c-Button--close {

  background-color: red;

}

</style>

反例：

<template>

  <button class= "btn btn-close" >X</button>

</template>

 

<style>

.btn-close {

  background-color: red;

}

</style>

<template>

  <button class= "button button-close" >X</button>

</template>

<!-- 使用 `scoped` 特性 -->

<style scoped>

.button {

  border: none;

  border-radius: 2px;

}

.button-close {

  background-color: red;

}

</style>

4.同類編程語言或項目在代碼規範和風格的通常要求

• 文件、資源命名

  • 以可讀性而言，中劃線用來分隔文件名。
  • 確保文件命名老是以字母開頭而不是數字。
  • 特殊含義的文件，須要對文件增長先後綴或特定的擴展名（好比 .min.js, .min.css），抑或一串前綴（好比 all.main.min.css）。使用點分隔符來區分這些在文件名中帶有清晰意義的元數據。

• 文本縮進:一次縮進4個空格。

• 代碼檢查

  • 對於前端JavaScript這種比較寬鬆自由的編程語言來講，嚴格遵循編碼規範和格式化風格指南極爲重要。前端開發人員需嚴格遵循開發規範，而且使用自動代碼檢查工具（如JSHint）下降語法錯誤，確保代碼正確執行。JSHint是一款檢查JS代碼規範與否的工具，用來檢查JS代碼的規範性。它提供了配置的方法，來檢查不符合開發規範的錯誤。

• 黃金定律

  • 永遠遵循同一套編碼規範 -- 能夠是這裏列出的，也能夠是你本身總結的。若是你發現本規範中有任何錯誤，敬請指正。
  • 無論有多少人共同參與同一項目，必定要確保每一行代碼都像是同一我的編寫的。