[编码规范]前端必须养成的 coding 习惯

企业项目实战 > 第一部分 > ES6 代码规范与基础回顾

[编码规范]前端必须养成的 coding 习惯

为什么要定义代码规范？

    一般来说在开发中每个人的代码习惯都不太一样, 这样就会导致代码风格不一致。而当前在一些小型甚至中小型创业型团队中, 完全没有代码规范, 以致于维护和修改 bug 的时候看别人的代码成为一种很难受的事情…
    这种情况尤其在前端开发中尤为明显。因为关于前端的开发规范到现在为止也没有行业权威标准, 基本上各大公司都有一套属于自己的标准, 而中小型公司则都是在开发中通过 eslint 进行约束。 但 eslint 终究无法规范一些方法与命名, 它只能简单地规范一些空格、换行或结束符号等，我们完全可以使用 prettierrc.json 来解决，但是各种命名规则与方法调用只能靠人力来检查。
    为了帮大家确认一套适应性较强的规范, 我在最近参考了一些大厂的规范, 经过比较, 发现 Airbnb 的标准貌似颇受推崇, 目前国内其它公司的标准基本都是参考这套标准整理而成。今天给大家稍微整理下，去除了一些不是很重要的内容，期望大家在以后的开发工作中形成一个良好的代码习惯。

命名规则

• 无论何时, 不要使用单字母来声明变量或函数, 它们的命名应当有一定的描述性
• 使用驼峰式来命名对象、函数和实例, 使用帕斯卡式命名构造函数或类
• 不要再使用"_"开头来定义私有属性, 因为这种约束没有意义, 另外, 也是因为在最新的 ECMA 中已经定义了私有属性修饰符：#

// #代表的是私有属性, 目前在chrome 浏览器中已经实现
class User {
   
  // 声明私有属性并赋值
  #id = 'xyz';
  constructor(name) {
   
    this.name = name;
  }
  getUserId() {
   
    // 内部可以打印
    console.log(this.#id);
    return this.#id;
  }
}
const tom = new User('tom');
// 外部不行的
console.log(tom.getUserId());

• 如果在你的函数或回调中找不到 this 了, 不要使用 self/that 来保存 this, 而是使用箭头函数

// bad
function foo() {
   
  const that = this;
  return function () {
   
    console.log(that);
  };
}

// good
function foo() {
   
  return () => {
   
    console.log(this);
  };
}

• 如果你的文件只导出一个类, 那么你的文件名应该与你的类名完全一致, 而在引用时也应该完全一致

class CheckBox {
   
  // ...
}
export default CheckBox;
import CheckBox from './CheckBox';

• 总是使用模组 (import/export) 而不是其他非标准模块系统。如果你的环境不支持那就想办法让它支持
• 不要使用通配符"*"来导出模块,

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import {
    es6 }