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>

并不容易得多：您根本不需要更改书面代码，只需将其包装。

Answer 2

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

有很多方法可以实现这一目标，但这是一个简单的例子...

定义代表您功能的对象：

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）撰写的可测试JavaScript来感兴趣。

Answer 3

每个人都有自己的JS样式，但是我更喜欢使用存储我所有变量的全局JS对象，但仅在真正需要的地方。

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

另一个选项是使用可以执行所有操作的函数，因此您使用的变量包含在您的函数的名称空间中。

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

Answer 4

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

window.vehicle = { param1 : "abc", param2 : document.getElementById('idXYZ').value};  // It is not necessary "var" 

访问变量：

window.vehicle.param1