Оказание трех типов событий как элементов HTML


Мне приходится убирать некоторые JavaScript и я пытаюсь придумать более элегантный способ, чтобы написать этот код ниже. Это в основном зацикливание через 3 словари с той же структуры петли и добавить некоторые пользовательские HTML на определенный див. Я хотел увидеть, если есть способ, чтобы избежать повторяющегося кода:

if (dtInt in calendarEventDict) {
    var arrEvents = calendarEventDict[dtInt];
    for (var a = 0; a < arrEvents.length; a++) {
        var calendarEvent = arrEvents[a];
        $("#dateCupcake" + i).append("<div  dateId='" + calendarEvent.Date + "' class='event " + "cal" + calendarEvent.CalendarId + " " + calendarEvent.CalendarClassName + "' calendarId='" + calendarEvent.CalendarId + "' eventDateId='" + calendarEvent.Id + "' id='" + calendarEvent.EventId + "'>" + calendarEvent.DisplayName + "</div>");
    }
}
if (dtInt in vacationEvents) {
    var arrEventsV = vacationEvents[dtInt];
    for (var v = 0; v < arrEventsV.length; v++) {
        var vacationEvent = arrEventsV[v];
        $("#dateCupcake" + i).append("<div  dateId='" + vacationEvent.Date + "' class='event " + "cal1 blueAllDay' calendarId='1' eventDateId='" + vacationEvent.Id + "' id='" + vacationEvent.EventId + "'><img src='/Content/Images/Icons/pawn_glass_" + vacationEvent.ApprovalIcon + ".png' />" + vacationEvent.PersonName + "</div>");
    }
}
if (dtInt in travelEvents) {
    var arrEventsV1 = travelEvents[dtInt];
    for (var v1 = 0; v1 < arrEventsV1.length; v1++) {
        var travelEvent = arrEventsV1[v1];
        $("#dateCupcake" + i).append("<div  calendarId='2' dateId='" + travelEvent.Date.ToString("MMM dd, yyyy") + "' class='event " + "cal2" + " blueAllDay' calendarId='2' eventDateId='" + travelEvent.Id + "' eventId='" + travelEvent.TravelRequest.Id + "'><img src='/Content/Images/Icons/user1_earth16.png' />" + travelEvent.TravelRequest.Person.LastName + ", " + travelEvent.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + travelEvent.TravelRequest.TechnicalCentre.Name + "</div> ");
    }
}


434
5
задан 11 декабря 2011 в 09:12 Источник Поделиться
Комментарии
3 ответа

Простейший рефакторинг будет просто вытянуть общую функциональность, и передать в массив для каждого случая, а также функция используется для создания вашего контента див из текущего элемента в цикле. Предполагая dtInt является глобальной:

function checkDtInt(arr, funcToCreateDiv) {    
if (dtInt in arr) {
var arrEventsV1 = arr[dtInt];
for (var v1 = 0; v1 < arrEventsV1.length; v1++) {
var travelEvent = arrEventsV1[v1];
$("#dateCupcake" + i).append(funcToCreateDiv(travelEvent));
}
}
}

checkDtInt(calendarEventDict, function(item) {
return "<div dateId='" + item.Date + "' class='event " + "cal" + item.CalendarId + " " + item.CalendarClassName + "' calendarId='" + item.CalendarId + "' eventDateId='" + item.Id + "' id='" + item.EventId + "'>" + item.DisplayName + "</div>"
});

checkDtInt(vacationEvents, function(item) {
return "<div dateId='" + item.Date + "' class='event " + "cal1 blueAllDay' calendarId='1' eventDateId='" + item.Id + "' id='" + item.EventId + "'><img src='/Content/Images/Icons/pawn_glass_" + item.ApprovalIcon + ".png' />" + item.PersonName + "</div>"
});

checkDtInt(travelEvents, function(item) {
return "<div calendarId='2' dateId='" + item.Date.ToString("MMM dd, yyyy") + "' class='event " + "cal2" + " blueAllDay' calendarId='2' eventDateId='" + item.Id + "' eventId='" + item.TravelRequest.Id + "'><img src='/Content/Images/Icons/user1_earth16.png' />" + item.TravelRequest.Person.LastName + ", " + item.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + item.TravelRequest.TechnicalCentre.Name + "</div> "
});

2
ответ дан 11 декабря 2011 в 09:12 Источник Поделиться

Это меньше кода, но я не сказал бы проще:
Редактировать: даже меньше кода больше. Меньше повторяющегося кода, хотя.

var groups =[
{
events: calenderEventDict,

calendaridfn: function(){ return this.calendarId;},
contentsfn: function(){ return this.DisplayName; },
datefn: function(){ return this.Date;}
},
{
events: vacationEvents,

calendaridfn: function(){ return "1";},
contentsfn: function(){
var contents = jQuery("<img/>")
.prop("src", "/Content/Images/Icons/pawn_glass_" + this.ApprovalIcon + ".png")
.after(this.PersonName);
return contents;
},
datefn: function(){ return this.Date;}
},
{
events: travelEvents,

calendaridfn: function(){ return "2";},
contentsfn: function(){
var contents= jQuery("<img />")
.prop("src", '/Content/Images/Icons/user1_earth16.png')
.after(
this.TravelRequest.Person.LastName + ", " +
this.TravelRequest.Person.FirstName.Substring(0, 1) +
" visiting " +
this.TravelRequest.TechnicalCentre.Name
);
return contents;
},
datefn: function(){ return this.Date.ToString("MMM dd, yyyy"); }
}
];

jQuery.each(groups, function(){
if (dtInt in this.events)
{
var group = this;
jQuery.each(events, function(){
var calendarId = group.calendaridfn.call(this);
$("#dateCupcake" + i).append(
jQuery("<div/>").prop({
dateId: group.datefn.call(this),
class: ["event",
"cal" + calendarId,
(this.CalendarClassName || "blueAllDay")].join(" "),
calendarId: calendarId,
eventDateId: this.Id,
id: this.EventId
})
.append(group.contentsfn.call(this))
);
}
}
});

Редактировать:- Итак, после обсуждения с Raynos я пришел к пониманию, что лучше не иметь огромный HTML-строку над предметом создания метода. Я отредактировал мой ответ, чтобы отразить эту идею.

0
ответ дан 11 декабря 2011 в 11:12 Источник Поделиться

Есть много способов сделать это. Но не надо усложнять, ваш код совсем не плох. Могли бы использовать некоторые оптимизации, вот и все.


  1. Итак, давайте начнем по оптимизации вашего кода. Вы можете получить более быстрые результаты в слабых машинах с малым простой рефакторинг. Это тоже чистый.
    Я полагаю, что вам не нужно ТП объявлять новые переменные для каждой из петель. То есть вы можете использовать одни и те же.

  2. Не всегда стандартная, но хорошая практика. Использовать одинарные кавычки' и держать "двойные кавычки в HTML", если это возможно

    // have all you need here, only once. These variables can be used for more than one loop.
    var events,
    eventsLen,
    travelRequest,
    ev,
    i;

    if (dtInt in calendarEventDict) {
    events = calendarEventDict[dtInt];
    i = arrEvents.length;

    // loop until we reach 0. Less calls, less checks ;)
    while(--i) {
    ev = arrEvents[a];
    $("#dateCupcake" + i).append("<div dateId='" + ev.Date + "' class='event " + "cal" + ev.CalendarId + " " + ev.CalendarClassName + "' calendarId='" + ev.CalendarId + "' eventDateId='" + ev.Id + "' id='" + ev.EventId + "'>" + ev.DisplayName + "</div>");
    }
    }
    if (dtInt in vacationEvents) {
    events = vacationEvents[dtInt];
    i = arrEventsV.length;

    while(--i) {
    ev = arrEventsV[v];
    $("#dateCupcake" + i).append("<div dateId='" + ev.Date + "' class='event " + "cal1 blueAllDay' calendarId='1' eventDateId='" + ev.Id + "' id='" + ev.EventId + "'><img src='/Content/Images/Icons/pawn_glass_" + ev.ApprovalIcon + ".png' />" + ev.PersonName + "</div>");
    }
    }
    if (dtInt in travelEvents) {
    events = travelEvents[dtInt];
    i = arrEventsV1.length;

    while(--i) {
    ev = arrEventsV1[v1];
    travelRequest = ev.TravelRequest;
    $("#dateCupcake" + i).append("<div calendarId='2' dateId='" + ev.Date.ToString("MMM dd, yyyy") + "' class='event " + "cal2" + " blueAllDay' calendarId='2' eventDateId='" + ev.Id + "' eventId='" + travelRequest.Id + "'><img src='/Content/Images/Icons/user1_earth16.png' />" + travelRequest.Person.LastName + ", " + travelRequest.Person.FirstName.Substring(0, 1) + " visiting " + travelRequest.TechnicalCentre.Name + "</div> ");
    }
    }


0
ответ дан 14 декабря 2011 в 10:12 Источник Поделиться