动态创建 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：

结构化文件。分离 backbone (HTML) 和 UI 功能 (JS)
更高效，因为JS不必创建一些DOM对象。它们已经在 HTML 文件中给出，而 JS 只需 select 即可
设计团队无需 JS 知识即可使用 html 模板

对比示例 2&3

它没有解释示例 1 优点的好处

示例 2 和示例 3 之间的优势

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

对比示例 3

一直写 jQuery 而不是别名 $ 会导致代码变长。为什么不继续使用 $?

动态创建 jQueryUI 对话框的好处

Benefits of dynamically creating jQueryUI Dialogs

javascript

jquery

jquery-ui-dialog