前端代码规范
通用
- 缩进两个空格
- 等号两边留有空格
- 文件名为 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
