在 JavaScript 中为全局变量列表赋值

Posted 2023-05-07

【中文标题】在 JavaScript 中为全局变量列表赋值

【英文标题】：Assigning values to a list of global variables in JavaScript

【发布时间】：2010-09-17 03:22:31

【问题描述】：

嘿，现在我正在使用 jQuery，并且我有一些全局变量来保存一些预加载的 ajax 内容（预加载以使页面变得又快又好）：

$.get("content.py?pageName=viewer", function(data)
    viewer = data;);
$.get("content.py?pageName=artists", function(data)
    artists = data;);
$.get("content.py?pageName=instores", function(data)
    instores = data;);
$.get("content.py?pageName=specs", function(data)
    specs = data;);
$.get("content.py?pageName=about", function(data)
    about = data;);

如您所见，我们严重违反了 DRY 原则，但是……我真的没有办法解决它……有什么想法吗？

也许是一个数组？

【参考方案1】：

使用 jQuery 的 each 方法遍历页面名称数组，然后设置一个全局（在窗口范围内）变量：

jQuery.each(
    ["viewer", "artists", "instores", "specs", "about"],
    function (page) 
        $.get("content.py?pageName=" + page,
            new Function("window[" + page + "] = arguments[0]"));
    
);

更新：其实，你甚至不需要“新功能”：

jQuery.each(
    ["viewer", "artists", "instores", "specs", "about"],
    function (page) 
        $.get("content.py?pageName=" + page, function ()  window[page] = arguments[0]; );
    
);

【讨论】：

我喜欢 jquery...但是 Shog 的回答是真正解决我的问题的答案：/ 谢谢 :)

【参考方案2】：

您不需要eval() 或Function()。正如您所怀疑的，数组会很好地完成这项工作：

(function() // keep outer scope clean

   // pages to load. Each name is used both for the request and the name
   // of the property to store the result in (so keep them valid identifiers
   // unless you want to use window['my funky page'] to retrieve them)
   var pages = ['viewer', 'artists', 'instores', 'specs', 'about'];

   for (var i=0; i<pages.length; ++i)
   
      // "this" refers to the outer scope; likely the window object. 
      // And will result in page contents being stored in global variables 
      // with the same names as the pages being loaded. We use the with()
      // construct to create a local scope for each callback with the
      // appropriate context and page name.
      with (context: this, pageName: pages[i])
         $.get("content.py?pageName=" + pageName, function(data)
            context[pageName] = data;);
   

)(); // close scope, execute anonymous function

// at this point, viewer, artists, etc. are populated with page contents 
// (assuming all requests completed successfully)

【参考方案3】：

您可以使用 new Function 避免 eval：

var names = ['viewer', 'artists', 'instores', 'specs', 'about'];
for (var i = 0; i < names.length; i++)
   $.get("content.py?pageName=" + names[i], new Function('data', names[i] + ' = data;'));

虽然还好不了多少

【参考方案4】：

您只能在该页面调用一次，并返回一个 json 对象而不是文本

viewer:'me',
artists:'you',
instores:'instores',
specs:'specs',
about:'about'

并评估 由于现在你调用了 N 次你的服务器，这会减慢所有速度，你应该重新考虑你的逻辑！

附言。在我写的时候，我看到了 RoBorg 的答案，你看，当你使用 new Function 时，你在后台使用 eval，所以如果你想使用它（在某些浏览器中也更快）

【参考方案5】：

这里没有使用eval，虽然有点啰嗦。

function get_content(name)
   $.get("content.py?pageName=" + name, function(data) window[name] = data;);


var names = ['viewer', 'artists', 'instores', 'specs', 'about'];
for (var i = 0; i < names.length; i++)
    get_content(names[i]);

但是其中一位回答者提出了一个很好的观点，您可能应该尝试将所有这些请求合并为一个，否则您的服务器将针对页面的每个请求的动态内容被命中 6 次。

【参考方案6】：

这些建议的解决方案中的大多数都避免使用 eval。 Doduglas Crockford 的“Code Conventions for the javascript Programming Language”进一步强化了这种做法，其中部分内容是

"评价是邪恶的

eval 函数被滥用最多 JavaScript 的特性。避免它。

eval 有别名。不要使用 函数构造函数。”