前端代码规范指导原则.md

前端代码规范指导原则

代码规范的细则很多，不能逐一介绍，总结一些关键的指导原则，以帮助更好的落实代码规范：

1. 关键的指导能有效降低学习成本，帮助成员快速了解我们的规范；
2. 当细则没有说明的地方，就按照指导原则处理，避免个人偏好的分歧，甚至扯皮对立。

相似的代码，格式也要相似

阅读格式越混乱的代码，理解代码的时间越久，代码越不容易使用。

美观一致的排版，能缩短理解代码的时间，有效降低认知负担，提高协作效率。

<!-- bad -->
<view style="color: #777777" class="station-value" @click="onClickItemData(item)">
  {{ formatValue(item.drp24, '0') }}
</view>
<view @click="onClickItemData(item)" class="station-value" style="color: #ff8b38">
  {{ formatValue(item.fore24, '0') }}
</view>

<!-- better -->
<view @click="onClickItemData(item)" class="station-value" style="color: #777777">
  {{ formatValue(item.drp24, '0') }}
</view>
<view @click="onClickItemData(item)" class="station-value" style="color: #ff8b38">
  {{ formatValue(item.fore24, '0') }}
</view>

bad ❌️

<!-- better ✅ -->
<template>
  <view>
    <n-table
      v-show="current != 0"
      ref="projectTable"
      @singleToggleOpen="singleToggleOpen"
      @onToggleTree="openAction"
      @onSort="doSort"
      @onClick="rowClick"
      :nameOpt="{ isShow: false }"
      :tableOpt="{ fontSize: 13, color: '#666', textAlign: 'center' }"
      :tableData="tableDataMulHeader"
      :columns="columnsMulHeader"
      colKey="dataIndex"
      idKey="adcd"></n-table>
  </view>
</template>

// bad ❌️
class PerformanceTester {
  wifi = new TCPConnectionSimulator(
    500 /*kbps*/,
    80 /*millisecs latency*/,
    200 /*jitter*/,
    1 /*packet loss  %*/
  )
  t3_fiber = new // new line
  TCPConnectionSimulator(
    45000 /*kbps*/,
    10 /*millisecs latency*/,
    0 /*jitter*/,
    0 /*packet loss  %*/
  )
  cell =
    // hello
    new TCPConnectionSimulator(
      100 /*kbps*/,
      400 /*millisecs latency*/,
      250 /*jitter*/,
      5 /*packet loss  %*/
    )
}
// better ✅
class PerformanceTester {
  // new TCPConnectionSimulator(throughput,latency,jitter,packet_loss)
  //                               [kbps]   [ms]   [ms]   [percent]
  wifi = new TCPConnectionSimulator(500, 80, 200, 1)
  t3_fiber = new TCPConnectionSimulator(45000, 10, 0, 0)
  cell = new TCPConnectionSimulator(100, 400, 250, 5)
}

bad ❌️

better ✅

让代码排序有意义

如果代码的顺序不影响功能，不要随机的排序，而是选一个有意义的顺序，让认知负担更小。