嵌套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。 概要：

退出提前允許您從有限的心智堆棧中彈出東西。 :)

---

獲取無效的情況下閃開第一，要麼乾脆退出或 引發異常酌情放一個空行中出現，然後加入 的「真正的」體方法。我發現它更易於閱讀。

---

我經常在方法的開始幾個語句返回 「容易」的情況。