JavaScript 最佳实践 - 全局变量

Question

任何人都可以提供有关如何改进下面的脚本的反馈吗？该脚本确实可以正常工作，但使用全局变量，我被告知使用全局变量可能会导致代码出现问题。

    var vehicle = document.getElementById('vehicle');
    var residence = document.getElementById('residence');

    vehicle.setAttribute("class", "hide");

    document.getElementById('myList').addEventListener('change', function(){
        Array.prototype.forEach.call(document.querySelectorAll('.forms'), function(e){
            e.setAttribute("class", "hide");
        });

        var sel=+this.selectedIndex - 2;
        if(sel >= 0){
            vehicle.setAttribute("class", "show");
            residence.setAttribute("class", "hide");
        } else {
            residence.setAttribute("class", "show");
            vehicle.setAttribute("class", "hide");
        }
    });

Answer 1

使用隐私功能:

<script type="text/javascript">
(function(){

    var vehicle = document.getElementById('vehicle');
    var residence = document.getElementById('residence');

    vehicle.setAttribute("class", "hide");

    document.getElementById('myList').addEventListener('change', function(){
        Array.prototype.forEach.call(document.querySelectorAll('.show'), function(e){
            e.setAttribute("class", "hide");
        });

        var sel=+this.selectedIndex - 2;
        if(sel >= 0){
            vehicle.setAttribute("class", "show");
        } else {
            residence.setAttribute("class", "show");
        }
    });

})();
</script>

并没有变得更容易:您根本不需要更改编写的代码，只需将其包装起来即可。