看看这些被同事喷的JS代码风格你写过多少

let kpi = 4;  // 定义好了之后再也没用过function example() {    var a = 1;    var b = 2;    var c = a+b;    var d = c+1;    var e = d+a;    return e;}

let kpi = 4;  // 没用的就删除掉，不然过三个月自己都不敢删，怕是不是那用到了function example() {    var a = 1;    var b = 2;    return 2a+b+1;}

let fName = 'jackie'; // 看起来命名挺规范，缩写，驼峰法都用上，ESlint各种检测规范的工具都通过，But，fName是啥？这时候，你是不是想说What are you 弄啥呢？let lName = 'willen'; // 这个问题和上面的一样

  let firstName = 'jackie'; // 怎么样，是不是一目了然。少被喷了一次  let lastName = 'willen';

if (value.length < 8) { // 为什么要小于8，8表示啥？长度，还是位移，还是高度？Oh,my God!!    ....}

const MAX_INPUT_LENGTH = 8;if (value.length < MAX_INPUT_LENGTH) { // 一目了然，不能超过最大输入长度    ....}

let nameString;let theUsers;

let name;let users;

const address = 'One Infinite Loop, Cupertino 95014';const cityZipCodeRegex = /^[^,]+[,s]+(.+?)s*(d{5})?$/;saveCityZipCode(  address.match(cityZipCodeRegex)[1], // 这个公式到底要干嘛，对不起，原作者已经离职了。自己看代码  address.match(cityZipCodeRegex)[2], // 这个公式到底要干嘛，对不起，原作者已经离职了。自己看代码);

const address = 'One Infinite Loop, Cupertino 95014';const cityZipCodeRegex = /^[^,]+[,s]+(.+?)s*(d{5})?$/;const [, city, zipCode] = address.match(cityZipCodeRegex) || [];saveCityZipCode(city, zipCode);

name.jswindow.name = 'a';hello.jswindow.name = 'b';time.jswindow.name = 'c';  //三个文件的先后加载顺序不同，都会使得window.name的值不同，同时，你对window.name的修改了都有可能不生效，因为你不知道你修改过之后别人是不是又在别的说明文件中对其的值重置了。所以随着文件的增多，会导致一团乱麻。

如果你确实用很多的全局变量需要共享，你可以使用vuex,redux或者你自己参考flux模式写一个也行。

const MIN_NAME_LENGTH = 8;let lastName = fullName[1];if(lastName.length > MIN_NAME_LENGTH) { // 这样你就给你的代码成功的埋了一个坑，你有考虑过如果fullName = ['jackie']这样的情况吗？这样程序一跑起来就爆炸。要不你试试。    ....}

const MIN_NAME_LENGTH = 8;let lastName = fullName[1] || ''; // 做好兜底，fullName[1]中取不到的时候，不至于赋值个undefined,至少还有个空字符，从根本上讲，lastName的变量类型还是String，String原型链上的特性都能使用，不会报错。不会变成undefined。if(lastName.length > MIN_NAME_LENGTH) {    ....}其实在项目中有很多求值变量，对于每个求值变量都需要做好兜底。let propertyValue = Object.attr || 0; // 因为Object.attr有可能为空，所以需要兜底。但是，赋值变量就不需要兜底了。let a = 2; // 因为有底了，所以不要兜着。let myName = 'Tiny'; // 因为有底了，所以不要兜着。

function showFriendsList() {....} // 现在问，你知道这个返回的是一个数组，还是一个对象，还是true or false。你能答的上来否？你能答得上来我请你吃松鹤楼的满汉全席还请你不要当真。

function shouldShowFriendsList() {...}function isEmpty() {...}function canCreateDocuments() {...}function hasLicense() {...}

function plusAbc(a, b, c) {  // 这个函数的输出将变化无常，因为api返回的值一旦改变，同样输入函数的a，b,c的值，但函数返回的结果却不一定相同。        var c = fetch('../api');        return a+b+c;}

function plusAbc(a, b, c) {  // 同样输入函数的a，b,c的值，但函数返回的结果永远相同。        return a+b+c;}

page.getSVG(api, true, false); // true和false啥意思，一目不了然

page.getSVG({    imageApi: api,    includePageBackground: true, // 一目了然，知道这些true和false是啥意思    compress: false,})

function emlU(user) {    ....}

function sendEmailToUser(user) {    ....}

function sendEmailToClients(clients) {  clients.forEach(client => {    const clientRecord = database.lookup(client)    if (clientRecord.isActive()) {      email(client)    }  })}

function sendEmailToActiveClients(clients) {  //各个击破，易于维护和复用  clients.filter(isActiveClient).forEach(email)}
function isActiveClient(client) {  const clientRecord = database.lookup(client)  return clientRecord.isActive()}

for(i = 1; i <= 10; i++) { // 一看到for循环让人顿生不想看的情愫   a[i] = a[i] +1;}

let b = a.map(item => ++item) // 怎么样，是不是很好理解，就是把a的值每项加一赋值给b就可以了。现在在javascript中几乎所有的for循环都可以被map,filter,find,some,any,forEach等函数式编程取代。

if (a === 1) {    ...} else if (a ===2) {    ...} else if (a === 3) {    ...} else {   ...}

switch(a) {   case 1:           ....   case 2:           ....   case 3:           ....  default:       ....}Orlet handler = {    1: () => {....},    2: () => {....}.    3: () => {....},    default: () => {....}}
handler[a]() || handler['default']()

function foo() {  // code}

let foo = () => {  // code}

var message = 'Hello ' + name + ', it's ' + time + ' now'

var message = `Hello ${name}, it's ${time} now`

var data = { name: 'dys', age: 1 };var name = data.name;var age = data.age;
var fullName = ['jackie', 'willen'];var firstName = fullName[0];var lastName = fullName[1];

const data = {name:'dys', age:1};const {name, age} = data;   // 怎么样，是不是简单明了
var fullName = ['jackie', 'willen'];const [firstName, lastName] = fullName;

典型的 ES5 的类(function)在继承、构造和方法定义方面可读性较差，当需要继承时，优先选用 class。代码太多，就省略了。

class Animal {  constructor(age) {    this.age = age  }
  move() {    /* ... */  }}
class Mammal extends Animal {  constructor(age, furColor) {    super(age)    this.furColor = furColor  }
  liveBirth() {    /* ... */  }}
class Human extends Mammal {  constructor(age, furColor, languageSpoken) {    super(age, furColor)    this.languageSpoken = languageSpoken  }
  speak() {    /* ... */  }}

注：除了上述这些人为习惯之外，就像前面提到的，对于机械性的，你可以使用Babel、Eslint、Prettier这些工具来保证代码的格式一致。