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

对比例2＆amp; 3

它没有解释示例1专业人员的好处

示例2和3之间的好处

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

对比示例3

一直编写jQuery而不是别名$，导致代码更长。为什么不继续使用$？

动态创建jQueryUI对话框的好处

1 个答案: