1. 变量声明

  1. // 建议使用 let 和 const ；不要使用 var
  2. // bad
  3. var a = 1;
  4. // good
  5. let a = 1;
  7. // let 声明一般变量，const 声明常量,
  8. // 常量命名时使用全大写，单词直接用下短线 【_】 链接
  9. const PI = 3.14
  10. const CONSTANT_DATA = 10
  12. // 多个变量声明时
  13. // bad
  14. let a, b, c;
  15. // good
  16. let a;
  17. let b;
  18. let c;

2. 变量声明时，建议写清变量类型

  1. // bad
  2. let a = null;
  3. // good
  4. let a = [];

3. if… else… 和 switch

  1. // 在判断逻辑中判断条件属于同一类型时，活用 switch 代替 if else
  2. // bad
  3. if (value = 'a') {
  4.   ...
  5. } else if (value = 'b') {
  6.     ...
  7. } else if (value = 'c') {
  8.     ...
  9. }
  10.   ...
  11. // good
  12. switch (value) {
  13.   case 'a':
  14.       ...
  15.   case 'b':
  16.       ...
  17.   case 'c':
  18.       ...
  19.   ...
  20. }

4. 获取 dom 结点后如果重复使用，将获取 dom 操作用变量保存

  1. // bad
  2. document.getElementById('id').style.color = 'white';
  3. document.getElementById('id').style.background = 'white';
  4. // good
  5. let elm = document.getElementById('id');
  6. elm.style.color = 'white';
  7. elm.style.background = 'white';

5. 定时器函数的必要清除 (setInterval setTimeout)

  1. // bad
  2. setInterval(() => {
  3.     ...
  4. }, 1000)
  5. // good
  6. let timer = null
  7. ...
  8. if (timer != null) {
  9.     clearInterval(timer);
  10.   timer = null
  11. }
  12. timer = setInterval(() => {
  13.     ...
  14. }, 1000)

6. 对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写

  1. var ref = 'some value';
  3. // bad
  4. const atom = {
  5.   ref: ref,
  6.   value: 1,
  7.   addValue: function (value) {
  8.     return atom.value + value;
  9.   },
  10. };
  12. // good
  13. const atom = {
  14.   ref,
  15.   value: 1,
  16.   addValue(value) {
  17.     return atom.value + value;
  18.   },
  19. };

7. 使用默认值语法设置函数参数的默认值

  1. // bad
  2. function handleThings(opts) {
  3.   opts = opts || {};
  4. }
  6. // good
  7. function handleThings(opts = {}) {
  8.   // ...
  9. }

8. 静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号

  1. // bad
  2. const a = "foobar";
  3. const b = 'foo' + a + 'bar';
  5. // acceptable
  6. const c = `foobar`;
  8. // good
  9. const a = 'foobar';
  10. const b = `foo${a}bar`;

9. async/await 在循环中的使用

  1. // error
  2. const fn = () => {
  3.     forEach(async (item) => {
  4.     ...
  5.     await doSomething()
  6.     ...
  7.   })
  8. } 
  11. // success
  12. const fn = async () => {
  13.   for (let i = 0; i< length; i++) {
  14.         ...
  15.     await doSomething()
  16.     ...
  17.   }
  18. }           
  20. // 在for...of 和 while 循环中可以正常使用
  21. // 如果你想连续执行await调用，请使用for循环(或任何没有回调的循环)
  22. // 永远不要和forEach一起使用await，而是使用for循环(或任何没有回调的循环)

10. 代码中对于变量的值要做必要校验避免出现 unexpected bug

  1. csnyValidator = (rule, val, callback) => {
  2.     try {
  3.       const { getFieldValue } = this.props.form
  4.       // 这里要做以下校验 确保 val 是有意义的值再进行下面的逻辑
  5.       if (typeof val !== 'undefined') {
  6.         const timeDiff = moment().valueOf() - val.valueOf()
  7.         if (
  8.           timeDiff / (1000 * 3600 * 24 * 365) < 18 ||
  9.           timeDiff / (1000 * 3600 * 24 * 365) > 60
  10.         ) {
  11.           if (getFieldValue('zjlx') !== '01') {
  12.             callback('出生年月应在18-60岁之间！')
  13.           }
  14.           callback()
  15.         }
  16.         callback()
  17.       } else {
  18.         callback()
  19.       }
  20.     } catch (err) {
  21.       console.log('errrrrrrrr', err)
  22.       callback()
  23.     }
  24.   }
  25. // 备注：在使用 ant.design 中表单组件时，其中集成了表单的校验处理；在使用自定义校验规则 validator 时，
  26. // callback 必须被调用
  27. // callback 必须被调用
  28. // callback 必须被调用