标签：未来   erro   number   表达   filter   require   color   构造函数   文件名   

通用

• 缩进两个空格
• 等号两边留有空格
• 文件名为  my-component
• 组件名

React

• 文件名：帕斯卡命名 MyComponents
• ESlint  

  <Foo
    superLongParam="bar"
    anotherSuperLongParam="baz"
  />

  <Foo bar="bar" />  // 能放一行的放一行

  // 多行属性采用缩进
  <Foo
    superLongParam="bar"
    anotherSuperLongParam="baz"
  >
    <Quux />
  </Foo>

  //JSX的属性都采用双引号，其他的JS都使用单引号：jsx-quotes。
  // bad
  <Foo bar=‘bar‘ />
  
  // good
  <Foo bar="bar" />
  
  // bad
  <Foo style={{ left: "20px" }} />
  
  // good
  <Foo style={{ left: ‘20px‘ }} />

  //始终在自闭和标签前添加一个空格
  <Foo />

  //属性名称始终使用驼峰命名法。
  // bad
  <Foo
    UserName="hello"
    phone_number={12345678}
  />
  
  // good
  <Foo
    userName="hello"
    phoneNumber={12345678}
  />

  //当属性值等于true的时候，省略该属性的赋值
  // good
  <Foo
    hidden
  />

  //在 render 方法中事件的回调函数，应该在构造函数中进行bind绑定。 eslint: react/jsx-no-bind。
  //为什么这样做? 在 render 方法中的 bind 调用每次调用 render 的时候都会创建一个全新的函数。
  // bad
  class extends React.Component {
    onClickDiv() {
      // do stuff
    }
  
    render() {
      return <div onClick={this.onClickDiv.bind(this)} />
    }
  }
  
  // good
  class extends React.Component {
    constructor(props) {
      super(props);
  
      this.onClickDiv = this.onClickDiv.bind(this);
    }
  
    onClickDiv() {
      // do stuff
    }
  
    render() {
      return <div onClick={this.onClickDiv} />
    }

  //怎么定义propTypes, defaultProps, contextTypes等
  import React, { PropTypes } from ‘react‘;
  
  const propTypes = {
    id: PropTypes.number.isRequired,
    url: PropTypes.string.isRequired,
    text: PropTypes.string,
  };
  
  const defaultProps = {
    text: ‘Hello World‘,
  };
  
  class Link extends React.Component {
    static methodsAreOk() {
      return true;
    }
  
    render() {
      return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
    }
  }
  
  Link.propTypes = propTypes;
  Link.defaultProps = defaultProps;
  
  export default Link;

Vue

一、Vie编码基础

程序员写好看的代码，不亚于写一行好看的字
好看的代码总是让人心旷神怡，
不好，不规范的代码，让人看了想说mmp，
那我们就来学习一下规范的代码怎么写的吧

以下来自B站的学习视频：前端必备-阿里大厂前端开发规范！

vue项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）中的A规范为基础

(一) 组件规范

1、组件名为多个单词

组件名应该始终是多个单词的，且命名规范为 KebabCase格式

这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

正例：

export default {
	name: ‘TodoItem‘,
    ...}

反例：

export default {
  name: ‘Todo‘,
  // ...}Vue.component(‘todo‘, {
  // ...})

2、组件名称为 pascal-case 格式

正例：

my-component.vue

反例：

myComponent.vue

3、为基础文件名为 base开头，使用完整单词

正例：

base-button.vue

反例：

MyButton.vue

4、和父组件紧密契合的子组件以父组件名为前缀名

父组件：todo-list.vue

正例：

todo-list-item.vue
todo-list-button.vue

反例：

todoItem.vue

5、在 template 模板中使用组件，应使用 PascalCase 模式，并且使用自闭合组件

正例：

<!-- 在单文件组件和字符串模板中 --><MyComponent/>
    <!-- 在 DOM 模板中 或者 在所有地方 --><my-component></my-component>

反例：

<!-- 在单文件组件和字符串模板中 --><myComponent/>

6、组件的 data 必须是一个函数。

正例：

// In a .vue fileexport default {
  data () {
    return {
      foo: ‘bar‘
    }
  }}

反例：

export default {
  data: {
    foo: ‘bar‘
  }}

7、Props定义应该尽量详细

• 命名：使用cameCase驼峰命名

• 必须指定类型

• 必须加上注释，表明其含义

• 必须加上require或者 default，两者二选一

• 如果业务需要，必须加上 validator验证

正例：

props: {
	// 组件状态，用于控制组件的颜色
    status: {
		type: String,
        required: true,
        validator: function (value) {
			return {
				‘succ‘,
                ‘info‘,
                ‘error‘
            }.indexOf(value) !== -1
        }
    }
}

8、为组件样式设置作用域

写CSS样式时，加上 作用域 scope

正例：

<stype scoped>
    .btn-close {
		font-size: 16px;
    }
</style>

9、如果特性元素过多，应主动换行

正例：

<MyConponent foo="a" bar="b"
             baz="z" />

(二) 模板中使用简单的表达式

组件模板中应该只包含简单的表达式，如果有复杂的表达式，应该使用计算属性或法

正例：

<!-- 在模板中 -->
{{ normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(‘ ‘).map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(‘ ‘)
  }
}

(三) 指令使用缩写形式

指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

(四) 标签顺序保持一致

<template>...</template>
<script> ... </script>
<style> ... </style>

(五) script标签内部解构顺序

components --> props --> data --> computed --> watch --> filter --> 钩子函数 --> methods

前端代码规范

标签：未来   erro   number   表达   filter   require   color   构造函数   文件名   

原文地址：https://www.cnblogs.com/it-Ren/p/14265085.html