日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
一個優(yōu)秀的Vue團隊代碼規(guī)范是什么樣子的？

 規(guī)范與每個團隊和個人都是息息相關的，因為其影響的不只是只是代碼的維護和理解成本，嚴重的時候是會影響成員開發(fā)的心情

創(chuàng)新互聯(lián)網站建設公司，提供網站設計制作、成都網站制作，網頁設計，建網站，PHP網站建設等專業(yè)做網站服務;可快速的進行網站開發(fā)網頁制作和功能擴展；專業(yè)做搜索引擎喜愛的網站，是專業(yè)的做網站團隊，希望更多企業(yè)前來合作!

一個團隊的編碼規(guī)范、git規(guī)范等，并沒有絕對的最優(yōu)解，心里要清楚明白沒有銀彈，規(guī)范是為了讓團隊統(tǒng)一，提高代碼閱讀性、降低代碼維護成本等，本文是記錄一些在項目code review中常見的規(guī)范，僅供參考

JS部分

和渲染無關的數(shù)據(jù)

vue中data的數(shù)據(jù)默認便會進行雙向數(shù)據(jù)綁定，若是將大量的和渲染無關的數(shù)據(jù)直接放置在data中，將會浪費雙向數(shù)據(jù)綁定時所消耗的性能，將這些和渲染無關的數(shù)據(jù)進行抽離并配合Object.freeze進行處理

table中columns數(shù)據(jù)可以單獨提取一個外部js文件作為配置文件，也可以在當前.vue文件中定義一個常量定義columns數(shù)據(jù)，因為無論如何都是固定且不會修改的數(shù)據(jù)，應該使用Object.freeze進行包裹，既可以提高性能還可以將固定的數(shù)據(jù)抽離，一些下拉框前端固定的數(shù)據(jù)也建議此操作 

 
 
 
    
  
  
  
  1. const columnList = Object.freeze([  
    2. 
  
  
  
  2.   { title: '姓名', key: 'name', align: 'center' },  
    3. 
  
  
  
  3.   { title: '性別', key: 'gender', align: 'center' }  
    4. 
  
  
  
  4. ]) 
    5.

需要注意的是 Object.freeze() 凍結的是值，這時仍然可以將變量的引用替換掉，還有確保數(shù)據(jù)不會變才可以使用這個語法，如果要對數(shù)據(jù)進行修改和交互，就不適合使用凍結了。

Modal框的控制

一個頁面種通常會存在很多個不同功能的彈框，若是每一個彈框都設置一個對應的變量來控制其顯示，則會導致變量數(shù)量比較冗余和命名困難，可以使用一個變量來控制同一頁面中的所有Modal彈框的展示

比如某個頁面中存在三個Modal彈框 

 
 
 
    
  
  
  
  1. // bad  
    2. 
  
  
  
  2. // 每一個數(shù)據(jù)控制對應的Modal展示與隱藏  
    3. 
  
  
  
  3. new Vue({  
    4. 
  
  
  
  4.     data() {  
    5. 
  
  
  
  5.         return {  
    6. 
  
  
  
  6.             modal1: false,  
    7. 
  
  
  
  7.             modal2: false,  
    8. 
  
  
  
  8.             modal3: false,  
    9. 
  
  
  
  9.         }  
    10. 
  
  
  
  10.     }  
    11. 
  
  
  
  11. })  
    12. 
  
  
  
  12. // good  
    13. 
  
  
  
  13. // 當modalType為對應的值時 展示其對應的彈框  
    14. 
  
  
  
  14. new Vue({  
    15. 
  
  
  
  15.     data() {  
    16. 
  
  
  
  16.         return {  
    17. 
  
  
  
  17.             modalType: '' // modalType值為 modal1，modal2，modal3  
    18. 
  
  
  
  18.         }  
    19. 
  
  
  
  19.     }  
    20. 
  
  
  
  20. }) 
    21.

