需要幫助編寫乾淨的有組織的JavaScript代碼

我是一個JavaScript和JQuery的新手，所以我在編寫乾淨有組織的代碼時遇到了很多麻煩。下面的代碼只是感覺馬虎，我知道它是。以下是我的代碼的樣例。如果任何人有關於如何通過函數，對象，類來改進它的建議或評論，那將是非常棒的。需要幫助編寫乾淨的有組織的JavaScript代碼

下面的代碼使用一個DataTable的插件，並且通常將包含所有的代碼爲我的網頁。還有更多的事件處理程序需要編寫等等，但我想首先處理我在寫入之前已寫入的內容。

var plannerTable; 


$(function() { 

    // Initialize datatable object 
    plannerTable = $('#plannerTable').dataTable 
    ({ 
     "bJQueryUI": true, 
     "bFilter": true, 
     "sPaginationType": "full_numbers", 
     "oLanguage": 
      { 
       "sZeroRecords": "Add some tasks to your planner" 
      }, 
     "aoColumns": 
      [ 
       { "bSortable": true, "bSearchable": false }, // task id 
       {"bSortable": true, "bSearchable": false }, // course 
       {"bSortable": false, "bSearchable": false }, // Edit 
       {"iDataSort": 2 }, // due date 
       null, // task 
       {"bSortable": false, "bSearchable": false }, // Options  
       {"bSortable": false, "bSearchable": false} // Delete  
      ] 
    }); 


    /* Insert Time Filter Controls into datatable */ 
    var filterHtml = [ 
     '<ul id="plannerTable_TimeFilter" class="dataTables_TimeFilter">', 
     '<li><a href="#">Day</a></li>', 
     '<li><a href="#">Week</a></li>', 
     '<li><a href="#">Month</a></li>', 
     '<li><a href="#">All</a></li>', 
     '<li><a href="#">Last 30 Days</a></li>', 
     '</ul>' 
    ] 

    $('#plannerTable_filter').after(filterHtml.join('')); 



    var dateFilters = $('#plannerTable_TimeFilter li'); 

    /* setup filter click event */ 
    dateFilters.click(function() 
    { 
     var dateFilter = $(this).text().replace(/\s+/g, ''); 

     /* Get tasks by date range */ 
     $.getJSON('/Planner/Planner/GetTasksByDateRange', { 'dateFilter': dateFilter }, function (data) 
     { 
      plannerTable.fnClearTable(); 

      $.each(data, function (key, value) 
      { 
       var row = createTableRow(value); 

       /* add row to table */ 
       plannerTable.fnAddTr($(row)[0], true); 
      }); 
     }); 
    }); 


    /* 
    * Function: createTableRow 
    * Purpose: Creates an HTML Row using the html in this function 
    * Returns: constructed html row 
    * Inputs: row data object 
    */ 
    function createTableRow(value) 
    { 

     var date = new Date(parseInt(value.DueDate.substr(6))); 

     /* convert date to proper format */ 
     /* construct html row */ 
     var row = [ 
      '<tr>', 
       '<td style="display: none;">' + value.TaskId + '</td>', 
       '<td class="tag-bg" style="width: 10px;">', 
        '<span class="tag" style="background-color:' + value.CourseBackgroundColor + '" title="' + value.CoursePrefix + '">&nbsp;' + '</span>', 
        '<span style="display: none;">' + value.CoursePrefix + '</span>', 
       '</td>', 
       '<td class="edit">', 
        '<a href="#"><img src="../../../../Content/Images/Planner/edit-icon.png" /></a>', 
       '</td>', 
       '<td class="due-date">' + value.DueDate + '</td>', 
       '<td class="task-col">' + value.TaskName + '</td>', 
       '<td class="options">', 
        '<a class="desc" href="#"><img src="../../../../Content/Images/Planner/desc-off-icon.png" /></a>', 
        '<a class="alert" href="#"><img src="../../../../Content/Images/Planner/bell-off-icon.png" /></a>', 
       '</td>', 
       '<td class="delete">', 
        '<a href="#"><img src="../../../../Content/Images/Planner/delete-icon.png" /></a>', 
       '</td>', 
      '</tr>' 
     ] 

     return row.join(''); 
    } 
});

來源

2011-02-05 chobo

/* Insert Time Filter Controls into datatable */ 
var filterHtml = '<ul id="plannerTable_TimeFilter" class="dataTables_TimeFilter">' + 
       '<li><a href="#">Day</a></li>' + 
       '<li><a href="#">Week</a></li>' + 
       '<li><a href="#">Month</a></li>' + 
       '<li><a href="#">All</a></li>' + 
       '<li><a href="#">Last 30 Days</a></li>' + 
      '</ul>'; 
