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'
    });
}();

你可能对Writing Testable JavaScript感兴趣，由Rebecca Murphey撰写。

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

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

访问变量：

window.vehicle.param1

JavaScript最佳实践 - 全局变量

4 个答案: