Я пытался сделать ваш код более модульным и читабельным. Вот что я мог придумать. Я публикую только соответствующие разделы вашего кода, чтобы быть кратким.
ПРИМЕЧАНИЕ. Это только рекомендация, я не проверял приведенный ниже код.
var detection_data = '';
// generating the table to interpret the json data
$.each(data, function(key, value) {
detection_data += '<div class="table-row">';
detection_data += getPlateIDHTML(value.id);
// identifie the car plate type/country fron json data
detection_data += getPlateTypeCountryHTML(value.plateType);
// Plate number
detection_data += getPlateNumberHTML(value.plateNumber);
// generate date from json data
detection_data += getDetectionDateHtml(value.date);
// generate link
detection_data += getSnapshotLink(value.date, value.plateNumber, value.plateType);
detection_data += '</div>';
});
$('#detection_table').append(detection_data);
Ниже приведены мои функции
String.prototype.format = function () {
var a = this, b;
for (b in arguments) {
a = a.replace(/%[a-z]/, arguments[b]);
}
return a; // Make chainable
};
function parseStringAsJSDate(date_as_string) {
return new Date(date_as_string);
}
function getPlateIDHTML(id) {
var plate_id_html = '<div class="serial">%s</div>';
return plate_id_html.format(id);
}
function getPlateNumberHTML(plateNumber) {
var plate_number_html = '<div class="visit">%s</div>';
return plate_number_html.format(plateNumber);
}
function getPlateTypeCountryHTML(plateType) {
var plateTypeCountry = {
"1": "Tunisie TN",
"2": "Tunisie RS",
"3": "Tunisie GOV",
"4": "Lybie",
"5": "Algerie",
};
var plate_type_country_html = '<div class="country">%s</div>';
if(plateType in plateTypeCountry) {
return detection_data_html.format(plateTypeCountry[plateType]);
} else {
return detection_data_html.format("Autre");
}
}
function getDetectionDateHtml(captured_date_as_string) {
var date_of_capture_html = '<div class="percentage">%s/%s/%s %s:%s:%s</div>';
var captured_date = parseStringAsJSDate(captured_date_as_string);
return date_of_capture_html.format(captured_date.getDate(), captured_date.getMonth()+1, captured_date.getFullYear(), captured_date.getHours(), captured_date.getMinutes(), captured_date.getSeconds());
}
function getSnapshotLink(captured_date_as_string, plateNumber, plateType) {
var snapshot_link = "http://127.0.0.1:3737/anpr/snapshot?year=%s&month=%s&year=%s&day=%s&hour=%s&minute=%s&second=%s&plate=%s&platetype=%s";
var snapshot_link_html = '<div><a class="img-pop-up" href="%s">Link to picture</a></div>';
var captured_date = parseStringAsJSDate(captured_date_as_string);
var snapshot_link = snapshot_link.format(captured_date.getDate(), captured_date.getMonth()+1, captured_date.getFullYear(), captured_date.getHours(), captured_date.getMinutes(), captured_date.getSeconds(), plateNumber.split(" ").join("_"), plateType);
return snapshot_link_html.format(snapshot_link);
}
Ниже приводится краткое объяснение каждой функции
String.prototype.format: это эквивалент старой школы printf вC. Я нахожу переменные-подстановки вида '<div class="serial">'+ id +'</div>', смешивающие HTML с JavaScript, очень сложными для чтения. И поэтому это.
parseStringAsJSDate: Я предполагаю, что ваш API находится под вашим контролем. Я рекомендую вам изменить формат даты на ISO8601 , чтобы он мог быть проанализирован JavaScript как Date. Ваша функция substr снова влияет на читабельность.
getPlateIDHTML & getPlateNumberHTML: Простые функции, которые просто используют функцию форматирования для встраивания переданных переменных в HTML, чтобы показать ID и табличкучисло.
getPlateTypeCountryHTML: здесь я использовал объект Python, чтобы уменьшить количество операций if и else if.
getDetectionDateHtml &getSnapshotLink: Я пытался проанализировать дату как дату JavaScript, и это исключает substr s. Более того, использование формата еще больше упрощает эти функции.
Дайте мне знать ваши предложения по этому вопросу. Предложения / критика от стековых гуру приветствуются:)
ОБНОВЛЕНИЕ
Пожалуйста, проверьте мою обновленную функцию format. Я получил это от этого превосходного ответа. Извините, предыдущий был просто скопирован, я должен был попробовать. Пожалуйста, просто отформатируйте указанную функцию и дайте мне знать