0
저는 자바 스크립트와 JQuery로 newb입니다. 그래서 깨끗하고 체계적인 코드를 작성하는 데 많은 어려움을 겪고 있습니다. 아래 코드는 엉성함을 느낍니다. 다음은 내 코드의 샘플입니다. 누군가가 기능, 객체, 클래스를 통해 그것을 개선하는 방법에 대한 제안이나 의견이 있다면, 그것은 굉장 할 것입니다.깨끗한 정리 된 자바 스크립트 코드 작성을위한 도움이 필요합니다.
아래 코드는 데이터 테이블 플러그인을 사용하며 일반적으로 내 페이지의 모든 코드를 포함합니다. 계속해서 더 많은 이벤트 핸들러가 작성되어 있지만, 너무 깊이 들어가기 전에 이미 작성한 내용을 먼저 처리하고 싶습니다.
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을 넣는 것을 좋아하지 않지만, datatable의 스타일링 때문에 그 또는 일부 불쾌한 서버 측 솔루션 :( – chobo