debounce使用

例如遠程搜索時需要通過接口動態(tài)的獲取數(shù)據(jù)，若是每次用戶輸入都接口請求，是浪費帶寬和性能的

當一個按鈕多次點擊時會導致多次觸發(fā)事件，可以結合場景是否立即執(zhí)行immediate 

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.     {{item.label}}  
    3. 
  
  
  
  3.   
    4. 
 
 
 
 
 
 
    
  
  
  
  1. import {debounce} from 'lodash'  
    2. 
  
  
  
  2. methods：{  
    3. 
  
  
  
  3.     remoteMethod：debounce(function (query) {  
    4. 
  
  
  
  4.         // to do ...  
    5. 
  
  
  
  5.        // this 的指向沒有問題  
    6. 
  
  
  
  6.     }, 200),  
    7. 
  
  
  
  7. } 
    8.

圖片

功能的開發(fā)過程中，圖片的處理往往是比較容易被忽略的環(huán)節(jié)，也會在一定程度影響開發(fā)的效率和頁面的性能

  •  圖片壓縮問題，除非特別要求圖片必須高質量的顯示，否則都應該進行對應的壓縮處理
  •  不同業(yè)務場景進行圖片格式的選型
    •   JPG 適用于呈現(xiàn)色彩豐富的圖片，JPG 圖片經常作為大的背景圖、輪播圖或 Banner 圖出現(xiàn)等
    •   Logo、顏色簡單且對比強烈的圖片或背景、需要透明度等
    •   將常用且變動頻率很低的小圖片進行合并成雪碧圖，對于變動比較頻繁和小于6KB的圖片進行base64處理
    •   根據(jù)項目圖片數(shù)量和項目的用戶機型分布等，考慮采取webp進行圖片的處理

路由組件傳參

在組件中使用 $route 會使之與其對應路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

使用 props 將組件和路由解耦：

取代與 $route 的耦合 

 
 
 
    
  
  
  
  1. const User = {  
    2. 
  
  
  
  2.   template: '
    User {{ $route.params.id }}
    ' 
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. const router = new VueRouter({  
    5. 
  
  
  
  5.   routes: [  
    6. 
  
  
  
  6.     { path: '/user/:id', component: User }  
    7. 
  
  
  
  7.   ]  
    8. 
  
  
  
  8. }) 
    9.

通過 props 解耦

這樣你便可以在任何地方使用該組件，使得該組件更易于重用和測試。 

 
 
 
    
  
  
  
  1. const User = {  
    2. 
  
  
  
  2.   props: ['id'],  
    3. 
  
  
  
  3.   template: '
    User {{ id }}
    '  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. const router = new VueRouter({  
    6. 
  
  
  
  6.   routes: [  
    7. 
  
  
  
  7.     { path: '/user/:id', component: User, props: true },  
    8. 
  
  
  
  8.     // 對于包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項：  
    9. 
  
  
  
  9.     {  
    10. 
  
  
  
  10.       path: '/user/:id',  
    11. 
  
  
  
  11.       components: { default: User, sidebar: Sidebar },  
    12. 
  
  
  
  12.       props: { default: true, sidebar: false }  
    13. 
  
  
  
  13.     }  
    14. 
  
  
  
  14.   ]  
    15. 
  
  
  
  15. }) 
    16.

參考：路由組件傳參

Vue生命周期

在父子組件中，掌握父子組件對應的生命周期鉤子加載順序可以讓開發(fā)者在更合適的時候做適合的事情父組件 

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.  
    3.

子組件 

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.  
    3.

加載時父子組件的加載順序 

 
 
 
    
  
  
  
  1. home beforeCreate --> home created --> home beforeMount --> list created --> list beforeMount --> list mounted 
    2.

銷毀時父子組件的銷毀順序 

 
 
 
    
  
  
  
  1. home beforeDestroy --> list beforeDestroy --> list destroyed --> home destroyed 
    2.

實際開發(fā)過程中會遇到當子組件某個生命周期完成之后通知父組件，然后在父組件做對應的處理

emit up 

 
 
 
    
  
  
  
  1. // 子組件在對應的鉤子中發(fā)布事件  
    2. 
  
  
  
  2. created(){  
    3. 
  
  
  
  3.   this.$emit('done')  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. // 父組件訂閱其方發(fā)  
    6. 
  
  
  
  6.  
    7.

hook

通過@hook監(jiān)聽子組件的生命周期 

 
 
 
    
  
  
  
  1.  
    2.

Select優(yōu)化

下拉框遍歷時，需要注意options標簽保持同一行，若是存在換行，會導致選中時的值存在多余的空白 

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.       
    4. 
  
  
  
  4.         {{item.label}}  
    5. 
  
  
  
  5.       
    6. 
  
  
  
  6.  
    7.

需要將Options和下拉框的值保持在同一行 

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.     {{item.label}}  
    4. 
  
  
  
  4.  
    5.

data數(shù)據(jù)層級

data數(shù)據(jù)具有數(shù)據(jù)層級結構，切勿過度扁平化或者嵌套層級過深，若是過度扁平化會導致數(shù)據(jù)命名空間沖突，參數(shù)傳遞和處理，若是層級嵌套過深也會導致vue數(shù)據(jù)劫持的時候遞歸層級過深，若是嵌套層級喪心病狂那種的，小心遞歸爆棧的問題。而且層級過深會導致數(shù)據(jù)操作和處理不便，獲取數(shù)據(jù)做容錯處理也比較繁瑣。一般層級保持2-3層最好。

若是只有一層數(shù)據(jù)，過于扁平 

 
 
 
    
  
  
  
  1. {  
    2. 
  
  
  
  2.     name: '',  
    3. 
  
  
  
  3.     age: '',  
    4. 
  
  
  
  4.     gender: ''  
    5. 
  
  
  
  5. } 
    6.

導致處理不方便 

 
 
 
    
  
  
  
  1. // 作為接口參數(shù)傳遞  
    2. 
  
  
  
  2. ajax({  
    3. 
  
  
  
  3.  this.name, this.age, this.gender  
    4. 
  
  
  
  4. })  
    5. 
  
  
  
  5. // 接口獲取數(shù)據(jù)，批量處理  
    6. 
  
  
  
  6. ajax().then(res => {  
    7. 
  
  
  
  7.  const {name, age, gender} = res.data  
    8. 
  
  
  
  8.     this.name = name  
    9. 
  
  
  
  9.     this.age = age  
    10. 
  
  
  
  10.     this.gender = gender  
    11. 
  
  
  
  11. }) 
    12.

適當?shù)膶蛹壗Y構不僅增加代碼的維護和閱讀性，還可以增加操作和處理的便捷性 

 
 
 
    
  
  
  
  1. {  
    2. 
  
  
  
  2.     person: { // 個人信息  
    3. 
  
  
  
  3.         name: '',  
    4. 
  
  
  
  4.         age: '',  
    5. 
  
  
  
  5.         gender: ''  
    6. 
  
  
  
  6.     }  
    7. 
  
  
  
  7. } 
    8.

可以針對person進行操作 

 
 
 
    
  
  
  
  1. // 作為接口參數(shù)傳遞  
    2. 
  
  
  
  2. ajax(this.person)  
    3. 
  
  
  
  3. // 接口獲取數(shù)據(jù)，批量處理  
    4. 
  
  
  
  4. ajax().then(res => {  
    5. 
  
  
  
  5.  const {name, age, gender} = res.data  
    6. 
  
  
  
  6.     this.$set(this, 'person', {name, age, gender})  
    7. 
  
  
  
  7. }) 
    8.

策略模式

策略模式的使用，避免過多的if else判斷，也可以替代簡單邏輯的switch 

 
 
 
    
  
  
  
  1. const formatDemandItemType = (value) => {  
    2. 
  
  
  
  2.     switch (value) {  
    3. 
  
  
  
  3.         case 1:  
    4. 
  
  
  
  4.             return '基礎'  
    5. 
  
  
  
  5.         case 2:  
    6. 
  
  
  
  6.             return '高級'  
    7. 
  
  
  
  7.         case 3:  
    8. 
  
  
  
  8.             return 'VIP'  
    9. 
  
  
  
  9.     }  
    10. 
  
  
  
  10. }  
    11. 
  
  
  
  11. // 策略模式  
    12. 
  
  
  
  12. const formatDemandItemType2 = (value) => {  
    13. 
  
  
  
  13.     const obj = {  
    14. 
  
  
  
  14.         1: '基礎',  
    15. 
  
  
  
  15.         2: '高級',  
    16. 
  
  
  
  16.         3: 'VIP',  
    17. 
  
  
  
  17.     }   
    18. 
  
  
  
  18.     return obj[value]  
    19. 
  
  
  
  19. } 
    20.

解構

解構賦值以及默認值，當解構的數(shù)量小于多少時適合直接解構并賦值默認值，數(shù)據(jù)是否進行相關的聚合處理 

 
 
 
    
  
  
  
  1. const {  
    2. 
  
  
  
  2.   naem = '',  
    3. 
  
  
  
  3.   age = 10,  
    4. 
  
  
  
  4.   gender = 'man'  
    5. 
  
  
  
  5. } = res.data  
    6. 
  
  
  
  6. // bad  
    7. 
  
  
  
  7. this.name = name  
    8. 
  
  
  
  8. this.age = age  
    9. 
  
  
  
  9. this.gender = gender  
    10. 
  
  
  
  10. // good  
    11. 
  
  
  
  11. this.person = {  
    12. 
  
  
  
  12.   naem,  
    13. 
  
  
  
  13.   age,  
    14. 
  
  
  
  14.   gender  
    15. 
  
  
  
  15. } 
    16.

職責單一

任何時候盡量是的一個函數(shù)就做一件事情，而不是將各種邏輯全部耦合在一起，提高單個函數(shù)的復用性和可讀性

每個頁面都會在加載完成時進行數(shù)據(jù)的請求并展示到頁面 

 
 
 
    
  
  
  
  1. created() {  
    2. 
  
  
  
  2.   this.init();  
    3. 
  
  
  
  3. },  
    4. 
  
  
  
  4. methods: {  
    5. 
  
  
  
  5.   // 將全部的請求行為聚合在init函數(shù)中  
    6. 
  
  
  
  6.   // 將每個請求單獨拆分  
    7. 
  
  
  
  7.   init() {  
    8. 
  
  
  
  8.     this.getList1()  
    9. 
  
  
  
  9.     this.getList2()  
    10. 
  
  
  
  10.   },  
    11. 
  
  
  
  11.   getList1() {  
    12. 
  
  
  
  12.     // to do ...  
    13. 
  
  
  
  13.   },  
    14. 
  
  
  
  14.   getList2() {  
    15. 
  
  
  
  15.     // to do ...  
    16. 
  
  
  
  16.   }  
    17. 
  
  
  
  17. } 
    18.

v-bind

HTML部分

html書寫

編寫template模板時，屬性過多時，是否換行 

 
 
 
    
  
  
  
  1.  
    2.

實體使用

html中展示一些如<，>,&等字符時，使用字符實體代替 

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.   > 1 & < 12  
    4.
  
  •   
  •   
  •   > 1 & < 12  
  •  

    CSS部分

    樣式穿透

    在開發(fā)中修改第三方組件樣式是很常見，但由于 scoped 屬性的樣式隔離，可能需要去除 scoped 或是另起一個 style 。這些做法都會帶來副作用（組件樣式污染、不夠優(yōu)雅），樣式穿透在css預處理器中使用才生效。

    •  less使用  /deep/ 
     
 
 
      
  
  
  
    1.   
      2. 
  
  
  
    2. .content /deep/ .el-button {  
      3. 
  
  
  
    3.  height: 60px;  
      4. 
  
  
  
    4. }  
      5. 
  
  
  
    5.  
      6.
    •  scss使用 ::v-deep 
     
 
 
      
  
  
  
    1.   
      2. 
  
  
  
    2. .content ::v-deep .el-button {  
      3. 
  
  
  
    3.   height: 60px;  
      4. 
  
  
  
    4. }  
      5. 
  
  
  
    5.  
      6.
    •  stylus使用 >>> 
     
 
 
      
  
  
  
    1.   
      2. 
  
  
  
    2. 外層 >>> .custon-components{  
      3. 
  
  
  
    3.   height: 60px; 
      4. 
  
  
  
    4.  }  
      5. 
  
  
  
    5.  
      6.

    空格

    適當?shù)目崭窨梢蕴嵘a的閱讀體驗，顯得更為優(yōu)雅和美觀

    選擇器后、屬性值 

     
 
 
      
  
  
  
    1. .custom-style { // 選擇器和{ 之間空格  
      2. 
  
  
  
    2.   margin: 0; // 屬性值前  
      3. 
  
  
  
    3.   transform: scale(1.5, 2.2); // 逗號之后增加空格  
      4. 
  
  
  
    4. } 
      5.

    換行

    和html類型，當某行的屬性很多，適當?shù)膿Q行可以提高閱讀和美觀 

     
 
 
      
  
  
  
    1. .custom-style{  
      2. 
  
  
  
    2.   // 可以在一次聲明中定義一個或多個屬性  
      3. 
  
  
  
    3.   background: background-clip  
      4. 
  
  
  
    4.     background-color  
      5. 
  
  
  
    5.     background-image  
      6. 
  
  
  
    6.     background-origin  
      7. 
  
  
  
    7.     background-position  
      8. 
  
  
  
    8.     background-repeat  
      9. 
  
  
  
    9.     background-size;  
      10. 
  
  
  
    10. } 
      11.

    當一個規(guī)則包含多個選擇器時，每個選擇器聲明必須獨占一行，過長導致需要橫向滾動閱讀剩余的內容，應該盡量使得閱讀順序縱向化 

     
 
 
      
  
  
  
    1. .custom .header .title，  
      2. 
  
  
  
    2. .other .header .title { 
      3. 
  
  
  
    3.   color: #f0f;  
      4. 
  
  
  
    4. } 
      5.

    嵌套層級

    瀏覽器在解析css時，是按照從右到左遞歸匹配的，過深的層級嵌套不僅影響性能，而且還會導致樣式閱讀性和代碼維護性降低，一般層架控制在5層之內

    雙引號

    屬性選擇器中的值必須用雙引號包圍，不允許使用單引號，也不允許不使用引號，html的屬性值也是推薦使用雙引號，js中使用單引號 

     
 
 
      
  
  
  
    1. .custom-style{  
      2. 
  
  
  
    2. font-family: "PingFang SC", "STHeitiSC-Light";  
      3. 
  
  
  
    3. } 
      4.

    屬性順序

    同一 規(guī)則下的屬性在書寫時，應按功能進行分組。并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相關） > Visual（視覺效果） 的順序書寫，以提高代碼的可讀性。

    解釋：

    •  Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
    •  Box Model 相關屬性包括：border / margin / padding / width / height 等
    •  Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等
    •  Visual 相關屬性包括：background / color / transition / list-style 等

    另外，為增加可讀性，如果包含 content 屬性，應放在屬性的最前面。


    當前文章：一個優(yōu)秀的Vue團隊代碼規(guī)范是什么樣子的？
    地址分享：http://www.5511xx.com/article/dpphjig.html