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风格指南
复制代码