javascript - jQuery 加载与构建元素

Question

我正在开发一个网页，它有几个并不总是可见的菜单。据我所知，有3种方法来实现菜单:
1.我可以在index.html文件中声明菜单，并将其样式设置为“display:none”并根据需要显示/隐藏它们。例如:

//html:
<div id="div-to-always-show">I want to always show this</div>
<div id="menu-to-sometimes-show" style="display:none">I want to sometimes show this</div>

//script
$("#menu-to-sometimes-show").show();

这样做的缺点是页面必须处理许多实际上并不影响页面的元素。 2. 当需要时，我可以用 jQuery 构建菜单。例如:

$("body").append(
    $("<div>").text("I want to sometimes show this")
);

3.我可以使用 .load() 从服务器请求菜单，并将其存储在变量中(因此我只需请求一次)。例如:

var $menu = null;
function showMenu(){
    if($menu === null)
        $menu = $("<div>").load("menuToSometimesShow.html");
    $("body").append($menu);
}
function hideMenu(){
    $menu.detach();
}

所以我的问题是:有什么理由选择一种方法而不是其他方法？

Answer 1

1. 将其包含在 HTML 中并通过类间接隐藏该元素或直接通过 display:none; 隐藏该元素(具体取决于具体情况)(如果您的菜单不是这样的话)太大了，例如仅包含少量链接。

2. 当然，如果您在 JavaScript 中使用 HTML，这只是一个品味问题，但我绝对建议您尽可能将 HTML 保留在应有的位置。并且只将必要的部分放入脚本文件中。它不仅速度慢 - 您仍然需要提交所有数据，因此您没有真正的优势。

3. 当您加载大菜单时，可能包含一个或多个子菜单，甚至可能包含图像，那么通过单独的 AJAX 请求来处理它绝对是有意义的。在更复杂的情况下，仅根据需要提交部分菜单甚至是有意义的，例如如果仅单击了 1，则不需要子菜单 2 至 9。