我想将一个函数分成一个多功能 jquery/ajax

Question

我有一个带有 Ajax 函数的 JavaScript 文件，该函数从在线服务器调用 JSON 文件以提取其数据并将其解释为生成的表...我想分离生成链接、生成日期、识别车牌类型/国家分成多个可以被ajax函数调用的函数。

//  table of the server's data from JSON file
$(document).ready(function() {
  $.ajax({
    url: "http://127.0.0.1:3737/anpr?nb=0",
    type: "GET",
    dataType: "json",
    success: function(data) {
      var detection_data = '';
      // generating the table to interpret the json data 
      $.each(data, function(key, value) {
        detection_data += '<div class="table-row">';
        detection_data += '<div class="serial">' + value.id + '</div>';
        // identifie the car plate type/country fron json data
        var plateType = value.plateType
        if (plateType == "1") {
          detection_data += '<div class="country">Tunisie TN</div>';
        } else if (plateType == "2") {
          detection_data += '<div class="country">Tunisie RS</div>';
        } else if (plateType == "3") {
          detection_data += '<div class="country">Tunisie GOV</div>';
        } else if (plateType == "4") {
          detection_data += '<div class="country">Lybie</div>';
        } else if (plateType == "5") {
          detection_data += '<div class="country">Algerie</div>';
        } else {
          detection_data += '<div class="country">Autre</div>';
        }
        detection_data += '<div class="visit">' + value.plateNumber + '</div>';
        // generate date from json data
        detection_data += '<div class="percentage">' + value.date.substr(8, 2) +
          '/' + value.date.substr(5, 2) + '/' + value.date.substr(0, 4) +
          '  ' + value.date.substr(11, 2) + ':' + value.date.substr(14, 2) + ':' + value.date.substr(17, 2) + '</div>';
        // generate link 
        detection_data += '<div>' + '<a class="img-pop-up" href="http://127.0.0.1:3737/anpr/snapshot?year=' + value.date.substr(0, 4) +
          '&month=' + value.date.substr(5, 2) + '&day=' + value.date.substr(8, 2) +
          '&&hour=' + value.date.substr(11, 2) + '&minute=' + value.date.substr(14, 2) + '&second=' + value.date.substr(17, 2) +
          '&plate=' + value.plateNumber.split(" ").join("_") + '&platetype=' + value.plateType + '">link to picture</a>' + '</div>';
        detection_data += '</div>';
      });
      $('#detection_table').append(detection_data);

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我试图让您的代码更加模块化和可读。这是我能想到的。为了简洁起见，我只发布代码的相关部分。

注意：这只是一个建议，我没有测试过下面的代码。

      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);

}

下面是每个功能的简要说明

1. String.prototype.format：这相当于 C 语言中的老派 printf。我发现 '<div class="serial">'+ id +'</div>' 类型的变量替换将 HTML 与 JavaScript 混合在一起非常难以阅读。所以这个。

2. parseStringAsJSDate：我假设您的 API 在您的控制之下。我建议您将日期格式修改为ISO8601，以便JavaScript 可以将其解析为Date。您的 substr 函数再次影响可读性。

3. getPlateIDHTML & getPlateNumberHTML：简单的函数，只使用 format 函数将传递的变量嵌入到 HTML 中以显示 ID 和车牌号。

4. getPlateTypeCountryHTML：我在这里使用了一个 Python 对象来减少 if 和 else if 的数量。

5. getDetectionDateHtml & getSnapshotLink：我尝试将日期解析为 JavaScript 日期，这消除了 substrs。此外，格式的使用进一步简化了这些功能。

让我知道您对此的建议。非常欢迎 Stack 大师的建议/批评 :)

更新

请检查我更新的format 函数。我从this 出色的答案中获取了它。抱歉，之前的只是复制粘贴的，我应该尝试一下。请仅将格式功能设置为指示的功能并告诉我