我正在尝试找到一种方法来最大程度地减少选择器查找的次数。我的问题是我有一个用基 $(document).ready() 定义的变量,需要在嵌套在 $(document).ready() 中的函数中更新
考虑这个例子(编辑:我更新它以使其更具解释性)
<script>
//var $current_page = $home_page; **<--I DONT want to do this, going global
and of course it doesn't work since
$home_page isn't defined yet.**
$(document).ready(function() {
var $home_page = $("#home-page");
var $portfolio_page = $("#portfolio-page");
var $about_page = $("#about-page");
var $current_page = $home_page; // **<--This variable, in this scope level,
// is what I want updated**
$("#home-btn").click(function () {
$current_page.stop()
$current_page.show()
$current_page.animate({
duration: 360,
easing: 'easeInCirc',
complete: function() {
$(this).css({ top: -700 });
}
);
$current_page = $home_page;
});
$("#portfolio-btn").click(function () {
$current_page.stop()
$current_page.show()
$current_page.animate({
duration: 360,
easing: 'easeInCirc',
complete: function() {
$(this).css({ top: -700 });
}
);
$current_page = $portfolio_page; //<--This needs to somehow update the
// variable in the $(document).ready
// scope, but not global**
});
});
<script>
如何更新变量 $current_page 而不使其成为全局变量?
编辑: 这样做是为了在您单击菜单项时为当前页面 div 设置动画。是的,它缺少东西,是的,它可能没有意义。这只是一个示例,并非实际应用。
我知道这个例子对于性能来说仍然微不足道,忽略这个事实。我只想知道如何实现这一目标,而不是关于它是最佳实践还是性能的类(class)。谢谢大家。
最佳答案
内部函数创建一个 closure ,捕获它定义的范围内的变量。所以你已经有了你要的东西......
...这是否是个好主意是另一回事。
对于初学者来说,您实际上并没有修改您列出的代码中的值 - 您正在为 $current_page
分配它已经初始化的相同值。
但假设您只是省略了通常用于为 $current_page
选择一个不同值的代码,您需要问问自己:这真的是必要的?您正在根据元素 ID 执行查找并将对该元素的引用缓存在变量中,而不知道您是否或何时真正需要它。充其量,这会导致可能不必要的查找;在最坏的情况下,它可能会导致内存泄漏。为什么不只跟踪 ID 本身,并在实际需要的时间和地点查找元素呢?在您真正遇到性能问题之前,不要担心性能...否则您可能会发现过早的优化导致的问题多于解决的问题。
同样适用于 $home_page
、$portfolio_page
和 $about_page
- 您正在使您的页面在以后您可能需要引用这些元素,这时您也可以根据需要查找它们。
关于javascript - 更新 jQuery $(document).ready() 基本范围内的变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3159446/