javascript - 使用 jQuery 生成干净的 HTML 标记(如 JSX)

Question

我是 jQuery 的长期用户，刚刚开始学习 React。我真的很喜欢 React 如何使用 JSX 处理 Javascript 中的 HTML 标记，所以我想知道是否有办法在 jQuery 中做类似的事情？

例如，我在 jQuery 中的所有 Ajax 调用都返回如下所示的内容:

.done(data){
     var content = "";
     content += "<div class='watermelon'>";
     content += "<div class='green-shell'>";
     content += data.inside;
     content += "</div></div>";
     $("#div-element").html(content);
}

是否可以让它看起来像这样:

.done(data){
     <div class='watermelon'>
         <div class='green-shell'>
             {data.inside}
         </div>
     </div>
}

Answer 1

您可以像这样使用下划线模板:

var template = _.template('<div class=\"watermelon\">' + 
                            '<div class=\"green-shell\">' +
                              '<%=inside%>' +
                            '</div>' +
                          '</div>'
                         );
.done(data) {
  $("#div-element").html(template({inside: data.inside}));
}

仍然有点草率，因为它不是 JSX。如果它是你的一个选择并且你开始真正喜欢 React。我会尝试并开始将 JQuery 重写为 React，这样您就可以充分利用 JSX/React，而不是寻找在 JQuery 中编写 JSX 替代方案的方法。这只是我的建议，因为我是 JQuery 的忠实粉丝，直到我看到了虚拟 DOM 以及 React 提供的优势。