jQuery：是否有任何理由不将 DOM 元素存储在变量中而不是将它们附加到 DOM？
我正在开发一个插件，它可以获取远程页面的一部分，并保存该部分以便在 jQuery UI 对话框小部件中使用；最初我将 HTML 附加到 DOM 并用 display:none 隐藏它，直到用 $.dialog 调用它，但我意识到我可以将 DOM 节点留在多变的。
有什么理由不这样做呢？这是一个例子：
function makeDialogLink() {
var HTML = $("<div />").load('file.html #container', function() {
$('a#test').bind('click', function(e) {
e.preventDefault();
showDialog();
});
});
function showDialog() {
$(HTML).dialog({
autoOpen : true,
width : opts.width,
modal : opts.modal,
resizable : opts.resizeable,
title : opts.title
});
// some other stuff happens in here, and a setTimout
closeDialog();
}
function closeDialog() {
$(HTML).dialog('close');
}
}
我已经从我实际做的事情中简化了很多，但这很好地概括了我的问题。
正如您所看到的，我已经加载了远程文档的一部分，我将其弹出一个对话框，然后关闭该对话框，但我从未将获取的 HTML 直接附加到 DOM ($.dialog 当然，在某个时候会这样做）。
有什么理由不这样做吗？看起来比将 HTML 放入隐藏的 DIV 中然后稍后再获取要好得多。我只是想知道以这种方式在 javascript 中使用闭包是否存在一些我不知道的陷阱。
I've got a plug-in I'm working on which fetches a portion of a remote page, and saves that portion to be used in a jQuery UI dialog widget; originally I was attaching the HTML to the DOM and hiding it with display:none until it was called with $.dialog but I realized I could just leave the DOM node in a variable.
Is there any reason not to do this? Here's an example:
function makeDialogLink() {
var HTML = $("<div />").load('file.html #container', function() {
$('a#test').bind('click', function(e) {
e.preventDefault();
showDialog();
});
});
function showDialog() {
$(HTML).dialog({
autoOpen : true,
width : opts.width,
modal : opts.modal,
resizable : opts.resizeable,
title : opts.title
});
// some other stuff happens in here, and a setTimout
closeDialog();
}
function closeDialog() {
$(HTML).dialog('close');
}
}
I've simplified this quite a bit from what I'm actually doing, but this encapsulates what my question is about pretty well.
As you can see I've loaded a portion of a remote document, I pop it up in a dialog, and close that dialog later, but I never directly attach the fetched HTML to the DOM ($.dialog does it at some point, of course).
Is there any reason to NOT do it this way? Seems a lot nicer then having to shove the HTML into a hidden DIV and then fetch it later. I'm just wondering if there's some pitfall I'm unaware of to using closures in javascript in this fashion.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我想不出这有什么严重的缺点。它可能会慢一点，因为每次您需要对话框时它都会将其重新附加到 DOM，但这并不重要，因为 1) 差异甚至不会明显，除非您弹出数百个对话框 2) 它如果有的话，可能不会比切换 div 慢多少。
这似乎是最好、最干净的解决方案。如果我处于你的位置，我会保留它。
I can't think of any serious drawbacks to that. It may be a bit slower, since it's reattaching it to the DOM every time you need a dialog but it doesn't really matter since 1) the difference would not even be noticeable unless you're popping up hundreds of dialogs and 2) it may not be that much slower, if at all, than having a div that you toggle.
It seems like the best and cleanest solution. I would keep it if I were in your position.
是的，您必须小心未附加到 DOM 的节点。 IE 因内存泄漏而臭名昭著。 （向下滚动到跨页泄漏部分。）
由于您正在创建一个独立的 DOM 树，然后将其附加到文档（在
showDialog()中），我想您的代码泄漏。当然，唯一确定的方法是获取一些分析工具并找出答案。更安全的方法是使用隐藏的
div。Yes, you have to be careful about nodes which are not attached to the DOM. IE is notoriously bad at leaking memory. (Scroll down to the section on cross-page leaks.)
Since you're creating an unattached DOM tree and then attaching it to the document (in
showDialog()), I'd imagine your code leaks. Of course, the only way to be sure is to get some profiling tools and find out.A safer way to do this is to use a hidden
div.您还可以将 ajax 调用中的数据存储为字符串（使用 $.get 或 $.ajax 代替）。仅在用户单击对话框按钮后创建 dom 元素。
You can also just store the data from your ajax call as a string (use $.get or $.ajax instead). Only create the dom elements after the user clicks on the dialog button.