$('#plannerTable_filter').after(filterHtml);

到

var timefiller = $("<ul></ul>").addClass("dataTables_TimeFilter"); 
$(["Day", "Week", "Month", "All", "Last 30 Days"]).each(function() { 
    $("<a></a>").text(this).attr("href", "myhref").wrap("<li />").appendTo(timefiller); 
});

這還不算什麼，你應該使用，它只是使用遞歸的東西以更好的方式的方式，所以如果你想改變「一」到一個「b」你不必做6或者n次。

但對你的工作，我會建議你非常的jQuery插件TEMPL，it's測試版，但it's工作，你需要它，因爲這樣的事情是對我個人一個不走。

var row = '<tr>' + 
         '<td style="display: none;">' + value.TaskId + '</td>' + 
         '<td class="tag-bg" style="width: 10px;">' + 
          '<span class="tag" style="background-color:' + value.CourseBackgroundColor + '" title="' + value.CoursePrefix + '">&nbsp;' + '</span>' + 
          '<span style="display: none;">' + value.CoursePrefix + '</span>' + 
         '</td>' + 
         '<td class="edit">' + 
          '<a href="#"><img src="../../../../Content/Images/Planner/edit-icon.png" /></a>' + 
         '</td>' + 
         '<td class="due-date">' + value.DueDate + '</td>' + 
         '<td class="task-col">' + value.TaskName + '</td>' + 
         '<td class="options">' + 
          '<a class="desc" href="#"><img src="../../../../Content/Images/Planner/desc-off-icon.png" /></a>' + 
          '<a class="alert" href="#"><img src="../../../../Content/Images/Planner/bell-off-icon.png" /></a>' + 
         '</td>' + 
         '<td class="delete">' + 
          '<a href="#"><img src="../../../../Content/Images/Planner/delete-icon.png" /></a>' + 
         '</td>' + 
        '</tr>';

來源

2011-02-05 21:56:36 Luke

我不喜歡把html放到我的js中，但是由於數據表的樣式量太大或者一些討厭的服務器端解決方案:( – chobo 2011-02-05 22:46:33

有一個技巧會讓你的代碼更清潔一些，但在性能上也更高效。不要在js中使用字符串連接創建html。使用數組。

var filterHtml = [ 
    '<ul id="plannerTable_TimeFilter" class="dataTables_TimeFilter">', 
    '<li><a href="#">Day</a></li>', 
    '<li><a href="#">Week</a></li>', 
    '<li><a href="#">Month</a></li>', 
    '<li><a href="#">All</a></li>', 
    '<li><a href="#">Last 30 Days</a></li>', 
    '</ul>'  
] 
$('#plannerTable_filter').after(filterHtml.join(''));

您可以用同樣的方法，如果你需要從一個JS數組打造出了一個清單：

var data = [1,2,3,4,5,6], 
    html = ['<ul>']; 

for(var i=0,len=data.length; i<len; i++){ 
    html.push('<li>'+data[i]+'</li>'); 
} 
html.push('</ul>'); 

$(target).html(html.join(''));

此外，不要怕垂直空白。它有助於分解代碼，使其不會垂直聚集在一起。

添加大方劑量的意見了。如果您使用的是具有代碼語法高亮的編輯器，通常註釋的顏色不同於代碼。因此，您不僅可以通過持續記錄代碼中發生的事情來幫助自己，還可以獲得顏色的額外好處，使代碼更易於理解。

來源

2011-02-05 22:00:47 Geuis

感謝您對字符串連接的提示:)我把你編寫代碼片段並更新其他部分。你有沒有看到我可以通過對象，類或函數改進的其他領域？ – chobo 2011-02-05 22:45:00

我會同意盧克。如果您正在用JavaScript編寫大量html，我會考慮輸出JSON並使用jQuery模板，小鬍子或PURE。

我在試圖實現我的當前項目類似的東西這是談到了更加中間JS爲基礎的話，我本來以爲。因此，輸出一堆HTML並且必須反覆執行DOM操作已成爲性能抑制。

我只是谷歌jQuery的最佳實踐「和「jQuery的性能」 - 你會發現關於使用jQuery最佳實踐不少東西。

有一件事我多年的經驗是隻持續計劃。我發現自己陷入了應該是對的，而不是僅僅做我想做的事情。程序。我確保我測試並在我的代碼的基準測試中可以接受。從那裏，我不斷重構，因爲我發現更好的新方法來做事情。

祝你好運！

來源

2011-05-05 00:44:00 al3xnull

需要幫助編寫乾淨的有組織的JavaScript代碼

回答

相關問題