代码规范文档

1、文件夹命名规范

1.1 页面命名

使用小写开头的驼峰

1.2 组件命名

使用大写开头的驼峰

1.3 方法命名

使用小写开头的驼峰

2、CSS规范

2.1 BEM 命名规范

Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。

2.2 BEM 命名约定的模式

.block {}
.block__element {}
.block--modifier {}

2.3 示例

<div class="article">
    <div class="article__body">
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

2.4 目前项目中使用的规范

模块最外层使用文件夹相关的字段命名，保证模块的class是唯一的；

3、注释规范

3.1 函数名使用 / 注释文字 /， 函数内部使用 // 注释文字；

3.2 ts类型注释 使用 / 注释文字 /

4、JS规范

4.1 使用 === 和 !== 而不是 == 和 !=

       严格判断会检查对象的类型，避免隐式的类型转换

0 == false // true
0 == '0' // true
0 === false // false
0 === '0' // false

4.2 条件简写

// bad
if (collection.length > 0) {
  // ...
}
// good
if (collection.length) {
  // ...
}

// bad
const hasValue = value !== NONE ? true : false;
const hasProducts = products.length > 0 ? true : false;
// good
const hasValue = value !== NONE;
const hasProducts = products.length > 0;

// bad
const hasValue = value ? true : false;
const hasProducts = products.length ? true : false;
// good
const hasValue = Boolean(value);

4.3 布尔值转换

const age = 0
// bad
const hasAge = new Boolean(age)
// good
const hasAge = Boolean(age)
// good
const hasAge = !!age

4.4 使用字符串模板

const name = 'lucy'
// bad
const greetings = 'Hello ' + name
// good
const greetings = `Hello ${name}`

4.5 函数默认值

// bad
function handleThings(opts) {
  opts = opts || {}
  // ...
}
// good
function handleThings(opts = {}) {
  // ...
}

4.6 使用箭头函数

// bad
[1, 2, 3].map(function (x) {
  this.count += x
  return x * x
}, this)
// good
[1, 2, 3].map(x => {
  this.count += x
  return x * x
})

4.7 如果函数体只有一行返回语句，省略花括号和 return

// bad
[1, 2, 3].map((x) => {
  return x * x
})
// good
[1, 2, 3].map(x => x * x)

4.8 多层if判断优化

// bad
if (month === A) {
    const m = dd;
  const s= hh;
  ......
  ......
} else if(month === B){
  const j = dd;
  const k= hh;
  ......
  ......
}
// good
const doSomethingA = (param) => {
  const m = dd;
  const s= hh;
  ......
  ......
}
const doSomethingB = (param) => {
  const j = dd;
  const k= hh;
  ......
  ......
}
if (month === A) {
    doSomethingA(param);
} else if(month === B){
  doSomethingB(param);
}

4.9 错误提前返回

// bad
const verifyForm = async (val) => {
  if(val.trim() !== '') {
     const id = val.id;
     ......
  } else {
    console.log('请输入id');
  }
}
// good
const verifyForm = async (val) => {
  if(val.trim() !== '') {
    console.log('请输入id');
      return;
  }
  const id = val.id;
  ......
}

4.10 禁止大函数

5、进阶(高标准）

5.1 单一数据源

const persons = [{name: 'liu', age: 18}, {name: 'wang', age: 22}];
// bad
const newPersions = persons.map(k => {
  k.hobby = 'swimming';
  return k;
});
// good
const newPersions = persons.map(k => ({
    ...k,
    hobby: 'swimming'
}));

// bad
function addPersions(persions) {
  persions.push({
    name: '吴',
    age: 20
  });
}
addPersions(persons);
// good
function addPersions(persions) {
  return [...persions, {
    name: '吴',
    age: 20
  }]
}
addPersions(persons);

const persons = [{name: 'liu', age: 18}, {name: 'wang', age: 22}];
// bad
function sortPersions(persions) {
  // sort有副作用，会改变原数组
  const sortArr = persions.sort((a, b) => b.age - a.age);
  return sortArr;
}
sortPersions(persons);
// good
function sortPersions(persions) {
  // sort有副作用，会改变原数组
  const sortArr = [...persions].sort((a, b) => b.age - a.age);
  return sortArr;
}
sortPersions(persons);

// very bad
const prev = { coffee: 1 };
const next = Object.assign(prev, { pizza: 42 });
// bad
const prev = { coffee: 1 };
const next = Object.assign({}, prev, { pizza: 42 });
// good
const prev = { coffee: 1 };
const next = { ...prev, pizza: 42 };

5.2 单项数据流

import React from 'react';
class Parent extends React.Component {
  state = {
    list: [3, 4, 5],
  };
  handleAdd = (value) => {
    const list = this.state.list;
    this.setState({ list: [...list, value] });
  };
  render() {
    return (
      <div>
        <Child list={this.state.list} onAdd={this.handleAdd} />
      </div>
    );
  }
}
class Child extends React.Component {
  render() {
    const { list, onAdd } = this.props;
    return (
      <div>
        {list.map((item, index) => {
          return <div key={index}>{item.name}</div>;
        })}
        <button onClick={() => onAdd(6)} />
      </div>
    );
  }
}

5.3 纯函数

  1. 相同的输入一定会返回相同的输出
  2. 永远不能修改传进去的值

7、作业

数组中有哪些方法会改变原始数据？