前端开发规范

一、通用规范

• 1、TAB键用两个空格代替
• 2、CSS样式属性或者JAVASCRIPT代码后统一不加“；”。
• 3、文件内容编码均统一为UTF-8。

二、JavaScript书写规范

• 1、命名规范

文件名、文件夹名

全部小写，多单词的使用中横线分隔
如：aaa-bbb、ccc-ddd

标签名

全部小写，多单词的使用中横线分隔
如：aaa-bbb、ccc-ddd

常量名

全部大写并单词间用下划线分隔
如：CSS_BTN_CLOSE、TXT_LOADING

对象的属性或方法名

小驼峰式（little camel-case）
如：init、bindEvent、updatePosition

类名（构造器）

驼峰式
如：Current、DefaultConfig

函数名

小驼峰式
如：current()、defaultConfig()

变量名

小驼峰式
如：current、defaultConfig

私有变量名、私有函数

小驼峰式但需要用_开头
如：_current、_defaultConfig、_private()

• 2、使用严格的条件判断符。用===代替==，用!==代替!=，避免掉入==造成的陷阱，在条件判断时，这样的一些值表示false。

• 3、其他的遵循esLint的规则就行了

三、实际项目开发简介

• 1、目录结构

目录结构

• 1） api --- 接口模块目录
• 2） base --- 基础组件目录
• 3） common --- 公共模块目录，主要存放公用图片，公共方法、类、工具包，以及公共样式、全局样式
• 4） page --- 页面模块目录，主要以页面为单位放置
• 5） router --- 路由模块目录（小程序暂时没有）

• 2、文件结构
  • 1）api文件夹

api文件夹

• a、 接口请求统一使用axios（小程序则直接引入已封装的http工具类）
• b、 文件按后端接口模块创建 es: 接口url为 '.../api/info/get-user'，所以api目录下就需要创建一个info.js的文件for后端的info模块
• c、 当涉及到公共参数之类的，统一写入 api/config.js 文件中，通过模块引入的方式引用公共参数

• 2）base文件夹和page文件夹

base文件夹 page文件夹

<!--文件命名规范请使用 "-" 隔开的写法命名，即 "demo-page" -->
<template>
  <!--模版的第一个class定义为文件名，且其他class不用驼峰命名法，皆用 "aaa-bbb" 定义 例如："example-wrapper"-->
  <!--模版内部尽量不要出现定义style属性，除非你给我个理由！！！-->
  <!--如果使用组件，标签也不要使用驼峰，同样通过 "-" 隔开， 例如 <aaa-bbb></aaa-bbb>-->
  <div class="demo">
    <div class="example-wrapper"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  /**
   * 重点！！！！！
   * 常量全部定义在外面，主体函数引用
   * 主体函数不要涉及到常量的定义
   * 用 "AAA_BBB" 定义常量
   * 例如: const DATA_TYPE = 'xxxxxx'
   */
  export default {
    /**
     * 主体内部排序规则！！！
     * 1、props
     * 2、data
     * 3、生命周期函数 (包括其他函数)
     * 4、methods
     * 5、watcher
     * 6、components
     */
    /**
     * components 内部写法示例
     * components: {
     *  AaaBbb,
     *  BbbCcc
     * }
     */
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  /**
   * 样式写法！！！
   * 层级的嵌套尽量跟template的层级嵌套一样
   * 不要出现直接定义标签样式的情况，例如直接定义  div p span img 的样式，尽量使用类去写样式
   */
</style>

• 3）common文件夹，主要存放公用图片，公共方法、类、工具包，以及公共样式、全局样式
• 4）router 文件夹

示例写法：
    // const Login = () => import('page/login/login') => 示例写法

• 5）小程序page文件夹和base文件夹写法基本跟vue写法相似

主要不同的地方 –>
/**
 * 主体内部排序规则！！！
 * 1、props
 * 2、data
 * 3、生命周期函数 (包括其他函数)
 * 4、methods
 * 5、watch
 * 6、components
 * 7、config
*/
/**
 * components 内部写法示例
 * components = {
 *  ‘aaa-bbb’: AaaBbb,
 *  ‘bbb-ccc’: BbbCcc
 * }
 */

四、git版本控制规则

• 1、开发阶段

每个人开发各大板块都新建一个属于自己的分支进行开发，当中间插入某些跟当前分支无关的板块时，从master新建一个分支出来开发插入的板块。

• 2、发布测试阶段

将每个人的代码合并到releasing分支，解决完所有冲突后，合并到released分支，部署到测试环境或发布测试版小程序

• 3、发布生产阶段

将master主分支与released分支进行合并，部署到生产服务器。

/**
 *  有补充的可以自己写进来或者自己觉得比较合理的也可以提出来
 *  毕竟我们要统一一套属于自己团队的规范。
**/