0
私はjavascriptとJQueryでnewbですので、きれいで整理されたコードを書くのに苦労しています。以下のコードはちょっと感じが悪く、わかっています。ここに私のコードがどのように見えるかのサンプルがあります。関数、オブジェクト、クラスを使って改善する方法についての提案やコメントがあれば、それはすばらしいでしょう。清潔に整理されたJavaScriptコードを書くのに助けが必要
以下のコードでは、データテーブルプラグインを使用しています。通常、このページにはすべてのコードが含まれています。まだ多くのイベントハンドラがありますが、先に書いたものを手に入れてから、あまりにも深くなってしまいます。
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);
});
これはへ
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('');
}
});
私は自分のjsでもhtmlを置くのが好きではありませんが、データテーブルのスタイリングの量のために、そのか厄介なサーバー側の解決策:( – chobo