Question

我有很多消息和原始HTML，我在我的javascript代码中硬编码，例如：

    var subjectId = $(subject).attr('subjectId'); 
    var subjectName = $(subject).attr('subjectName'); 
    var html = "<table id='invitations' class='invitations' width='100%'><tbody>";
    $(subject).find('group').each( function() {     
        var groupId = $(this).attr('groupId');
        var groupName = $(this).attr('groupName');
        var ownerId = $(this).attr('ownerId');
        var owner = findStudentNameById( subjectId, ownerId );
        html += "<tr>" +
                    "<td width='55px'><img src='images/gplg.png' /></td>" +
                    "<td>" + subjectId + " <span class='subjectName'>" + subjectName + '</span> <br /> '  + groupId + 
                    " - <span class='group'>" + groupName + "</span><br /> Created By "  + owner + "</td>" +
                "</tr>" +
                "<tr>" +
                    "<td width='55px'></td>" +
                    "<td><img class='accept' src='images/accept.png' />" +
                        "<img class='decline' src='images/decline.png' /> " +
                    "</td>" +
                "</tr>";                    
    });
    html += "</tbody></table>";
    return html;

或......

$('#inviteform').submit( function (){
            var invitesSent = false;
            var html = '<h3>Invitations have been sent to the following people</h3><br /><ul>';
            $('#inviteform').find('input:checkbox').each( function() {
                if ( $(this).is(':checked')){
                    html += '<li>+ <a href="#">' + $(this).val() +'</a></li>';
                    invitesSent = true;
                }
            });
            html += '</ul>';

            if ( !invitesSent ){
                html = '<h3>You did not select any invitees, no invitations have been sent.</h3>';
            }

            $('#content').hide().fadeOut(2000);
            $('#content').html(html).slideDown("slow");
            $('#slogan').html('Congratulations! Your group is now complete. ').fadeIn(2000);

            return false;
        });

这是因为我有两个主要的页面区域（即标题div和内容div），我需要动态更改内容。不幸的是，我无法将这些内容分成不同的文件。

那么，为这些div创建文本和DOM元素背后是否有最佳实践，而不是硬编码这么多东西。

我正在寻找最优雅的解决方案，所以我没有那么多硬编码。

由于

Answer 1

你应该看一个模板库。 jQuery templating engines

Answer 2

它鼓励你硬编码HTML字符串的方式是我讨厌jQuery的一种方法。

我通常最终会使用标准的Javascript：document.createElement('TD')

如果要创建大量相同类型的节点，则最好/更快地缓存它们并使用cloneNode(true)创建新节点：

var nodeCache;
    nodeCache.td = document.createElement('TD')

var newTD = nodeCache.td.cloneNode(true);

我知道这并没有充分利用jQuery，但我认为jQuery处理这个问题的方式并不优雅。

Answer 3

您可以使用jQuery的选择器来创建DOM元素。例如，

$('<table>')

将创建一个表元素，然后可以在其上设置属性，然后附加到DOM。

$('<table id="invitations" class="invitations" width="100%">')
    .append('<tbody>')
    .appendTo(selector);
    // etc

Answer 4

另一种方法是使用append（），addClass（），css（），attrib（）和其他jQuery方法来构造DOM。链接将使代码更优雅。这将很好用，特别是对于小DOM树。

如果你需要更大的DOM树，那么最好使用AJAX方法从服务器获取它们。您需要调整代码才能传递动态生成的数据。

另外，您可以考虑重新设计html和javascript代码。例如，您可以将DOM树放在html中并隐藏它（使用CSS或javascript）。然后，您可以在添加动态生成的数据后显示它。从关注点分离的角度来看，这要好得多。

Answer 5

尝试通过ajax获取html。

这将分离javascript和html，打破依赖关系。

Answer 6

使用Ajax调用用户控件会更好。

这样你就可以在html用户控件中完成所有标记。

以我的拙见。

Answer 7

在你的情况下，我将消息与标记分开。您可以在页面中拥有一个空的html脚手架，如

...<div id="feedback" style="display:none;"><h3 class="headline"></h3><p class="message"></p>...

然后使用jQuery填充它。这样，您就可以将所有用户消息重构为外部.js文件，从而大大简化了i18n。

BTW我不推荐JQuery Template Engines。要么他们强迫你使用一个非常笨拙的语法（比如jTemplates），要么限制你使用简单的元素克隆。恕我直言，你几乎总是更好地使用.clone（）方法。

JQuery - Javascript中的硬编码HTML - 有没有更好的方法来动态创建dom元素？

7 个答案: