在 HTML 中显示变量的好做法是什么?

What are good practices for displaying variables in HTML?

本文关键字：是什么 HTML 显示 变量      更新时间：2023-09-26

我是Javascript和Jquery的新手。

我正在使用 Jquery $.ajax 发送 get 请求，处理返回的 Json 字符串并使用 .html() 在我的 html 中以<div id="myTabs"></div>显示内容。你可以从下面的代码中看到，我正在使用一个字符串变量来制作一个HTML列表。我这样做是好的做法吗？我觉得这种方式不是很敏捷，有没有更好的方法呢？

谢谢！

function updateRelated(str)
{
    $.ajax(
        {
            url:ServerUrl+api_subject,
            type:'GET',
            success:function(json)
            {
                // alert(json);
                var obj = jQuery.parseJSON(json);
                var toDisplay="";
                var tableDisplay="<ul>";
                for(var i=0;i<obj.subject_list.length;i++)
                {
                    tableDisplay=tableDisplay+'<li><a href="subject.htm?subjectid='+obj.subject_list[i].id+'">'+obj.subject_list[i].title+'</li>';
                    //    toDisplay=toDisplay+"<br>preferred_synonym:"+obj.relatedCocepts[i].preferred_synonym+",Type: "+obj.relatedCocepts[i].type+",score: "+obj.relatedCocepts[i].score;
                }
                tableDisplay=tableDisplay+"</ul>"
                $("#myTabs").html(tableDisplay);
            }
        }
        )
 }
基本上，

我正在阅读您的问题，实际上是在询问您是否应该编写一串标记并将其输出到DOM中，并将变量连接到其中。

对于较小的东西是可以的，但是如果你用javascript编写了很多视图，你会需要一个工具来组合视图部分。

有一些工具可以做到这一点：

  • http://mustache.github.com/
  • https://github.com/adammark/Markup.js
  • http://api.jquery.com/category/plugins/templates/

你可能想使用像jsViews这样的模板引擎。如果你坚持使用 jQuery 循环和创建元素，请查看： http://www.andyjarrett.co.uk/blog/index.cfm/2009/3/14/Creating-a-new-DOM-element-with-jQuery/- 语法很简单：

div = $("<div>"); // then append more stuff with append() or html()

但同样，如果您要附加大量内容，使用模板引擎远远优于自制循环解决方案。它也更加健壮和可扩展（布局修改更容易实现）。

就像其他人已经说过的那样，如果你有很多 html，模板引擎是要走的路。但是，您可以使用数组清理当前代码。我评论了几件事：

var list = [],
    arr = obj.subject_list,
    len = arr.length; // cache length for better performance
for (var i=0; i<len; i++) {
  list.push(
    '<li>'+
      '<a href="subject.htm?subjectid='+ arr[i].id +'">'+
        arr[i].title +
      '</a>'+ // you forgot to close <a>
    '</li>'
  );
}
$("#mytabs").html('<ul>'+ list.join('') +'</ul>');

在 JavaScript 中处理 html 时，我建议正确缩进 html，就像它是真正的 html 一样。如您所见，它的可读性要高得多，并且可以避免语法错误，例如缺少结束</a>。

我相信

你在这里做得很好，在这种情况下，我可能会做一些非常相似的事情。使用特殊的插件是可能的，并且可能更加用户友好，但它们几乎总是伴随着很多开销。我怀疑这在处理器负载方面是否可以更有效率。

你可以使用 jsrender 来实现这一点。

使用特殊类型在脚本标记中定义模板text/x-jsrender：

<script id="listTemplate" type="text/x-jsrender">
    <li><a href="subject.htm?subjectid={{>id}}">{{>title}}</a></li>
</script>

请注意，很容易看到 HTML 的结构。 与在javascript中连接相比，错过事物的机会更少（你错过了结束</a>标签，顺便说一句）。

要使用此模板，请按如下所示修改函数：

success:function(json)
{
    // alert(json);
    var obj = jQuery.parseJSON(json);
    var htmlList = $('#listTemplate').render(obj.subject_list);
    $('#myTabs').html(htmlList);   
}

这是一个jsfiddle演示：http://jsfiddle.net/d4DjY/。 将鼠标悬停在链接上，您可以看到它们在查询字符串中具有正确的 id。

更多演示在这里：http://borismoore.github.com/jsrender/demos/demos.html。 使用视图源代码查看模板代码。

你也可以

看看jQuery Templates。 它仍处于测试阶段，不会再进一步，但对于您的情况，它应该没问题。

相关文章：