Question

当我从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视图。

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

Answer 1

您正在寻找客户端库。它们很多，而且非常多样化。与此相关的一个小改进是 backbone.js ，它将为您提供组件，您可以（重新）渲染和模型来保存数据。另一个是广受欢迎的 angular.js ，其原因是反应。

如果不使用任何这些，那么做你正在做的事实际上很常见。您还可以尝试使用简约模板引擎，例如 jade 或下划线模板

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

1 个答案: