javascript编程中一种常见的代码坏味道：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);

可以看到优化后的代码：没有那么多的缩进和层次嵌套，虽然代码纵向增长了，但是可读性还是得到了改善。

版权声明：本文为博主原创文章，未经博主允许不得转载。