嵌套if语句vs函数退出

Question

我一直在写if语句，只要我在大学就读我的第一个软件类，最近我的同事已经引入了一种略有不同的方法来处理与出口而不是如果声明包装。我不确定哪种方法更好，希望听到一些意见。

如何我写的东西（方案1）：

function showLikesPopup($th) { 
 
    if ($th.find(".liked-times").text() !== "0") { 
 
     var $li = $th.parents(".comment-like"); 
 
     if (!$li.find(".liked").length) { 
 
      var comment_id = $th.parents(".ci").data("comment-id"); 
 
      var application_id = $th.parents(".ci").data("application-id"); 
 
      var get_likes_url = url_to_current_unique + "/comments_module/get_comment_likes"; 
 
      var aParams = {comment_id:comment_id,application_id:application_id}; 
 
      if(!get_likes_request_started) { 
 
       get_likes_request_started = true; 
 
       ajaxRequest(
 
        get_likes_url, 
 
        aParams, 
 
        function (response) { 
 
         $li.append(response.data.html); 
 
         $li.find(".liked").show(); 
 
         get_likes_request_started = false; 
 
        } 
 
       ); 
 
      } 
 
     } 
 
     $li.find(".liked").show(); 
 
    } 
 
}

如何我的团队建议这被写入（选项2）：

function showLikesPopup($th) { 
 
    if ($th.find(".liked-times").text() === "0") { 
 
     return; 
 
    } 
 

 
    var $li = $th.parents(".comment-like"); 
 
    if ($li.find(".liked").length) { 
 
     $li.find(".liked").show(); 
 
     return; 
 
    } 
 

 
    if (get_likes_request_started) { 
 
     return; 
 
    } 
 
    var comment_id = $th.parents(".ci").data("comment-id"); 
 
    var application_id = $th.parents(".ci").data("application-id"); 
 
    var get_likes_url = url_to_current_unique + "/comments_module/get_comment_likes"; 
 
    var aParams = {comment_id:comment_id,application_id:application_id}; 
 
    get_likes_request_started = true; 
 
    ajaxRequest(
 
     get_likes_url, 
 
     aParams, 
 
     function (response) { 
 
      $li.append(response.data.html); 
 
      $li.find(".liked").show(); 
 
      get_likes_request_started = false; 
 
     } 
 
    ); 
 
}

请投选项1或2？谢谢你们，我知道这两种方式都可以工作，但在我承诺开始使用这种新风格之前，我想确保它是长期的良好实践。

Answer 1

这两种方法都有问题，并且这两种方法都表明太多的逻辑可能会被打包到一个函数中。

如果我必须做两个之一，我会嵌套if s。 I 讨厌从一个函数有多个返回点。它在解决问题时只会造成混乱。

Answer 2

jQuery因杂乱而闻名，只是时间问题，直到它无法工作。也许看看像angular或React.js这样的js框架来帮助代码管理和布局。

您可以将某些功能分离出来以便清理代码。

没有看到更多的代码库，知道最适合您的案例的风格很棘手。

// returns number of likes 
 
function numLikes($el){ 
 
    return +$el.find(".liked-times").text(); 
 
} 
 

 
// update liked visibility 
 
// returns true on success 
 
function updateLiked($el){ 
 
    var $li = $el.parents(".comment-like"); 
 
    if ($li.find(".liked").length) { 
 
     $li.find(".liked").show(); 
 
     return true; 
 
    } 
 
} 
 

 
// Ajax function 
 
// - has global get_likes_request_started 
 
// so can only be ran once 
 
var get_likes_request_started = false; 
 
function doLikesAjax($el){ 
 
    if (get_likes_request_started) { 
 
     return; 
 
    } 
 
    get_likes_request_started = true; 
 
    
 
    var $li = $el.parents(".comment-like"); 
 
    var get_likes_url = url_to_current_unique + "/comments_module/get_comment_likes"; 
 

 
    var comment_id = $el.parents(".ci").data("comment-id"); 
 
    var application_id = $el.parents(".ci").data("application-id"); 
 
    
 
    var aParams = { 
 
     comment_id: comment_id, 
 
     application_id: application_id 
 
    }; 
 
    
 
    ajaxRequest(
 
     get_likes_url, 
 
     aParams, 
 
     function (response) { 
 
      $li.append(response.data.html); 
 
      $li.find(".liked").show(); 
 
      get_likes_request_started = false; 
 
     } 
 
    ); 
 
} 
 

 
function showLikesPopup($th) { 
 
    if (numLikes($th) === 0 || updateLiked($th)) { 
 
     return; 
 
    } 
 

 
    doLikesAjax($th); 
 
}

ES6版本

// returns number of likes 
 
    const numLikes = ($el) => { 
 
     return +$el.find(".liked-times").text(); 
 
    } 
 

 
    // update liked visibility 
 
    // returns true on success 
 
    const updateLiked = ($el) => { 
 
     const $liked = $el.parents(".comment-like").find(".liked"); 
 
     if ($liked.length) { 
 
      $liked.show(); 
 
      return true; 
 
     } 
 
    } 
 

 
    // Ajax function 
 
    // - has global get_likes_request_started 
 
    // so can only be ran once 
 
    let get_likes_request_started = false; 
 
    const doLikesAjax = ($el) => { 
 
     if (get_likes_request_started) { 
 
      return; 
 
     } 
 
     get_likes_request_started = true; 
 
     
 
     const $ci = $el.parents(".ci"); 
 
     const comment_id = $ci.data("comment-id"); 
 
     const application_id = $ci.data("application-id"); 
 
     
 
     
 
     ajaxRequest(
 
      `${url_to_current_unique}/comments_module/get_comment_likes`, 
 
      { 
 
       comment_id, 
 
       application_id 
 
      }, 
 
      (response) => { 
 
       const $li = $el.parents(".comment-like"); 
 
       $li.append(response.data.html); 
 
       $li.find(".liked").show(); 
 
       get_likes_request_started = false; 
 
      } 
 
     ); 
 
    } 
 

 
    const showLikesPopup = ($th) => { 
 
     if (numLikes($th) === 0 || updateLiked($th)) { 
 
      return; 
 
     } 
 

 
     doLikesAjax($th); 
 
    }

Answer 3

我要坚持选项1，主要用于可读性和可维护性：

1）嵌套if的层次结构提供了一个易于识别的视觉提示，以指示代码各个部分的关系。通过能够在缩进中看到这种关系，对于我来说，更容易掌握自己在流程中的位置。

2）它对你的逻辑范围有一些限制。 。 。通过让每次检查都在函数的“主要级别”上进行，您无法有效地在返回点“链”开始之前和之后出现任何“公共”逻辑。

例如，如果您需要在变量的最终显示中进行变量值的设置，无论在流程中使用哪种计算方式（使用Option 2样式），都需要包含该逻辑在链中的多个位置，确保每个return点都应用“通用”逻辑。在选项1样式中，您可以在顶部if关闭后简单地将该步骤放在最后，并且每次都运行该步骤。或者，您可以使用多个函数将代码分解为“通用”逻辑和“决策树”逻辑，但这可能会导致许多只存在的函数，因为编码的限制样式。无论哪种方式，您都在寻找可避免的无关代码，这会增加维护成本。

Answer 4

有人讨论过很多次：onetwothreefour。 概要：

退出提前允许您从有限的心智堆栈中弹出东西。 :)

---

获取无效的情况下闪开第一，要么干脆退出或 引发异常酌情放一个空行中出现，然后加入 的“真正的”体方法。我发现它更易于阅读。

---

我经常在方法的开始几个语句返回 “容易”的情况。