一、HTML | coderqmj的博客

# 一、HTML

使用语义化标签

HTML能使用语义化标签的，尽量使用语义化标签，避免整个文档都是div或者是p标签

<!-- bad -->
<div>
  <p></p>
</div>

<!-- good -->
<header></header>
<footer></footer>

属性顺序要求

HTML属性应该按照特定的顺序出现以保证易读性

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

语法

属性使用双引号，不要使用单引号
属性名全小写，使用中线（-）做分隔符

# 二、CSS

BEM命名原则

block：模块，名字单词间用-连接
element：元素，模块的子元素，以_与block连接
modifier：修饰，模块的变体，定义特殊模块，以--与block连接

/* 举个例子 */
.block__element {
}
.block--modifier {
}

有效使用CSS选择器

选择器嵌套应少于3级

/* bad */
.page .header .login #username input {
}

/* good */
#username input {
}

有效使用CSS选择器，应遵守以下规则

保持简单，不要嵌套过多复杂的选择器
通配符和属性选择器效率最低，需要匹配的元素最多，避免使用
不要使用类选择器和ID选择器修饰元素标签
避免CSS表达式

# 三、JavaScript

# 关于命名

普通命名使用小驼峰

let userName = 'coderqmj';

命名复数时需要加s，如一个存放很多名字的数组

let names = ['邱模建', '马云', '马化腾'];

每个常量都需命名，便于别人读懂含义

// good
const COL_NUM = 10
let row = Math.ceil(num / COL_NUM)

// bad
let row = Math.ceil(num / 10)

命名需要语义化，函数命名，一般需要加上动词前缀：

can判断是否可以执行某个动作
has判断是否含有某个值
is判断是否为某个值
get获取某个值
set设置某个值

# 关于函数

函数参数使用结构语法，函数参数越少越好，如果超过两个参数，要使用ES6结构语法，不用考虑参数顺序。

function foo({name, age, height}) {
  console.log(`你好，我的名字是${name}，今年${age}岁，身高是${height}m`)
}

foo({
  age: 18,
  name: '邱模建',
  height: 1.88
})

# 空行

以下情况需要空行：

变量声明之后
注释前（如果注释在文件第一行，则不需要）
文件最后保留一个空行

# 引号

外层单引号，内层双引号

# 括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// not good
if (condition) doSomething();

// good
if (condition) {
  doSomething();
}

# 不要写全局方法

会污染全局，团队开发中会造成安全隐患

# 四、React

# 基础规则

一个文件一个组件 ：虽然一个文件可以声明多个组件，但是最好不要这样做；推荐一个文件声明一个组件，并且也只导出一个文件。
函数式组件和类组件选择 ：如果定义的组件不需要props和state，建议将组件定义成函数组件，否则class组件

# React中的命名

组件名称：大驼峰
属性名称：React DOM使用小驼峰定义属性名称，和HTML属性名称的约定不一样

# JSX写法注意点

标签多行属性关闭标签要另起一行

// bad
<Component
  bar="bar"
  baz="baz" />

// good
<Component
  bar="bar"
  baz="baz" 
/>

组件跨行时，要使用括号包裹JSX标签

// bad
  render() {
    return <MyComponent className="long body" foo="bar">
             <MyChild />
           </MyComponent>;
  }

// good
  render() {
    return (
      <MyComponent className="long body" foo="bar">
        <MyChild />
      </MyComponent>
    );
  }

JSX语法应该使用以下对齐方式

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

// 不推荐
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />

JSX引号问题：JSX的属性都采用双引号，其他JS都使用单引号，因为JSX属性不能包含转义引号

// bad
<Foo bar='bar' />
    
<Foo style={{ left: "20px" }} />

// good
<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

# Redux代码规范

每个模块都有对应自己的reducer，通过combineReducer进行合并
异步请求代码使用redux-thunk，并且写在actionCreators中
redux直接采用redux hooks方式编写，不再使用connect

# 组件代码的顺序

// 1.类组件
class Example extends Component {
    // 静态属性
    static defaultProps = {}

    // 构造函数
    constructor(props) {
        super(props);
        this.state={}
    }

    // 声明周期钩子函数
    // 按照它们执行的顺序
    // 1. componentWillMount
    // 2. componentWillReceiveProps
    // 3. shouldComponentUpdate
    // 4. componentDidMount
    // 5. componentDidUpdate
    // 6. componentWillUnmount
    componentDidMount() { ... }

    // 事件函数/普通函数
    handleClick = (e) => { ... }

    // 最后，render 方法
    render() { ... }
}
                          
// 2.函数式组件
第三方/官方
自己配置的功能性
导入组件
本文件组件
组件内部state管理
redux的hooks代码
其他组件的hooks代码
其他逻辑代码
返回JSX代码

# 五、项目规范

文件夹，文件名统一小写，多个单词以连接符（-）连接；
JavaScript变量名称 小驼峰，常量全部大写字母，组件命名 大驼峰 ；
组件内部状态可以使用useState，useReducer；业务数据全部放在redux中管理；
函数组件内部按照以下顺序编写代码
- 组件内部state管理
- redux的hooks代码
- 其他组件的hooks代码
- 其他逻辑代码
- 返回JSX代码
每个模块都有对应自己的reducer
前端目录划分

├─public
└─src
    ├─assets
    │  ├─css
    │  ├─font
    │  └─img
    ├─common  // 放点常量，公共配置之类的 
    ├─components
    ├─pages
    ├─router
    ├─services
    ├─store
    └─utils

← 浏览器兼容性 CodeReview →