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){
...
}
}
}
}
$.ajax({
url: url1,
success: function(data){
$.ajax({
url: url2,
data: data,
success: function(data){
$.ajax({
//...
});
}
});
}
});
// 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);
// 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);
可以看到优化后的代码:没有那么多的缩进和层次嵌套,虽然代码纵向增长了,但是可读性还是得到了改善。