2

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

    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;
        });

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

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

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

谢谢

4

7 回答 7

2

您应该查看模板库。jQuery 模板引擎

于 2009-05-28T10:21:09.660 回答
2

它鼓励您对 HTML 字符串进行硬编码的方式是我对 jQuery 最讨厌的地方之一。

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

如果您要创建许多相同类型的节点，最好/更快地缓存它们并用于cloneNode(true)创建新节点：

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

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

我知道这并没有过多地使用 jQuery，但我认为 jQuery 的处理方式是不优雅的。

于 2009-05-28T10:28:35.823 回答
1

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

$('<table>')

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

$('<table id="invitations" class="invitations" width="100%">')
    .append('<tbody>')
    .appendTo(selector);
    // etc
于 2009-05-28T10:14:20.733 回答
1

一种替代方法是使用 append()、addClass()、css()、attrib() 和其他 jQuery 方法来构造 DOM。链接将使代码更优雅。这会很好地工作，尤其是对于小型 DOM 树。

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

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

于 2009-05-28T10:22:23.603 回答
0

尝试通过 ajax 获取 html。

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

于 2009-05-28T10:43:30.643 回答
0

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

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

在我的愚见。

于 2009-05-28T10:45:32.700 回答
0

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

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

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

顺便说一句，我不能推荐 JQuery 模板引擎。它们要么迫使您使用非常笨拙的语法（例如 jTemplates），要么将您限制为简单的元素克隆。恕我直言，使用 .clone() 方法几乎总是更好。

于 2009-05-28T13:37:29.123 回答