javascript編程中一種常見的代碼壞味道：Pyramid of doom（金字塔厄運）

標籤：pyramid of doom   金字塔厄運   

Pyramid of doom說的是代碼嵌套層次太深，太多的代碼縮排，導致代碼橫向增長大於縱向增長。非常影響代碼的可讀性，因為我們看不清嵌套關係，很容易弄錯變數的範圍，大括弧多了或者少了等問題。

代碼1：if層次過深

bool conditionA = executeStepA();if (conditionA){    bool conditionB = executeStepB();    if (conditionB){        bool conditionC = executeStepC();        if (conditionC){            bool conditionD = executeStepD();    if (conditionD){...    }        }    }}

代碼2：複雜的ajax

$.ajax({    url: url1,    success: function(data){        $.ajax({            url: url2,            data: data,            success: function(data){                $.ajax({                    //...                });            }            });    }});

代碼3：過多的jquery回調

// Code uses jQuery to illustrate the Pyramid of Doom(function($) {  $(function(){    $("button").click(function(e) {      $.get("/test.json", function(data, textStatus, jqXHR) {        $(".list").each(function() {          $(this).click(function(e) {            setTimeout(function() {              alert("Hello World!");            }, 1000);          });        });      });    });  });})(jQuery);

很明顯上面這3段代碼看起來都非常的醜陋，通過一定的手段是可以去除這種代碼壞味道的。“ The Pyramid of Doom: A javascript Style Trap"這篇文章將代碼3最佳化成下面的樣子：

// Code uses jQuery(function($) {  function init() {    // Add onClick to buttons    $("button").click(getData);  }  function getData() {    $.get("/test.json", onSuccess);  }  function onSuccess(data, textStatus, jqXHR) {    $(".list").each(addListOnClick);  }  function addListOnClick(e) {    $(this).click(helloWorldTimeout);  }  function helloWorldTimeout() {    setTimeout(helloWorldAlert, 1000);  }  function helloWorldAlert() {    alert("Hello World!");  }  $(init);})(jQuery);

可以看到最佳化後的代碼：沒有那麼多的縮排和層次嵌套，雖然代碼縱向增長了，但是可讀性還是得到了改善。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

javascript編程中一種常見的代碼壞味道：Pyramid of doom（金字塔厄運）