我是一个使用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 + '"> ' + '</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('');
}
});
答案 0 :(得分：3)
有一个提示可以使您的代码更清洁，但在性能方面也更有效。不要使用字符串连接在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('') );
另外，不要害怕垂直空白。它有助于分解代码，使其不会垂直聚集在一起。
也要添加大量的评论。如果您使用的是具有代码语法高亮显示的编辑器，则通常注释的颜色与代码不同。因此，您不仅可以通过不断记录代码中的内容来帮助自己，还可以获得颜色的额外好处，从而使代码更易于理解。
答案 1 :(得分：2)
我同意卢克的观点。如果你用javascript写出大量的html，我会考虑输出JSON并使用jQuery模板，Mustache或PURE。
我正在尝试在我当前的项目中实现类似的东西，而我最初的想法是基于JS的更多。因此，输出一堆HTML并不得不反复执行DOM操作已经成为性能抑制因素。
我只是谷歌'jQuery最佳实践'和'jQuery性能' - 你会发现很多关于jQuery最佳实践的事情。
多年来我学到的一件事就是不断编程。我发现自己陷入了应该做的事情而不仅仅是做我想做的事情。程序。 我确保在可接受的情况下测试和构建代码的基准测试。从那里开始，我不断重构，因为我找到了更好的新方法。
祝你好运！答案 2 :(得分：1)
/* 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);
});
这不是你应该使用的，它只是一种以更好的方式使用递归内容的方法，所以如果你想将“a”改为“b”，你就不必第6次或第n次。
但是对于你的工作，我会建议你高度jquery templ插件，它是测试版，但它在你需要的时候工作，因为这样的事情对我个人来说是不行的。
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 + '"> ' + '</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>';