前端代码规范

代码命名与缩写

• 缩进，统一采用长度为4的制表符。

• 变量名，参数名，方法名，统一使用lowerCamelCase风格。

  • [正确] isFlag / startTime / handleSave()
    [错误] isflag / starttime / handlesave()

• 类名使用UpperCamelCase风格。

  • [正确] UserDo / SearchTitle
    [错误] userDo / searchtitle

• 常量命名全部大写，单词间以下划线隔开，以语义表达清洗为第一要义，切勿偷懒省略或简写。

  • [正确] MAX_USER_COUNT
    [错误] MAX_COUNT

• 接口名统一以api开头，后续方法名使用lowerCamelCase风格

  • [正确] apigetList()
    [错误] apiGetList()

• 严禁使用中英文，及拼音混合的方式命名，国际通用名词除外

  • [正确] cat	 / getList()	/ taobao/ Beijing
    [错误] xiaomao / getliebiao()

• 条件，循环语句

  • [正确]
    if( code == 200 ) {
    ///
    } else if( code == 300 ) {
    ///
    } else {
    //
    }
    [错误]
    if(code==200)
    {
    ///
    }
    else if(code==300)
    {
    ///
    }
    else
    {
    ///
    }
    
    [正确]
    for( let i = 0 ; i < 10 ; i ++ ) {
        ///
    }
    [错误]
    for(let i=0;i<10;i++)
    {
    
    }

• 文件夹与文件名

  • 文件名统一为功能模块含义；
  • 首页统一为index.js文件；
  • 代码组件化，必须建立单独的文件夹，然后在新文件夹下建立components文件夹。

• html的类名和id名

  • 含义统一采用中横线的方式；

    • [正确] nav-button
      [错误] navbutton

• Vue篇

  • 组件数据，组件的data必须是一个函数

    •   [正确]
        export default {
          data() {
            return {
              foo: 'bar',
            };
          },
        };
        [错误]
        export default {
          data: {
            foo: 'bar',
          },
        };

  • 单文件组件文件名称，单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

    • [正确] my-component.vue / MyComponent.vue
      [错误] mycomonent.vue / myComponent.vue

  • 紧密耦合的组件名，和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

    • [正确]
      components/
      |- TodoList.vue
      |- TodoListItem.vue
      └─ TodoListItemButton.vue
      [错误]
      components/
      |- TodoList.vue
      |- TodoItem.vue
      └─ TodoButton.vue

  • 自闭合组件，在单文件组件中没有内容的组件应该是自闭合的。

    • [正确] <my-component />
      [错误] <my-component></my-component>

  • Prop名大小写，在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case。

    • [正确]
      export default {
        props: {
          greetingText: String,
        },
      };
      [错误]
      export default {
        props: {
          'greeting-text': String,
        },
      };
      
      [正确]
      <welcome-message greeting-text="hi" />
      [错误]
      <welcome-message greetingText="hi" />

  • 指令缩写，指令缩写，用 : 表示 v-bind: ，用 @ 表示 v-on:

    • [正确] <input :value="value" @input="onInput" />
      [错误] <input v-bind:value="value" v-on:input="onInput" />

代码注释

• 变量，对于特殊或不熟悉的变量含义，在变量的右侧注释，保持变量纵向一致

  • [正确] 
    data() {
    	return {
    		initLoading: true,		// 页面初始化加载标记(true:显示加载; false:隐藏加载)
    		user: {					// 用户信息
    
    		}
    	};
    }
    [错误]
    data() {
    	return {
    		initLoading: true,		// 页面初始化加载标记(true:显示加载; false:隐藏加载)
    		user: {		// 用户信息
    
    		}
    	};
    }

• api

  • 入参，注明所属类型，返回值，含义；

  • api函数，注明api含义，接口编号，编写人，时间，版本。

    • [正确]
      /**
       * [50014]获取推销员列表
       * @version	v1.0.00
       * @author	Wan Yanlong		2020年8月13日 15点45分
       * @param	{Object}		params				查询条件
       * @param	{Number}		params.page			[选填]查询第几页
       * @param	{Number}		params.limit		[选填]每页显示条件
       * @param	{String}		params.mobile		[选填]推销员手机号码
       * @param	{String}		params.name			[选填]推销员名称
       * @returns	{object}							返回结果
       */
      export function apiGetList(params) {
      	return request({
      		url: 'GetSalesmanList',
      		method: 'GET',
      		params: {
      			Token: '',
      			PageSize: params.limit || 10,
      			PageNum: params.page || 1,
      			Mobile: params.mobile || '',
      			Name: params.name || ''
      		}
      	});
      }
      [错误]
      /**
       * []获取推销员列表
       * @version	v1.0.00
       * @author	Wan Yanlong		2020年8月13日 15点45分
       * @returns	{object}							返回结果
       */
      export function apiGetList(params) {
      	return request({
      		url: 'GetSalesmanList',
      		method: 'GET',
      		params: {
      			Token: '',
      			PageSize: params.limit || 10,
      			PageNum: params.page || 1,
      			Mobile: params.mobile || '',
      			Name: params.name || ''
      		}
      	});
      }

• 函数，统一在函数的上一行进行注释，形参注释在函数下一行注释

  • [正确] 
    // 按时间搜索
    setTimeType(type){
    	//查询时间范围类型 (0:自定义日期范围; 1:今日; 2:本周; 3:本月; 4:本年)
    	this.isDisabledDate = true;
    	this.timeType = type;
    	if(type == '0'){
    		this.isDisabledDate = false;
    	}
    }
    [错误]
    // 按时间搜索
    setTimeType(type){	//查询时间范围类型 (0:自定义日期范围; 1:今日; 2:本周; 3:本月; 4:本年)
    	this.isDisabledDate = true;
    	this.timeType = type;
    	if(type == '0'){
    		this.isDisabledDate = false;
    	}
    }

代码编写顺序与排版

（参考vantUi）

• Props顺序，标签的 Props 应该有统一的顺序，依次为指令、属性和事件。

  • <my-component
      v-if="if"
      v-show="show"
      v-model="value"
      ref="ref"
      :key="key"
      :text="text"
      @input="onInput"
      @change="onChange"
    />

• 组件选项的顺序，组件选项应该有统一的顺序。

  • export default {
      name: '',
      mixins: [],
      components: {},
      props: {},
      data() {},
      computed: {},
      watch: {},
      created() {},
      mounted() {},
      destroyed() {},
      methods: {},
    };

• 组件选项中的空行，组件选项较多时，建议在属性之间添加空行。

  • export default {
      computed: {
        formattedValue() {
          // ...
        },
    
        styles() {
          // ...
        },
      },
    
      methods: {
        onInput() {
          // ...
        },
    
        onChange() {
          // ...
        },
      },
    };

• 单文件组件顶级标签的顺序，单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。

  • <template>
      ...
    </template>
    
    <script>
      /* ... */
    </script>
    
    <style>
      /* ... */
    </style>