关于前端开发项目的一些思考与整理

前端团队开发中，往往不同开发者的习惯是不同，导致所形成的风格也是不同的，在小型公司团队中大部分都会导致后期维护的艰难与代码美观度的不足，而我也经手了几个这种的项目，深深地感到了规范开发的重要性。以下是我的一些开发规范整理。

视图层（前端界面)

视图层在前端中犹为重要，以更直观的界面展示给用户。

统一界面风格

• 主题颜色
• 字体大小
• border边框
• border圆角

统一封装业务状态组件

• 下拉刷新状态
• 没有更多了
• 页面无数据
• 数据加载中
• 提醒框 toast
• 确认取消框

性能优化

• 骨架屏
• 分包管理及加载
• 静态资源管理
• css样式
• key的使用

请求封装

• 请求封装

统一css预编译器

• less/sass/scss/stylus

统一组件规范

• 组件命名  

  hello-world
  

• 组件引用

  import HelloWorld from '/components/hello-world.vue'
  components:{
   HelloWorld
  }
  

• 组件使用

  <hello-world />
  

• prop规范

  // bad 这样做只有开发原型系统时可以接受
  props: ['status']
  
  // good
  props: {
    status: {
      type: String,
      required: true,
      validator: function (value) {
        return [
          'syncing',
          'synced',
          'version-conflict',
          'error'
        ].indexOf(value) !== -1
      }
    }
  }
  

• props命名

  <script>
  props: {
    greetingText: String
  }
  </script>
  
  <welcome-message greeting-text="hi"></welcome-message>
  

统一样式类名

• 命名以中划线

  class="goods-list"
  

事件命名

• 获取数据列表

  get_list(){}
  

• 页面跳转

  skip_detail(){}
  

• 处理事件

  handle/delete/submit + '事件名'(){}
  

• filter命名

  filter_Time/data(){}
  

变量/常量

• 标准变量采用驼峰式命名,使用let定义

  let user_info
  

• 标准常量采用大写英文命名,使用const定义

  let user_info
  

统一注释

• 单行

   // 姓名
    var name = “abc”;         
  

• 多行

  组件使用说明，和调用说明
        /**
        * 组件名称
        * @module 组件存放位置
        * @desc 组件描述
        * @author 组件作者
        * @date 2017年12月05日17:22:43
        * @param {Object} [title]    - 参数说明
        * @param {String} [columns] - 参数说明
        * @example 调用示例
        *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
        **/