前端代码规范

标签:未来   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

版权声明:完美者 发表于 2021-01-13 11:16:51。
转载请注明:前端代码规范 | 完美导航

暂无评论

暂无评论...