javascript - 需要帮助编写干净、有组织的 JavaScript 代码

Question

我是 javascript 和 JQuery 的新手，因此在编写干净、有组织的代码时遇到很多困难。下面的代码感觉很草率，我知道确实如此。这是我的代码的示例。如果有人对如何通过函数、对象、类改进它有建议或意见，那就太棒了。

下面的代码使用数据表插件，通常包含我的页面的所有代码。还有更多的事件处理程序需要编写，但我想在深入讨论之前先了解一下我已经编写的内容。

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('');
    }
});

Answer 1

有一个技巧可以使您的代码更加简洁，而且性能也更加高效。不要使用字符串连接在 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('') );  

另外，不要害怕垂直空白。它有助于分解代码，使其不会垂直聚集在一起。

也添加大量评论。如果您使用的编辑器具有代码语法突出显示功能，则注释的颜色通常与代码的颜色不同。因此，您不仅可以通过不断记录代码中发生的情况来帮助自己，而且还可以获得颜色的额外好处，帮助您的代码更易于理解。