手把手教學——如何寫一手爛代碼

前言

老司機手把手教你寫一手爛代碼，話很少說，上代碼。

一、儘可能使用母語

Good 👍🏻

let mingzi = 'Allan';

Bad 👎🏻

let name = 'Allan';

二、三目運算越長越好

Good 👍🏻

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

Bad 👎

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

三、if嵌套要深

Good 👍🏻

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

Bad 👎🏻

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

四、代碼能寫一行儘可能不寫多行

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>

五、變量名要保持神祕

Good 👍🏻

const asdfgh = 18;

Bad 👎

const age = 18;

六、單詞儘可能要少

Good 👍🏻

let a = 18;

Bad 👎🏻

let age = 18;

七、儘可能不要使用模板字符串

Good 👍

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

Bad 👎

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

八、布爾值不要簡寫

Good 👍

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

Bad 👎

if (isValid) {
    // ...
}

九、變量類型自由「飛翔」

Good 👍

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

Bad 👎

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

十、回調的「形狀」要優雅

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));

十一、清除緩存方式要妙

Good 👍

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

十一、萬一沒保存成功呢

Good 👍

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

十二、使用 TypeScript 多寫 any

1三、eslint 全局 ignore

1四、單元測試真的沒啥用

1五、代碼中少寫註釋

Tobe continue...