Question

嘿，现在我正在使用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原则，但是......我真的没有办法解决这个问题...任何想法？

也许是阵列？

Answer 1

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

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

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

Answer 3

您可以使用新功能避免使用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;'));

虽然tbh

并不是很好

Answer 4

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

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

并评估从现在开始你的服务器调用了N次，这会慢下来，你应该重新考虑你的逻辑！

PS。在我写的时候，我看到了RoBorg的答案，你看，当你使用新的功能时，你正在使用eval，所以如果你想使用它去（在某些浏览器中也更快）

Answer 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次点击动态内容。

Answer 6

大多数提议的解决方案都避免使用 eval 。在Doduglas Crockford的“Code Conventions for the JavaScript Programming Language”中进一步强化了这种做法，其中部分说明了

“eval is Evil

eval函数被滥用最多   JavaScript的功能。避免它。

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

将值分配给JavaScript中的全局变量列表

6 个答案: