碼上歡樂
相關內容    簡體    繁體

2021最新阿里代碼規范（前端篇）

本文轉載自   查看原文   2021-08-17 17:10   1996 

此規范根據阿里最新前端規范整理，如有雷同，純屬巧合。

目錄

前端代碼規范

規范的目的是為了編寫高質量的代碼，讓你的團隊成員每天得心情都是愉悅的，大家在一起是快 樂的。

引自《阿里規約》的開頭片段：
----現代軟件架構的復雜性需要協同開發完成，如何高效地協同呢？無規矩不成方圓，無規范難 以協同，比如，制訂交通法規表面上是要限制行車權，實際上是保障公眾的人身安全，試想如果
沒有限速，沒有紅綠燈，誰還敢上路行駛。對軟件來說，適當的規范和標准絕不是消滅代碼內容的創造性、優雅性，而是限制過度個性化，以一種普遍認可的統一方式一起做事，提升協作效率，降低溝通成本。代碼的字里行間流淌的是軟件系統的血液，質量的提升是盡可能少踩坑，杜絕踩 重復的坑，切實提升系統穩定性，碼出質量。

一．編程規約

(一) 命名規范

1.1.1 項目命名

全部采用小寫方式，以中線分隔。

正例：mall-management-system
反例：mall_management-system / mallManagementSystem

1.1.2 目錄命名

全部采用小寫方式， 以中划線分隔，有復數結構時，要采用復數命名法， 縮寫不用復數。

正例： scripts/styles/components/images/utils/layouts/demo-styles/demo-scripts/img/doc

反例： script/style/demo_scripts/demoStyles/imgs/docs

【特殊】VUE 的項目中的 components 中的組件目錄，使用 kebab-case命名。

正例： head-search/page-loading/authorized/notice-icon
反例：HeadSearch/PageLoading

【特殊】VUE 的項目中的除 components 組件目錄外的所有目錄也使用 kebab-case命名。

正例： page-one/shopping-car/user-management
反例： ShoppingCar/UserManagement

1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小寫方式， 以中划線分隔。

正例： render-dom.js/signup.css/index.html/company-logo.png
反例： renderDom.js/UserManagement.html

1.1.4 命名嚴謹性

代碼中的命名嚴禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。 說明：正確的 英文拼寫和語法可以讓閱讀者易於理解，避免歧義。注意，即使純拼音命名方式也要避免采用

正例：henan/luoyang/rmb 等國際通用的名稱，可視同英文
反例： DaZhePromotion [打折] / getPingfenByName() [評分] / int 某變量 = 3

杜絕完全不規范的縮寫，避免望文不知義：

反例： AbstractClass“縮寫”命名成 AbsClass；condition “縮寫”命名成 condi，此類隨意縮寫嚴重 降低了代碼的可閱讀性。

(二) HTML 規范 （Vue Template 同樣適用）

1.2.1 HTML 類型

推薦使用 HTML5 的文檔類型申明：

（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應用支持與優化空間都十分有限）。

 規定字符編碼
 IE 兼容模式
 規定字符編碼
 doctype 大寫

正例：

<!DOCTYPE html>
<html>
  <head> 
      <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
	  <meta charset="UTF-8" /> 
	  <title>Page title</title> 
  </head>
  <body> 
	 <img src="images/company-logo.png" alt="Company">
 </body> 
  </html>

1.2.2 縮進

縮進使用 2 個空格（一個 tab）；
嵌套的節點應該縮進。

1.2.3 分塊注釋

在每一個塊狀元素，列表元素和表格元素后，加上一對 HTML 注釋。

1.2.4 語義化標簽

HTML5 中新增很多語義化標簽，所以優先使用語義化標簽，避免一個頁面都是 div 或者 p 標 簽。

正例

<header></header> 
<footer></footer>

反例

<div> 
  <p></p>
 </div>

1.2.5 引號

使用雙引號(" ") 而不是單引號(’ ') 。

正例： <div class=”box”></div>
反例：<div class=’box’></div>

(三) CSS 規范

1.3.1 命名

 類名使用小寫字母，以中划線分隔
 id 采用駝峰式命名
 scss 中的變量、函數、混合、placeholder 采用駝峰式命名

ID 和 class 的名稱總是使用可以反應元素目的和用途的名稱，或其他通用的名稱，代替表象和 晦澀難懂的名稱。

不推薦：

.fw-800 {
    font-weight: 800;
  }
  .red {
    color: red; 
   }

推薦:

.heavy {
   font-weight: 800;
  }
.important { 
  color: red; 
  }

1.3.2 選擇器

1) css 選擇器中避免使用標簽名

從結構、表現、行為分離的原則來看，應該盡量避免 css 中出現 HTML 標簽，並且在 css 選擇 器中出現標簽名會存在潛在的問題。

2) 使用直接子選擇器

很多前端開發人員寫選擇器鏈的時候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的
區別）。有時，這可能會導致疼痛的設計問題並且有時候可能會很耗性能。然而，在任何情況下，
這是一個非常不好的做法。如果你不寫很通用的，需要匹配到 DOM 末端的選擇器， 你應該總 是考慮直接子選擇器。

不推薦:

.content .title {
   font-size: 2rem;
  }

推薦:

.content > .title {
   font-size: 2rem;
 }

1.3.3 盡量使用縮寫屬性

不推薦：

border-top-style: none; 
font-family: palatino, georgia, serif; 
font-size: 100%; line-height: 1.6; 
padding-bottom: 2em; 
padding-left: 1em;
 padding-right: 1em; 
 padding-top: 0;

推薦：

border-top: 0; 
font: 100%/1.6 palatino, georgia, serif; 
padding: 0 1em 2em;

1.3.4 每個選擇器及屬性獨占一行

不推薦：

button { 
	width: 100px; 
	height: 50px;
	color: #fff;
	background: #00a0e9;
  }

推薦：

button {
  width: 100px; height: 50px;
  color: #fff;
  background: #00a0e9; 
}

1.3.5 省略 0 后面的單位

不推薦：

 div {
	 padding-bottom: 0px; 
	 margin: 0em;
 }

推薦：

div {
    padding-bottom: 0; 
    margin: 0; 
}

1.3.6 避免使用 ID 選擇器及全局標簽選擇器防止污染全局樣式

不推薦：

#header {
 padding-bottom: 0px; 
 margin: 0em;
}

推薦：

.header { 
	padding-bottom: 0px; 
	margin: 0em; 
}

(四) LESS 規范

1.4.1 代碼組織

1) 將公共 less 文件放置在 style/less/common 文件夾

例: // color.less,common.less

2) 按以下順序組織

1、@import;
2、變量聲明;
3、樣式聲明;

@import "mixins/size.less"; 
@default-text-color: #333; 
.page {
 width: 960px; 
 margin: 0 auto; 
}

1.4.2 避免嵌套層級過多

將嵌套深度限制在 3 級。對於超過 4 級的嵌套，給予重新評估。這可以避免出現過於詳實的 CSS 選擇器。避免大量的嵌套規則。當可讀性受到影響時，將之打斷。推薦避免出現多於 20 行的嵌 套規則出現。

不推薦：

 .main {
   .title { 
      .name { 
           color: #fff;  
         } 
     }
}
 ``` **推薦：** ```css .main-title {
   .name { color: #fff; }
    }

(五) Javascript 規范

1.5.1 命名

1) 采用小寫駝峰命名 lowerCamelCase，代碼中的命名均不能以下划線， 也不能以下划線或美元符號結束

反例： name / name / name$

2) 方法名、參數名、成員變量、局部變量都統一使用 lowerCamelCase 風 格，必須遵從駝峰形式

正例： localValue / getHttpMessage() / inputUserId

其中 method 方法命名必須是 動詞 或者 動詞+名詞 形式

正例： saveShopCarData /openShopCarInfoDialog
反例： save / open / show / go

特此說明，增刪查改，詳情統一使用如下 5 個單詞，不得使用其他（目的是為了統一各個端）

add / update / delete / detail / get 
附： 函數方法常用的動詞: 
get 獲取/set 設置, 
add 增加/remove 刪除, 
create 創建/destory 銷毀, 
start 啟動/stop 停止, 
open 打開/close 關閉, 
read 讀取/write 寫入, 
load 載入/save 保存,
begin 開始/end 結束, 
backup 備份/restore 恢復,
import 導入/export 導出, 
split 分割/merge 合並,
inject 注入/extract 提取,
attach 附着/detach 脫離, 
bind 綁定/separate 分離, 
view 查看/browse 瀏覽, 
edit 編輯/modify 修改,
select 選取/mark 標記, 
copy 復制/paste 粘貼,
undo 撤銷/redo 重做, 
insert 插入/delete 移除,
add 加入/append 添加, 
clean 清理/clear 清除,
index 索引/sort 排序,
find 查找/search 搜索, 
increase 增加/decrease 減少, 
play 播放/pause 暫停, 
launch 啟動/run 運行, 
compile 編譯/execute 執行, 
debug 調試/trace 跟蹤, 
observe 觀察/listen 監聽,
build 構建/publish 發布,
input 輸入/output 輸出,
encode 編碼/decode 解碼, 
encrypt 加密/decrypt 解密, 
compress 壓縮/decompress 解壓縮, 
pack 打包/unpack 解包,
parse 解析/emit 生成,
connect 連接/disconnect 斷開,
send 發送/receive 接收, 
download 下載/upload 上傳, 
refresh 刷新/synchronize 同步,
update 更新/revert 復原, 
lock 鎖定/unlock 解鎖, 
check out 簽出/check in 簽入, 
submit 提交/commit 交付, 
push 推/pull 拉,
expand 展開/collapse 折疊, 
enter 進入/exit 退出,
abort 放棄/quit 離開, 
obsolete 廢棄/depreciate 廢舊, 
collect 收集/aggregate 聚集
3) 常量命名全部大寫，單詞間用下划線隔開，力求語義表達完整清楚， 不要嫌名字長

正例： MAX_STOCK_COUNT
反例： MAX_COUNT

1.5.2 代碼格式

1) 使用 2 個空格進行縮進

正例：

if (x < y) {
 x += 10;
  } else {
   x += 1; 
}
2) 不同邏輯、不同語義、不同業務的代碼之間插入一個空行分隔開來以 提升可讀性

說明：任何情形，沒有必要插入多個空行進行隔開。

1.5.3 字符串

統一使用單引號(‘)，不使用雙引號(“)。這在創建 HTML 字符串非常有好處：
正例:

   let str = 'foo';
   let testDiv = '<div id="test"></div>';

反例：

let str = 'foo'; 
let testDiv = "<div id='test'></div>";

1.5.4 對象聲明

1) 使用字面值創建對象

正例： let user = {};
反例： let user = new Object();

2) 使用字面量來代替對象構造器

正例： var user = { age: 0, name: 1, city: 3 };
反例：

var user = new Object(); 
user.age = 0; 
user.name = 0; 
user.city = 0;

1.5.5 使用 ES6+

必須優先使用 ES6+ 中新增的語法糖和函數。這將簡化你的程序，並讓你的代碼更加靈活和可復 用。比如箭頭函數、await/async ， 解構， let ， for…of 等等。

1.5.6 括號

下列關鍵字后必須有大括號（即使代碼塊的內容只有一行）：if, else, for, while, do, switch, try,catch, finally, with。

正例：

if (condition) { 
doSomething();
 }

反例：

if (condition) doSomething();

1.5.7 undefined 判斷

永遠不要直接使用 undefined 進行變量判斷；使用 typeof 和字符串’undefined’對變量進行判斷。
正例：

 if (typeof person === 'undefined') { ... }

反例：

if (person === undefined) { ... }

1.5.8 條件判斷和循環最多三層

條件判斷能使用三目運算符和邏輯運算符解決的，就不要使用條件判斷，但是謹記不要寫太長的 三目運算符。如果超過 3 層請抽成函數，並寫清楚注釋。

1.5.9 this 的轉換命名

對上下文 this 的引用只能使用 ’self’ 來命名。

1.5.10 慎用 console.log

因 console.log 大量使用會有性能問題，所以在非 webpack 項目中謹慎使用 log 功能。

二、Vue 項目規范

(一) Vue 編碼基礎

vue 項目規范以 Vue 官方規范 （https://cn.vuejs.org/v2/style-guide/） 中的 A 規范為基礎，在其上面進行項目開發，故所有代碼均遵守該規范。

請仔仔細細閱讀 Vue 官方規范，切記，此為第一步。

2.1.1. 組件規范

1) 組件名為多個單詞。

組件名應該始終是多個單詞組成（大於等於 2），且命名規范為KebabCase格式。

這樣做可以避免跟現有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的。

正例：

export default {
  name: 'TodoItem'
  // ...
};

反例：


export default {
  name: 'Todo',
  // ...
}
export default {
  name: 'todo-item',
  // ...
}
2) 組件文件名為 pascal-case 格式

正例：

components/
|- my-component.vue

反例：

components/
|- myComponent.vue
|- MyComponent.vue
3) 基礎組件文件名為 base 開頭，使用完整單詞而不是縮寫。

正例：

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
4) 和父組件緊密耦合的子組件應該以父組件名作為前綴命名

正例：

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）

反例：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了縮寫）
5) 在 Template 模版中使用組件，應使用 PascalCase 模式，並且使用自閉合組件。

正例：

<!-- 在單文件組件、字符串模板和 JSX 中 -->
<MyComponent />
<Row><table :column="data"/></Row>

反例：

<my-component /> <row><table :column="data"/></row>
6) 組件的 data 必須是一個函數

當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。因為如果直接是一個對象的話，子組件之間的屬性值會互相影響。

正例：

export default {
  data () {
    return {
      name: 'jack'
    }
  }
}

反例：

export default {
  data: {
    name: 'jack'
  }
}
7) Prop 定義應該盡量詳細

必須使用 camelCase 駝峰命名
必須指定類型
必須加上注釋，表明其含義
必須加上 required 或者 default，兩者二選其一
如果有業務需要，必須加上 validator 驗證

正例：

 props: {
  // 組件狀態，用於控制組件的顏色
   status: {
     type: String,
     required: true,
     validator: function (value) {
       return [
         'succ',
         'info',
         'error'
       ].indexOf(value) !== -1
     }
   },
    // 用戶級別，用於顯示皇冠個數
   userLevel：{
      type: String,
      required: true
   }
}
8) 為組件樣式設置作用域

正例：

<template>
  <button class="btn btn-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
  .btn-close {
    background-color: red;
  }
</style>

反例：

<template>
  <button class="btn btn-close">X</button>
</template>
<!-- 沒有使用 `scoped` 特性 -->
<style>
  .btn-close {
    background-color: red;
  }
</style>
9) 如果特性元素較多，應該主動換行。

正例：

<MyComponent foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
 />

反例：

<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c"/>

2.1.2. 模板中使用簡單的表達式

組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法。復雜表達式會讓你的模板變得不那么聲明式。我們應該盡量描述應該出現的是什么，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。

正例：

<template>
  <p>{{ normalizedFullName }}</p>
</template>
// 復雜表達式已經移入一個計算屬性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例：

<template>
  <p>
       {{
          fullName.split(' ').map(function (word) {
             return word[0].toUpperCase() + word.slice(1)
           }).join(' ')
        }}
  </p>
</template>

2.1.3 指令都使用縮寫形式

指令推薦都使用縮寫形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)

正例：

<input
  @input="onInput"
  @focus="onFocus"
>

反例：

<input
  v-on:input="onInput"
  @focus="onFocus"
>

2.1.4 標簽順序保持一致

單文件組件應該總是讓標簽順序保持為 `

正例：

<template>...</template>
<script>...</script>
<style>...</style>

反例：

<template>...</template>
<style>...</style>
<script>...</script>

2.1.5 必須為 v-for 設置鍵值 key

2.1.6 v-show 與 v-if 選擇

如果運行時，需要非常頻繁地切換，使用 v-show ；如果在運行時，條件很少改變，使用 v-if。

2.1.7 script 標簽內部結構順序

components > props > data > computed > watch > filter > 鈎子函數（鈎子函數按其執行順序） > methods

2.1.8 Vue Router 規范

1) 頁面跳轉數據傳遞使用路由參數

頁面跳轉，例如 A 頁面跳轉到 B 頁面，需要將 A 頁面的數據傳遞到 B 頁面，推薦使用 路由參數進行傳參，而不是將需要傳遞的數據保存 vuex，然后在 B 頁面取出 vuex 的數據，因為如果在 B 頁面刷新會導致 vuex 數據丟失，導致 B 頁面無法正常顯示數據。

正例：

let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });
2) 使用路由懶加載（延遲加載）機制
{
    path: '/uploadAttachment',
    name: 'uploadAttachment',
    meta: {
      title: '上傳附件'
    },
    component: () => import('@/view/components/uploadAttachment/index.vue')
  },
3) router 中的命名規范

path、childrenPoints 命名規范采用kebab-case命名規范（盡量vue文件的目錄結構保持一致，因為目錄、文件名都是kebab-case，這樣很方便找到對應的文件）

name 命名規范采用KebabCase命名規范且和component組件名保持一致！（因為要保持keep-alive特性，keep-alive按照component的name進行緩存，所以兩者必須高度保持一致）

// 動態加載
export const reload = [
  {
    path: '/reload',
    name: 'reload',
    component: Main,
    meta: {
      title: '動態加載',
      icon: 'icon iconfont'
    },
    children: [
      {
        path: '/reload/smart-reload-list',
        name: 'SmartReloadList',
        meta: {
          title: 'SmartReload',
          childrenPoints: [
            {
              title: '查詢',
              name: 'smart-reload-search'
            },
            {
              title: '執行reload',
              name: 'smart-reload-update'
            },
            {
              title: '查看執行結果',
              name: 'smart-reload-result'
            }
          ]
        },
        component: () =>
          import('@/views/reload/smart-reload/smart-reload-list.vue')
      }
    ]
  }
];
4) router 中的 path 命名規范

path除了采用kebab-case命名規范以外，必須以 / 開頭，即使是children里的path也要以 / 開頭。如下示例

目的：

經常有這樣的場景：某個頁面有問題，要立刻找到這個vue文件，如果不用以/開頭，path為parent和children組成的，可能經常需要在router文件里搜索多次才能找到，而如果以/開頭，則能立刻搜索到對應的組件

{
    path: '/file',
    name: 'File',
    component: Main,
    meta: {
      title: '文件服務',
      icon: 'ios-cloud-upload'
    },
    children: [
      {
        path: '/file/file-list',
        name: 'FileList',
        component: () => import('@/views/file/file-list.vue')
      },
      {
        path: '/file/file-add',
        name: 'FileAdd',
        component: () => import('@/views/file/file-add.vue')
      },
      {
        path: '/file/file-update',
        name: 'FileUpdate',
        component: () => import('@/views/file/file-update.vue')
      }
    ]
  }

(二) Vue 項目目錄規范

2.2.1 基礎

vue 項目中的所有命名一定要與后端命名統一。

比如權限：后端 privilege, 前端無論 router , store, api 等都必須使用 privielege 單詞！

2.2.2 使用 Vue-cli 腳手架

使用 vue-cli3 來初始化項目，項目名按照上面的命名規范。

2.2.3 目錄說明

目錄名按照上面的命名規范，其中 components 組件用大寫駝峰，其余除 components 組件目錄外的所有目錄均使用 kebab-case 命名。

src                                  源碼目錄
|-- api                              所有api接口
|-- assets                           靜態資源，images, icons, styles等
|-- components                       公用組件
|-- config                           配置信息
|-- constants                        常量信息，項目所有Enum, 全局常量等
|-- directives                       自定義指令
|-- filters                          過濾器，全局工具
|-- datas                            模擬數據，臨時存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模擬接口，臨時存放
|-- plugins                          插件，全局使用
|-- router                           路由，統一管理
|-- store                            vuex, 統一管理
|-- themes                           自定義樣式主題
|-- views                            視圖目錄
|   |-- role                                 role模塊名
|   |-- |-- role-list.vue                    role列表頁面
|   |-- |-- role-add.vue                     role新建頁面
|   |-- |-- role-update.vue                  role更新頁面
|   |-- |-- index.less                       role模塊樣式
|   |-- |-- components                       role模塊通用組件文件夾
|   |-- employee                             employee模塊
1) api 目錄
  • 文件、變量命名要與后端保持一致。
  • 此目錄對應后端 API 接口，按照后端一個 controller 一個 api js 文件。若項目較大時，可以按照業務划分子目錄，並與后端保持一致。
  • api 中的方法名字要與后端 api url 盡量保持語義高度一致性。
  • 對於 api 中的每個方法要添加注釋，注釋與后端 swagger 文檔保持一致。

正例：

后端 url： EmployeeController.java

/employee/add
/employee/delete/{id}
/employee/update

前端： employee.js

  // 添加員工
  addEmployee: (data) => {
    return postAxios('/employee/add', data)
  },
  // 更新員工信息
  updateEmployee: (data) => {
    return postAxios('/employee/update', data)
  },
    // 刪除員工
  deleteEmployee: (employeeId) => {
    return postAxios('/employee/delete/' + employeeId)
   },
2) assets 目錄

assets 為靜態資源，里面存放 images, styles, icons 等靜態資源，靜態資源命名格式為 kebab-case

|assets
|-- icons
|-- images
|   |-- background-color.png
|   |-- upload-header.png
|-- styles

3) components 目錄

此目錄應按照組件進行目錄划分，目錄命名為 KebabCase，組件命名規則也為 KebabCase

|components
|-- error-log
|   |-- index.vue
|   |-- index.less
|-- markdown-editor
|   |-- index.vue
|   |-- index.js
|-- kebab-case
4) constants 目錄

此目錄存放項目所有常量，如果常量在 vue 中使用，請使用 vue-enum 插件(https://www.npmjs.com/package/vue-enum)

目錄結構：

|constants
|-- index.js
|-- role.js
|-- employee.js

例子： employee.js

export const EMPLOYEE_STATUS = {
  NORMAL: {
    value: 1,
    desc: '正常'
  },
  DISABLED: {
    value: 1,
    desc: '禁用'
  },
  DELETED: {
    value: 2,
    desc: '已刪除'
  }
};
export const EMPLOYEE_ACCOUNT_TYPE = {
  QQ: {
    value: 1,
    desc: 'QQ登錄'
  },
  WECHAT: {
    value: 2,
    desc: '微信登錄'
  },
  DINGDING: {
    value: 3,
    desc: '釘釘登錄'
  },
  USERNAME: {
    value: 4,
    desc: '用戶名密碼登錄'
  }
};
export default {
  EMPLOYEE_STATUS,
  EMPLOYEE_ACCOUNT_TYPE
};

5) router 與 store 目錄

這兩個目錄一定要將業務進行拆分，不能放到一個 js 文件里。

router 盡量按照 views 中的結構保持一致

store 按照業務進行拆分不同的 js 文件

6) views 目錄

命名要與后端、router、api 等保持一致
components 中組件要使用 PascalCase 規則

|-- views                                    視圖目錄
|   |-- role                                 role模塊名
|   |   |-- role-list.vue                    role列表頁面
|   |   |-- role-add.vue                     role新建頁面
|   |   |-- role-update.vue                  role更新頁面
|   |   |-- index.less                      role模塊樣式
|   |   |-- components                      role模塊通用組件文件夾
|   |   |   |-- role-header.vue             role頭部組件
|   |   |   |-- role-modal.vue              role彈出框組件
|   |-- employee                            employee模塊
|   |-- behavior-log                        行為日志log模塊
|   |-- code-generator                      代碼生成器模塊

2.2.4 注釋說明

整理必須加注釋的地方

  • 公共組件使用說明
  • api 目錄的接口 js 文件必須加注釋
  • store 中的 state, mutation, action 等必須加注釋
  • vue 文件中的 template 必須加注釋，若文件較大添加 start end 注釋
  • vue 文件的 methods，每個 method 必須添加注釋
  • vue 文件的 data, 非常見單詞要加注釋

2.2.5 其他

1) 盡量不要手動操作 DOM

因使用 vue 框架，所以在項目開發中盡量使用 vue 的數據驅動更新 DOM，盡量（不到萬不得已）不要手動操作 DOM，包括：增刪改 dom 元素、以及更改樣式、添加事件等。

2) 刪除無用代碼

因使用了 git/svn 等代碼版本工具，對於無用代碼必須及時刪除，例如：一些調試的 console 語句、無用的棄用功能代碼。

碼字不易，在線求個三連支持。

大家記得收藏前，先點個贊哦！好的文章值得被更多人看到。

關注江哥不迷路，帶你編程上高速。

微信公眾號關注：江小魚吧 免費領取高級前端學習資料，轉身漲薪20K

支付寶生態技術學習交流群：
加入Q群與更多BAT一線大佬深度交流：1136157571 （點我入群）


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 阿里的代碼規范插件 Web前端代碼規范 看了這份《阿里前端代碼規范》，你也能寫出“高顏值”代碼 idea 添加 阿里代碼規范 阿里代碼規范檢查工具的安裝使用 阿里代碼規范掃描工具安裝地址 Java規范代碼風格(阿里開發規范精簡) 團隊開發前端VUE項目代碼規范 百度前端代碼規范：HTML 2021最新java知識全解之Java框架篇
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM