vue 組件編碼規範

1、爲何要有規範？

1. 本身、同事更容易閱讀和理解
2. 更好的利用開發工具的功能（高亮、格式化等功能）
3. 更好的進行代碼拆分
複製代碼

2、 咱們能夠作什麼？

1. 始終基於模塊的方式來構建你的應用，每一個模塊專一於解決一個問題，作到獨立、可複用、微小（不超過100行）、可測試。

2. 組件命名須要遵循如下規則：
    -組件名爲多個有意義單詞
    -簡短（使用連字符分割單詞）
    
3. 組件表達式簡單化  
    （1）複雜表達式存在的問題
        -表達式功能強大但也存在風險
        -複雜的行內表達式閱讀困難
        -行內表達式沒法提取公用，致使重複編碼
        -IDE沒法識別且不能自動補全
    （2）如何避免
        -儘可能使用method或者computed屬性代替其功能
        
4. props儘可能傳遞原始類型的數據
    -使用原始類型可使得組件更接近於HTML5原生元素
    -其餘開發人員能夠更好地理解每個prop的含義和做用
    -複雜的對象使得咱們不可以清楚的知道哪些屬性和方法被組件使用，使得代碼難以重構和維護
    組件的每個屬性定義一個props，而且使用函數和原始類型的值
    ```
        <!-- 推薦 -->
        <range-slider
          :values="[10, 20]"
          :min="0"
          :max="100"
          :step="5"
          @on-slide="updateInputs"
          @on-end="updateResults">
        </range-slider>
        
        <!-- 避免 -->
        <range-slider :config="complexConfigObject"></range-slider>
    ```
    
5. 爲每個props提供驗證
    （1）驗證props能夠保證你的組件可用性，即便使用者未按照你的想法使用也不會出現問題-----爲何
    （2）如何作
        -給prop提供默認值
        -使用type或者自定義validator驗證傳入的prop是不是你須要的若是不是會在控制檯給使用者警告
        
6. 將this指向組件實例。切換不通上下文時確保this指向一個可用的component
    -儘可能使用ES6進行編碼（箭頭函數保留this做用域）
    
7. 組件結構化（按照必定的結構組織使得組件易於理解可參考ELEMENTUI）
    -導出一個清晰有序的組件，使得代碼閱讀理解簡單，有利於標準化
    -按照首字母排序 data、computed、watch、method、mounted，使得屬性易於查找
    -使用單文件.vue格式組織代碼
    ```
    <template lang="html">
      <div class="Ranger__Wrapper">
        <!-- ... -->
      </div>
    </template>
    
    <script type="text/javascript">
      export default {
        // 不要忘記了 name 屬性
        name: 'RangeSlider',
        // 使用組件 mixins 共享通用功能
        mixins: [],
        // 組成新的組件
        extends: {},
        // 組件屬性、變量
        props: {
          bar: {}, // 按字母順序
          foo: {},
          fooBar: {},
        },
        // 變量
        data() {},
        computed: {},
        // 使用其它組件
        components: {},
        // 方法
        watch: {},
        methods: {},
        // 生命週期函數
        beforeCreate() {},
        mounted() {},
      };
    </script>
    
    <style scoped>
      .Ranger__Wrapper { /* ... */ }
    </style>
    ```
    
8. 合理的事件命名
    -以動詞或名詞結尾（如crive-upload-success、upload-error）
    
9. 避免使用this.$parent 儘可能不在子組件訪問父組件上下文
    -經過props傳值給子組件
    -子組件觸發事件通知父組件
    -經過props傳遞迴調函數給子組件達到調用父組件方法的目的
    
10. 避免使用this.$ref VUE支持經過ref屬性訪問其餘組件和HTML元素並能獲得其相應的上下文
    違背了組件組件獨立的原則
    當props和events難以實現功能時使用this.$ref或者須要操做DOM時而不是使用JQquery、document.getElement、docunment.queryElement

11. 使用組件名做爲樣式做用域命名空間
    -避免組件樣式影響外部樣式和被外部樣式影響
    -模塊名、目錄名、樣式做用域名一致易於開發者理解
    
12. 完善README.md文件方便其餘開發者使用

13. 提供demo

14. 對組件文件進行代碼校驗

15. Mixins 封裝可重用的代碼，避免了重複。若是兩個組件共享有相同的功能，則可使用 mixin。經過 mixin，你能夠專一於單個組件的任務和抽象的通用代碼

參考 vue風格指南
複製代碼