在客户端使用 JSON 数据的最佳实践 (javascript)

Question

我有一个 REST api，它转储一些 json 数据（用户信息等）。现在我需要使用这些数据：

1. 构造html表格，
2. 使用一些 js 绘图库的平面图，
3. 对某些字段进行一些计算并再次显示它们。

所以，基本上我需要对这些数据进行一些处理，然后显示优化后的表格。

我是 javascript 新手，想了解构建 html 的最佳做法是什么？

我正在使用 jquery 进行 ajax 调用，成功部分如下所示：

success:function(data){
  $('#show_data_here').empty();
  generated_html  = construct_html(data);
  $('#show_data_here').html(generated_html);
}

现在，construct_html(data) 函数变得非常丑陋，因为我收到的 json 很大（800 行），而且我有一页上要显示很多（~10）个图表。有没有更好的方法来解决这个问题？

Answer 1

首先尝试将它们分解为执行每个任务的函数。 然后在每个任务中，您可能有子任务。再次分解它们。

success:function(data){
  constructTable(data.tableData);
  grabLib.create(data.graphData);
  updateCalculations(data.tableData);
}

function constructTable(data)
{
  var html = '';
  // foreach
  $('table tbody').empty().html(html);
}

// etc

理想情况下，您希望处理可以为您执行任务的对象，但您的第一步是分解功能。分成更小的块。

Answer 2

根据您正在构建的 html 类型，您可能需要考虑使用模板框架，例如 JsRender。

如果你正在构建的 html 遵循一个明确的模式，这可能是要走的路。