是否应始终避免使用javascript中的全局变量?

时间:2019-03-30 17:22:45

标签: javascript

我已经看到,google放置了api文档,建议在函数之外使用全局变量,例如:

var placeSearch, pauto, geocoder;

我想在功能之外使用从data返回的$.get
我还能在回调函数中使用将由data填充的全局变量吗?

var glo_var;
function callback(data){
         glo_var = data;
}

function codeAddress(address) {
    geocoder.geocode({ 'address': address}, 
    function(response, status) {
     if (status == 'OK')
      {
       var senddata = $.get('/myurl',{params}, function (data){ callback(data) });
      } else {
       }
  });
}

通过其他方式,我可以利用$.get返回的数据。我不了解封包。

编辑-为什么这是重复的,我问在哪里存储返回的数据,我已经知道如何获取它?我不确定这是使用全局变量,但是由于Google api使用了全局变量,因此我在这里询问了它。

3 个答案:

答案 0 :(得分:2)

因此,应尽可能避免使用先前答案中所述的全局变量。它是关于轻松覆盖问题以及在某些全局值被覆盖时进行故障排除。根据我自己的经验,我通常会创建一个实用程序来处理共享价值。想法如下

//global.js
(function(){
  const context = {};
  function setGlobalValue(key, value) {
    context[key] = value;
  }
  function getGlobalValue(key) {
    return context[key];
  }
  window.setGlobalValue = setGlobalValue;
  window.getGlobalValue = getGlobalValue;
}());
// app.js
function codeAddress(address) {
  geocoder.geocode({ 'address': address}, 
  function(response, status) {
   if (status == 'OK')
    {
     var senddata = $.get('/myurl',{params}, function (data){     setGlobalValue('codeAddress', data) });
    } else {
     }
});
}
// get value here
console.log(getGlobalValue('codeAddress'));

通过这种方式,我们可以通过搜索setGlobalValue来跟踪所有全局值,因为这是设置“全局”值上下文的唯一方法。

答案 1 :(得分:0)

避免使用全局变量,或者最小化JavaScript中全局变量的使用。这是因为全局变量很容易被其他脚本覆盖。全局变量还不错,甚至没有安全性问题,但它不应覆盖另一个变量的值。

在我们的代码中使用更多全局变量时,可能会导致维护问题。假设我们添加了一个具有相同名称的变量。在这种情况下,请准备好解决一些严重的错误。

为避免使用全局变量,请使用局部变量并将代码包装在闭包中。您也可以通过用json包装变量来避免这种情况:

var wrapperDemo= {
   x:5,
   y:function(myObj){
   }
};

以上,如果您想呼叫x,请使用:

wrapperDemo.x

哪个会为您返回5 ...

答案 2 :(得分:0)

您可以将所有内容包装在自调用函数中(它是闭包,但很简单)

(function(){...})()意味着函数将自行调用,仅此而已。

最佳做法是将每个.js文件包装在此自调用函数中,以使其不全局。

您的代码:

(function(){
var glo_var;

function callback(data){
         glo_var = data;
}

function codeAddress(address) {
    geocoder.geocode({ 'address': address}, 
    function(response, status) {
     if (status == 'OK')
      {
       var senddata = $.get('/myurl',{params}, function (data){ callback(data) });
      } else {
       }
  });
}
})();