使用 jQuery(如 JSX）生成干净的 HTML 标记

Generating clean HTML markup with jQuery (like JSX)

本文关键字：HTML 标记 jQuery JSX 使用      更新时间：2023-09-26

我一直是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>
}

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

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 提供的优势。

> 这个问题在 ES2015 中得到了解决。您可以返回带有 backTick 的多行字符串。但是到目前为止，浏览器支持对此不利，因此您需要使用babel或类似的东西进行转译。

.done(data){
   $("#div-element").html(
     `<div class='watermelon'>
         <div class='green-shell'>
            ${data.inside}
         </div>
     </div>`
   );
}
相关文章：