从 json / js 对象构建 html 的最佳实践？答案

【问题标题】：Best practice to build html from json / js object?从 json / js 对象构建 html 的最佳实践？
【发布时间】：2015-05-10 20:47:59
【问题描述】：

当我从 API 获得 ajax 响应时，我得到一个硬 json 结构：

{
  object: {
      key: value,
      key: value,
      ....
      key(array_of_objects): {
          key: value,
          key: value,
      }, {
          key: value,
          key: value,
      }, {
          key: value,
          key: value,
      }
  }

}

现在我做：

  function render(json) {
  var data = $.parseJSON(json);
  var html = "";

  html += "<h1>Hello"+data.key+"</h1>";
  html += "<h2>Your data:</h2>";
  html += "<ul>";

  var data_array= "";

  $.each(data.array_of_objects, function(index, val) {
    data_array += "<li>" + val.key + "</li>";
  });

  html += data_array+"<ul>"  

  return html;
}

$.ajax({
  type: "POST",
  url: apiUrl,
  data: request,
  success: function(obj, xr, res) {
      $(".content").append(render(obj));
  }
})

我知道我使用了糟糕的解决方案，因为我的代码很复杂并且难以扩展。

我想将 js 逻辑和 html 视图分开。

这种情况的最佳实践解决方案是什么？

【问题讨论】：

在您的情况下，最佳实践解决方案是使用模板引擎之一。例如handlebarsjs.com 或underscorejs.org。这使您可以将视图与 js 代码分开。
如果你在你的应用程序中多次这样做，我会说继续使用 Mustache 或 Handlebars。您的 html 将始终与您的 API 响应数据耦合，但这样模板可以比较可维护和可重用。

标签： javascript jquery ajax json api

【解决方案1】：

您正在寻找客户端库。它们数量众多且非常多样化。 backbone.js 是一个小改进，它将为您提供组件，您可以（重新）渲染和模型以保留数据。另一种是广受欢迎的 angular.js，当然还有 react。

如果不使用其中任何一个，那么做你正在做的事情实际上是很常见的。您也可以尝试使用简约的模板引擎，例如 jade 或 underscore templates

【讨论】：