IE8 JS 错误：对象不支持此属性或方法

Question

我正在使用我在网上找到的以下 JS 来实现响应式导航。源代码上没有关于 IE8 中出现任何错误的信息，但是我正在 BrowserStack (Win7+IE8) 中进行一些兼容性测试并收到“对象不支持此属性或方法”错误。这是整个脚本：

<script>
$(function() {  
    var pull        = $('#menu');  
        menu        = $('nav ul');  
        menuHeight  = menu.height();  

    $(pull).on('click', function(e) {  
        e.preventDefault();  
        menu.slideToggle();  
    });  
});  

$(window).resize(function(){  
    var w = $(window).width();  
    if(w > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});
</script>

这是 IE8 不喜欢的行（特别是字符 6）：

if(w > 320 && menu.is(':hidden')) { 

任何解决这个问题的帮助都很棒，我仍然不是最擅长 JS。

Answer 1

我希望您意识到单个 var 语句并不适用于所有变量。您正在声明全局变量。

Answer 2

完全停止将 jQuery 对象存储在全局变量中。按需创建它们并不需要太多成本，而且您不会遇到您遇到的这个生命周期/范围问题：

<script>
$(function() {  
    $('#menu').on('click', function(e) {  
        e.preventDefault();  
        $('nav ul').slideToggle();  
    });  
});  

$(window).resize(function(){  
    var menu = $('nav ul'); 
    if($(window).width() > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});
</script>

这里适用的一些通用设计/代码布局思路：

1. 尽可能避免使用全局变量。
2. 不要在一个范围内声明某些内容，然后尝试在另一个范围内使用它（除非是全局的，否则将不起作用，请参阅规则 #1），如果全局也可能存在时间问题。
3. 仅在使用它们的函数中需要时获取选择器结果。很少有理由在函数的生命周期之外缓存类似的东西。
4. 如果您要在一个函数中多次引用同一个 jQuery 对象，那么您可能希望在函数执行期间将其保存到一个局部变量中（只要其结果不会在函数）。