清理後的代碼中斷

Question

我是JavaScript新手，我正在學習如何使我的代碼更具可讀性並遠離內聯函數。我有一個代碼循環通過JSON數組的註釋，然後將註釋附加到DOM。當它「雜亂」時，它會起作用，然後突然間我會嘗試清理它，並由於某種原因停止工作。

任何人都可以指出爲什麼？這就是「亂」之一：

var myCommentArray = [ 
    { 
     _id: "888888888888888888", 
     index: 1, 
     name: "Perez", 
     message: "First Comment .......", 
     subject: "enim officias", 
     replies: [ // notice this comment has replies (just 1 but it is still an array) 
      { 
       _id: "77777777777777777777", 
       index: 0, 
       name: "Reply to First Comment Ines for Perez", 
       message: "...", 
       subject: "reply subject consequat" 
      } 
     ] 
    }, 
    { 
     _id: "999999999999", 
      index: 0, 
      name: "Shelton", 
      message: "2nd Comment....a", 
      subject: "enim irure", 
      replies: null // notice this comment has no replies and as such is null. this is better than an empty array 
    }, 
    { 
     _id: "666666666666666666", 
     index: 2, 
     name: "Perez", 
     message: "3rd Comment.......", 
     subject: "enim officias", 
     replies: [ 
      { 
       _id: "55555555555555555555", 
       index: 0, 
       name: "1st Reply to 3rd Comment", 
       message: "...", 
       subject: "reply subject consequat" 
      }, 
      { 
       _id: "44444444444444444444", 
       index: 1, 
       name: "2nd Reply to 3rd Comment", 
       message: "...", 
       subject: "reply subject consequat" 
      } 
     ] 
    } 
]; 

var stringedArray = JSON.stringify(myCommentArray); 
var parsedCommentArray = JSON.parse(stringedArray); 

$.each(parsedCommentArray, function (i, val) { 
    var currentComment = parsedCommentArray[i]; 
    var commentsFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' + 
     '</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' + 
     currentComment.subject + '</h3> <div class="comment-meta">By ' + currentComment.name + '</div> <div class="comment-body"> <p>' 
    + currentComment.message + '</p><a href="#" class="btn btn-gray more reply">' + 
     '<i class="fa fa-reply"> </i> Reply </a> </div> </div>'; 
    $('.comments').append(commentsFormat); 
}); 

這是「乾淨」的一個：

sabio.page.startUp = function() { 
    var myCommentArray = sabio.page.getMyArray(); 

    var obj = JSON.parse(myCommentArray); 

    $.each(obj, sabio.page.proccessComments); 

    $("#submissionButton").on('click', sabio.page.handlers.onSubmit); 

} 


sabio.page.proccessComments = function (i, currentComment) { 

    var commentsFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' + 
     '</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' + currentComment.subject + '</h3> <div class="comment-meta">By ' + currentComment.name + '</div> <div class="comment-body"> <p>' + currentComment.message + '</p><a href="#" class="btn btn-gray more reply">' + 
     '<i class="fa fa-reply"> </i> Reply </a> </div> </div>'; 

     $('.comments').append(commentsFormat); 
    } 


    sabio.page.handlers.onSubmit = function() { 
     $(".comments").toggle(); 
     $('html, body').animate({ 
      scrollTop: $(".comments").offset().top 
     }, 2000); 

    } 

    sabio.page.getMyArray = function() { 
     var myArray = [{ 
      _id: "888888888888888888", 
      index: 1, 
      name: "Perez", 
      message: "First Comment .......", 
      subject: "enim officias", 
      replies: [ // notice this comment has replies (just 1 but it is still an array) 
      { 
       _id: "77777777777777777777", 
       index: 0, 
       name: "Reply to First Comment Ines for Perez", 
       message: "...", 
       subject: "reply subject consequat" 
      }] 
     }, { 
      _id: "999999999999", 
      index: 0, 
      name: "Shelton", 
      message: "2nd Comment....a", 
      subject: "enim irure", 
      replies: null // notice this comment has no replies and as such is null. this is better than an empty array 
     }, { 
      _id: "666666666666666666", 
      index: 2, 
      name: "Perez", 
      message: "3rd Comment.......", 
      subject: "enim officias", 
      replies: [{ 
       _id: "55555555555555555555", 
       index: 0, 
       name: "1st Reply to 3rd Comment", 
       message: "...", 
       subject: "reply subject consequat" 
      }, { 
       _id: "44444444444444444444", 
       index: 1, 
       name: "2nd Reply to 3rd Comment", 
       message: "...", 
       subject: "reply subject consequat" 
      }] 
     }]; 

     return myArray; 

    } 

Answer 1

你.getMyArray()方法已經返回一個對象，你可以迭代。無需解析它，特別是var obj = JSON.parse(myCommentArray);，因爲它不是有效的JSON字符串。您可以只有

var myCommentArray = sabio.page.getMyArray(); 
$.each(myCommentArray, sabio.page.proccessComments);