javascript - 动态创建 jQueryUI 对话框的好处

Question

过去，我通常将对话框添加为 HTML，如第一个示例所示。

我从来不喜欢同时维护 HTML 页面和 JavaScript 页面，并且正在考虑使用第二个或第三个示例(哪个更 jQueryish？)。

这两种解决方案的优缺点是什么？例如，第二个或第三个解决方案是否会导致创建新的 DOM？如果是，这会导致任何问题吗？或者它们会提高性能，因为 JavaScript 更有可能被缓存？还是其他什么？？？

$("#click1").click(function() {$("#dialog").dialog("open");});
$("#dialog").dialog({
    autoOpen    : false,
    modal       : true,
    buttons     : [
        {
            text    : 'CANCEL',
            click    : function() {$(this).dialog("close");}
        }
    ]    
});

$("#click2").click(function() {$("<div title='mytitle2'>hello2</div>").dialog({
    modal       : true,
    buttons     : [
        {
            text    : 'CANCEL',
            click    : function() {$(this).dialog("close");}
        }
    ]    
    });
});

$("#click3").click(function() {jQuery('<div/>', {title: 'my title3',text: 'hello3'}).dialog({
    modal       : true,
    buttons     : [
        {
            text    : 'CANCEL',
            click    : function() {$(this).dialog("close");}
        }
    ]    
    })
});

<p id="click1">Click1</p>
<p id="click2">Click2</p>
<p id="click3">Click3</p>

<div id="dialog" title="my title1">
    hello1
</div>

Answer 1

最好的情况是将 HTML 和 JS 分开。您不喜欢此解决方案的主要原因是什么？

如果您必须将模板发送给必须重组某些 DIV 的设计团队怎么办？他们很可能对 Javascript 没有或很少了解，并且不知道该怎么做。

优点示例 1:

• 结构化文件。分离主干 (HTML) 和 UI 功能 (JS)
• 性能更高，因为 JS 不必创建一些 DOM 对象。它们已经在 HTML 文件中给出，JS 只需选择它即可
• 设计团队无需了解 JS 即可使用 html 模板

对比示例2&3

• 它没有所解释的示例 1 优点的优点

示例 2 和 3 之间的优点

• 示例 3 的性能可能更高。因为在内部，JS 必须将您编写的 html 字符串拆分为对象以创建新的 DOM 对象。但您应该循环测试它。

对比示例3

• 始终编写 jQuery 而不是别名 $ 会导致代码更长。为什么不继续使用$？