前端代码整洁思考

前端代码整洁思考

平时工作没怎么细想，代码都是基于业务，能上就行，没时间也没精力去想那些东西，关于怎么把代码写的干净整洁，最近确实是不太忙，懂得都懂，通过思考总结了一点东西。

代码tab缩进

个人墙裂推荐2个空格，让代码看的更加紧凑好看。

import React from 'react';

function Demo() {
  return (
    <div></div>
  );
}

export default Demo;
1
2
3
4
5
6
7
8
9

代码的宽度

就是一个文件中，代码的最长度，这个最好也固定死，这样代码也会好看。

• 怎么固定死，本人有个技巧，桌面新建两个文件当看门的。
• 怎么看代码超出了呢，简单啊，编辑器下边有你没有滚动条。

关于注释

1. 注释最好和上一行有一行的间隔。
2. 并且长度不要太长，不超出编辑视图。
3. 建议页头写页面的详情开发信息。
4. 页体内，最好注释统一一种格式，要么全是 // 要么全是 /* */。
5. 如果逻辑复杂且注释比较多，可以写到 readme 文件里。

/**
 * 什么什么页面
 * @author somebody
 */
import React, {useState} from 'react';

function Demo() {
  
  // info data
  const [data, setData] = useState({})

  // 列表数据
  const [list, setList] = useState([])

  // 支付数据
  const [order, setOrder] = useState(null)

  return (
    <div>hallo</div>
  );
}

export default Demo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

关于解构或者组件参数过多

如果在 import、解构或者组件参数过多，建议使用多行模式

import {a, b, c, d} from "moduleA"

// 这么写比较好看,不是么 
import {
   a,
   b, 
   c, 
   d
} from "moduleA"

<Demo a={1}  b={2} c={3} />

<Demo 
 a={1}  
 b={2} 
 c={3}
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

关于组件

最好在当前目前下components文件，且在components中新建一个index.js 作为入口

/components
 /AudioControl
  /index.jsx
  /index.less
 /VideoControl
  /index.jsx
  /index.less
 /index.js
/index.jsx
/index.less
/const.js
/helper.js
1
2
3
4
5
6
7
8
9
10
11
12

使用

import {
  VideoControl,
  AudioControl,
} from "./component"
1
2
3
4

页面大的模块

如果是页面大的模块，比如是头部，或者尾部，就不适合叫做组件了，当然头部可继续拆组件，我一般是新建 index.header.js 表示从属关系，和入口同级

/index.jsx
/index.header.jsx
/index.footer.jsx

1
2
3
4

入口类组件推荐使用class组件

为啥推荐使用class组件，可以更好的处理复杂逻辑，错误边界，性能优化等

class Demo extends React.Component {
  
  
  componentDidMount() {
    
  }
  
  componentDidCatch(error, errorInfo) {
    
  }
  
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    
  }
  
  render() {
    return (
      <div>demo</div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

尽量不使用额外的库

增加额外的库，不仅要多install一个库，如果这个库不是太出名，还得花时间去看文档，不是么

hook的使用

不管是入口组件还是普通组件, 最好 useState 不要超过3个, useEffect尽量越少越好，最好就一个，否则逻辑复杂，不好维护。
也就是强调 单一职责 的原则。

import React, {useState, useEffect} from 'react';

function Demo() {

  // info data
  const [data, setData] = useState({})

  // some effect
  useEffect(() => {
    return () => {

    };
  }, []);

  return (
    <div>hallo</div>
  );
}

export default Demo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class组件分层

我把一个复杂的组件，抽离为5层，接口调用层，数据层，事件层，生命周期层，渲染层（入口层，主层）。不多说，上代码。

/**
 * 数据层
 * /baseClass/data.js
 */
import React from "react"
import {connect} from "react-redux";
import {INITIALSTATE} from "../config"

class Main extends React.Component {

  constructor(props) {
    super(props);
    this.state = INITIALSTATE;
  }

  // 数据处理和 getter
  get filterList(){
    return this.state.list.filter(item => item.num > 2)
  }

}


export default Main;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
 * api调用层
 * /baseClass/api.js
 */
import Base from "./data";

export default class BaseWithAPI extends Base {

  constructor(props) {
    super(props);
  }

  API_getData(){
     setTimeout(() => {
       this.setState({
         list: [1, 2, 3, 4]
       })
     }, 1000)
   }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**
 * 事件处理层
 * /baseClass/handlers.js
 */
import Base from "./api";

export default class extends Base {

  constructor(props) {
    super(props);
  }

   clickHandler(){
      this.setState((prevStates) => {
        return {
          age: prevStates.age + 1
        }
      })
   }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**
 * 生命周期层,对外的出口
 * /baseClass/index.js
 */
import Base from "./handers"

class AbstractView extends Base {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(1111)
  }

  // 优化渲染 or 使用pureComponent
  shouldComponentUpdate(nextProps, nextState, nextContext) {

  }

}

export default AbstractView;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/*
 * 入口层-渲染层
 */
import BaseComponent from "./baseClass"

class Work extends BaseComponent {
  render() {
    return (
      <div>
        {
          this.state.name
        }
      </div>
    );
  }
}

export default Work;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

事件驱动代替数据驱动

因为hook的加入，过分的强调副作用，但是js本事是基于事件驱动的，数据驱动不好维护，事件驱动很好理解的，晓得伐。

/**
 * 基于数据驱动的demo
 */
import React, {
  useState,
  useEffect
} from 'react';

function Demo() {

  // info data
  const [data, setData] = useState({});

  const [flag, setFlag] = useState({});

  // some effect
  useEffect(() => {
    // do something ...
  }, [flag]);

  return (
    <div>
      <button onClick={() => setFlag(true)}>
        update
      </button>
    </div>
  );
}

export default Demo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

和下边的对比，当数据过多时，数据依赖就会复杂，数据流动就会没那么容易预测，反而事件是最清晰的。

/**
 * 基于事件驱动的demo
 */
import React, {
  useState,
  useEffect
} from 'react';

function Demo() {

  // info data
  const [data, setData] = useState({});
  
  const clickHandler = () => {
     // do something...
  }

  return (
    <div>
      <button onClick={clickHandler}>
        update
      </button>
    </div>
  );
}

export default Demo;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写好文档,多总结

好记性不如烂笔头，代码写的再好，没有详尽的文档也是万万不行的。多总结学到的好东西，多一些沉淀。

多优化代码

开发业务的时候，肯定是效率第一，能完成工作就好，但是如果想有提升，那么就要对自己的老代码去想办法优化了，改抽离的抽离，分层的分层，改删的删，坚持久了总是会有收获的，就会知道自己代码的缺点，避免以后再犯。

学习好项目

从github拉几个好项目，跟着高手学着写，总是没错的。

养成好习惯，学以致用

自己总计的好东西，或者从别人那里学来的好东西，一定要用，并形成习惯。