前端代码规范

JS 规范

• 模块化思想，单文件不超过600行

• 单一原则：一个函数只做一件事，单函数不超过50行

• 魔法数字。项目公共文件中，建立一个数据字典的文件，存储常用的可枚举数据

• 逻辑复杂度不超过10 If else 优化 状态机模式 职责链模式 策略模式

  文件夹/文件规范

  项目目录如下：

  api          api接口请求
  assets       公共静态资源
  components   公共组件
  style        公共css文件
  utils        公共js文件
  views        页面
  App.vue      入口文件
  main.js      入口文件
  xxx.html     入口文件
  

  命令规范：

  #范例：

  • src

    • components

      • common

      • AppManage

        • AppList.vue
        • AppListConfig.js

    • composition

      • common

      • AppManage

        • AppLsit.js

    • viwes

      • AppManage

        • index.vue

        • AppManageDetail.vue

  1. 一个页面一个文件夹，如果只有一个文件，可以平铺出来

  2. views只保留页面文件，组件放入components，组合的内容放入composition;

  3. 入口使用 index.vue；

  4. 使用大写驼峰命名组件

  5. 使用更多的单词区分父子组件/页面，减少文件夹嵌套

     • AdvanceSearch
     • AdvanceSearchButtion
     • AdvanceSearchIuput

  6. 动词后置，区分操作

     • UserList
     • UserListAdd
     • UserListEdit
     • UserListRemove

  7. 配置文件与其使用者保持父子关系的命名：

     • AppLsit.vue
     • AppListConfig.js

  8. 如果有多于1处地方引用的组件，可以放入common文件夹

     • cpmponents

       • common

         • UserCenter.vue

Vue 文件书写规范

1. 从上到下是html、js、css

2. css 使用 less 语言

   <template>
       <div>
           ...
       </div>
   </template>
   <script>
       ...
   </script>
   <style lang='less'>
       ...
   </style>
   

3. css 最外层使用当前组件的名称，必须由两个单词以上组成，使用 — 连接多个单词

   .container-list {
        ...
        .list-item.container-list-item {
           &.list {
                 
           }
           ...
        }
   }