JavaScript最佳实践-全局变量

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

    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");
        }
    });

---

使用隐私功能：

<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>

（功能（）{
var vehicle=document.getElementById（“车辆”）；
var residence=document.getElementById（'residence'）；
vehicle.setAttribute（“类”、“隐藏”）；
document.getElementById（'myList'）。addEventListener（'change'，function（）{
Array.prototype.forEach.call（document.queryselectoral（'.show'），函数（e）{
e、 setAttribute（“类”、“隐藏”）；
});
var sel=+this.selectedIndex-2；
如果（sel>=0）{
vehicle.setAttribute（“类”、“显示”）；
}否则{
住宅。设置属性（“类”、“显示”）；
}
});
})();

---

这并不容易：您根本不需要修改编写的代码，只需将其打包即可。

每个人都有自己的JS风格，但我更喜欢使用全局JS对象来存储所有变量，但这仅限于真正需要的地方

var GLOBAL = 
{
    key:"value",
    key2:variable,
    key3:
    {
        key4:variable,
        key5:'hans'
    }
};
GLOBAL.key3.key5 = 'peter';

另一种选择是使用一个做所有事情的函数，因此您使用的变量包含在函数的名称空间中

var foo = function()
{
    var iAmInvisible = 42;
}

---

最好将代码模块化为可测试和可重用的组件

有很多方法可以实现这一点，但这里有一个简单的例子

定义表示要素的对象：

yourNS = window.yourNS || {};

yourNS.YourFeature = {
    init: function (options) {
        var vehiculeEl = document.querySelector(options.vehicleEl),
            residenceEl = document.querySelector(options.residenceEl),
            listEl = document.querySelector(options.listEl);

        vehiculeEl.className = 'hide';

        listEl.addEventListener('change', function () {

            var showVehicule = this.selectedIndex - 2 >= 0;

            vehiculeEl.className = showVehicule? 'show' : 'hide';
            residenceEl.className = showVehicule? 'hide' : 'show';
        });
    }
};

使用它：

!function () {
    yourNS.YourFeature.init({
        vehiculeEl: '#vehicule',
        residenceEl: '#residence',
        listEl: '#myList'
    });
}();

---

您可能对Rebecca Murphey编写的感兴趣。

对于全局变量，您可以使用对象“窗口”：

要访问变量，请执行以下操作：

window.vehicle.param1

---

视情况而定，如何使用此代码？什么是应用程序？如果你不想让你的用户窥探某些东西，你应该考虑缩小你的javascript代码而不是

e.className=“hide”？@Mike Minizing在向用户隐藏内容方面确实没有多大帮助。只需复制代码并将其粘贴到“unnifier”中，例如，您的代码就会再次完全可读。@War10ck为什么？和@dandavis如果您想首先改进这个脚本，您应该更改
vehicle.setAttribute（“class”，“hide”）至
vehicle.className=“隐藏”
and than而不是
Array.prototype.forEach.call
您可以简单地使用
[].forEach.call
，也可以在顶部获取所有变量声明，并添加严格模式我想演示实现包装器函数的简单性，基本上保留orig代码（无论好坏）使这种简单性非常清晰。否则，它可能会混淆更改的实际帮助。@Givi这是正确的语法。您正在使用此
}
关闭匿名函数，然后通过类似
（）的函数调用立即调用它这个。它最初的编写方式应该引发语法错误。@War10ck但JSLint会引发错误：
将调用移动到包含函数的参数中。
lint和hint的用途不同。lint用于检查人类代码的可读性，hint用于检查机器代码的质量
window.vehicle.param1