手把手教学——如何写一手烂代码

前言

老司机手把手教你写一手烂代码，话不多说，上代码。

1、尽量使用母语

Good 👍🏻

let mingzi = 'Allan';

Bad 👎🏻

let name = 'Allan';

2、三目运算越长越好

Good 👍🏻

const foo = maybe1 > maybe2 ? "bar" : value1 > value2 ? "baz" : null;

Bad 👎

const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

3、if嵌套要深

Good 👍🏻

if(condition1) {
    if(condition2) {
        if(condition3) {
            if(condition4) {
                ...
            }
        }
    }
}

Bad 👎🏻

if(condition1 && condition2) {
    ...
}

4、代码能写一行尽量不写多行

Good 👍🏻

<div :class="{'not-join': status === 'allow' && !item.is_select}" v-for="(item, index) in list" :key="index" @click="check(item)" class="activity-item"></div>

Bad 👎🏻

<div
    :class="{'not-join': status === 'allow' && !item.is_select}"
    v-for="(item, index) in list"
    :key="index"
    @click="check(item)"
    class="activity-item"
></div>

5、变量名要保持神秘

Good 👍🏻

const asdfgh = 18;

Bad 👎

const age = 18;

6、单词尽量要少

Good 👍🏻

let a = 18;

Bad 👎🏻

let age = 18;

7、尽量不要使用模板字符串

Good 👍

const sayHi = function (name) {
  return 'How are you, ' + name + '?';
};

Bad 👎

const sayHi = function (name) {
  return `How are you, ${name}?`;
};

8、布尔值不要简写

Good 👍

if (isValid === true) {
    // ...
}

Bad 👎

if (isValid) {
    // ...
}

9、变量类型自由“飞翔”

Good 👍

let color = '';
if(condition1) {
    color = {a: 'red'};
} else {
    color = ['red', 'yellow', 'blue'];
}

Bad 👎

let color = '';
if (condition1) {
    color = 'red';
} else {
    color = 'yellow';
}

10、回调的“形状”要优雅

Good 👍

$(".disappear").click(function(){
  $("#row20").animate({ "opacity": "0" },
    100,
    function(){$("#row19").animate({ "opacity": "0" },
      100,
      function(){$("#row18").animate({ "opacity": "0" },
        100,
        function(){$("#row17").animate({ "opacity": "0" },
          100,
          function(){$("#row16").animate({ "opacity": "0" },
            100,
            function(){$("#row15").animate({ "opacity": "0" },
              100,
              function(){$("#row14").animate({ "opacity": "0" },
                100,
                function(){$("#row13").animate({ "opacity": "0" },
                  100,
                  function(){$("#row12").animate({ "opacity": "0" },
                    100,
                    function(){$("#row11").animate({ "opacity": "0" },
                      100,
                      function(){$("#row10").animate({ "opacity": "0" },
                        100,
                        function(){$("#row9").animate({ "opacity": "0" },
                          100,
                          function(){$("#row8").animate({ "opacity": "0" },
                            100,
                            function(){$("#row7").animate({ "opacity": "0" },
                              100,
                              function(){$("#row6").animate({ "opacity": "0" },
                                100,
                                function(){$("#row5").animate({ "opacity": "0" },
                                  100,
                                  function(){$("#row4").animate({ "opacity": "0" },
                                    100,
                                    function(){$("#row3").animate({ "opacity": "0" },
                                      100,
                                      function(){$("#row2").animate({ "opacity": "0" },
                                        100,
                                        function(){$("#row1").animate({ "opacity": "0" },
                                          100)})})})})})})})})})})})})})})})})}

Bad 👎

fetch(url)
  .then(response => {
    return response.json().then(data => {
      if (response.ok) {
        return data;
      } else {
        return Promise.reject({status: response.status, data});
      }
    });
  })
  .then(result => console.log('success:', result))
  .catch(error => console.log('error:', error));

11、清除缓存方式要妙

Good 👍

// 清除缓存最快的方法，没有之一
<header>
   <a href="javascript:alert('清除成功！')">清除缓存</a>
</header>

11、万一没保存成功呢

Good 👍

for(let i = 0; i < 10; i++) {
    this.save();
}

12、使用 TypeScript 多写 any

13、eslint 全局 ignore

14、单元测试真的没啥用

15、代码中少写注释

Tobe continue...