技術標籤：自學前端

前言

我認為程式碼不只是為了實現某個需求，更是給別的人看的。團隊制定一個好的編碼規範，能讓大家更清晰的去理解程式碼。只有高質量的程式碼，才能有優化的可行性。更利於專案的版本迭代和拓展。前段時間為公司制定了編碼規範，在這裡分享一下

如果感覺文章對你有幫助的話，留個贊再走吧~
js（vue）寫法推薦

變數和普通使用camelCase小駝峰式命名(tableData,isVisible)，建構函式使用大駝峰式命名

vue檔案命名

對於展示類的、無邏輯的或無狀態的基礎元件可以單獨放在一個資料夾中管理，和父元件緊密耦合的子元件應該以父元件名作為字首命名。編輯器通常會按字母順序組織檔案，而自動補全讓長命名的代價非常之低，儘量使元件命名完整。
 

components/
base
BaseButton.vue
BaseTable.vue
BaseIcon.vue
todoList
TodoList.vue
TodoListItem.vue
TodoListItemButton.vue
searchSidebar
SearchSidebar.vue
SearchSidebarNavigation.vue

函數語言程式設計，通過語義就知道程式碼大概要幹些什麼。

// 獲取年齡大於20學生的姓名
const students = [{
age: 21,
sex: 2,
name: ‘李小花’
},
{
age: 18,
sex: 1,
name: ‘李二蛋’

最小函式準則，即一個函式只做一件事情。複用性強，拓展性高。

面向物件的思想。例如在對一張表的增刪改查，而那個表就是一個物件。以及合理的運用解構賦值，閱讀性強且效率更高(不推薦：row.name，row.price…)
 

let book = {
isAdd: false,
isModalShow: false,
name: “”,
count: 0,
price: 0,
}
function editBookModalShow(row) {
const { name, counts: count, salePrice: price} = row
book = {
isAdd: false,
isModalShow: true,
name,
count,
price,
}
}
editBookModalShow({
name: ‘紅樓夢’,
counts: 42,
salePrice: 60
})

var，let和const的選擇

var因為變數提升，重複定義等問題不推薦使用。而任何語言定義常量的開銷總是比變數小的。所以，在不需要更改值的情況下只推薦使用const

props是子父元件傳遞資料的通道。資料的準確性可以說是尤為重要

// 推薦
props: {
type: {
type: String,
default: “primary”,
validator: value => [“primary”, “success”,“danger”].includes(value) // 甚至可以這樣去限制引數值
},
size: {
type: String,
default: “large”
}
},
// 不推薦
props: [“size”,“type”]

如何設計一個元件這篇文章講的非常好

元件通訊及狀態管理
    該怎麼通訊就怎麼通訊，千萬不要去濫用vuex，甚至可以不用
    遵守單向資料流，不要使用parent，children

    子父元件：props emit 兄弟元件：eventBus 祖孫元件：provide / inject，attrs/$listeners
    多元件共享狀態：vuex
    本地持久化：localStorage sessionStorage

v-for的key值

使用item的 id 來作為key值，而不是index。在陣列插入中間值時會出現bug

永遠不要把 v-if 和 v-for 同時用在同一個元素上

因為v-for 比 v-if 具有更高的優先順序

<ul>
  <li>
    {{ user.name }}
  </li>
</ul>
// 將會經過如下運算：
this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})
// 這樣會造成不必要的遍歷 我們可以將users通過計算屬性filter出avtiveUsers，再提供給v-for渲染

儘量不要使用watch

watch對效能的開銷大，大部分情況computed是你更好的選擇

websocket，webwoker，定時器等在不使用的時候記得關閉

除非迫不得已不要去操作DOM元素

按需載入（利用 import() 語法進行code splitting）

在不使用懶載入，不分離業務程式碼時。webpack會把所有的程式碼打包成一個檔案。如果在進入首頁時，這個檔案過大，會極大的影響首屏載入速度。所以說，在生產環境中的code splitting是十分重要的，在對應的頁面只加載需要的程式碼。分離業務程式碼和第三方庫則需要進行webpack配置，而使用import語法在編碼時可以注意

// router.js
{
path: ‘/404’,
component: () => import("@/views/404.vue"),
}
// 註冊元件
components: {
TodoList: () => import("@/components/todoList/TodoList.vue")
TodoListItem: () => import("@/components/todoList/TodoListItem.vue"),
}

template中合理使用{{}}表示式

儘量在template只使用簡單的表示式。我們只用關心模板中{{}}需要展示的東西，而資料是如何計算出來的可以寫在computed和methods裡。在使用el-table時這樣去處理一些狀態值的欄位是不是更舒服呢

// 推薦寫法
  orderStatus: {
      0: "待發貨",
      1: "已發貨",
      2: "貨物中轉"           // 也可以將這些狀態統一放在一個檔案，方便管理
    }

  <el-table-column prop="status" label="訂單狀態">
    <template slot-scope="{row}">{{orderStatus[row.status]}}</template>
  </el-table-column>

// 糟糕的寫法
   <el-table-column prop="status" label="訂單狀態">
    <template slot-scope="{row}">
   	 {{row.status==='0'?'已發貨':row.status==='1'?'待發貨':''}}
    </template>
  </el-table-column>

使用嚴格等進行兩數比較，避免在判斷的過程中，由 JavaScript 的強制型別轉換所造成的困擾

==：運算子稱作相等，用來檢測兩個運算元是否相等，這裡的相等定義的非常寬鬆，可以允許進行型別轉換
===：用來檢測兩個運算元是否嚴格相等

儘量把函式的入參說明詳細

/**

• @param props.dateTable 模板陣列
• @param props.handleItemClick item點選事件
• @param props.self 父元件作用域
  */
  const RenderDateTemplate = (props) => {
  const { dateTable, handleItemClick, self } = props;
  return (
  
  {
  dateTable.map((item, index) => {}
  }
  
  )
  }

樣式寫法推薦

為每個.vue檔案加上scoped，避免汙染全域性

遵守BEM規範(即block-name__element-name–modifier-name)

但要注意block 巢狀的層次要儘量少（一個層次能搞完的就不要巢狀）.
各大元件庫(Element AntDesign)的BEM實踐，提供了很大的參考性

m-button__label, m-button__label–danger, m-button__label–success

在使用css前處理器，如scss。巢狀功能和父選擇器識別符號 & 解決BEM冗長問題

.m-button{
margin: 0px;
&__label{
font-size: 14px;
}
&–success{
background-color: #029627;
}
}

scss中變數 $ 使用

一些整個應用的會常用的顏色 大小 寬高 圖片路徑等，可以放在一個scss檔案中定義。可以做到更改一處，從而進行全域性更改，從而實現“換膚”的功能。

$color-primary: #3ecacb;
$color-success: #4fc48d;
$color-main: #f3d93f;

scss中巧用@mixin和@extend可複用一大段規則

@extend繼承屬性

.common-mod {
  height: 250px;  
  width: 50%;  
  background-color: #fff;  
  text-align: center;
}
&-mod { 
  @extend .common-mod;  
  float: right;
}
&-mod2 { 
  @extend .common-mod;
}

@mixin——可傳遞引數的繼承

@mixin paneactive($image, $level, $vertical) { 
  background: url($image) no-repeat $level $vertical;  
  height: 100px;  
  width: 30px; 
  position: relative;  
  top: 50%;
}
&--left-active {  
  @include paneactive($btn-flip, 0, 0);
}
&--right-active { 
  @include paneactive($btn-flip, 0, -105px);
}

轉載連結 http://percywang.top/#/article/80