用多个闭包嵌套XMLHttpRequests是个好主意吗？

我有一个Greasemonkey脚本，它在视频网站的搜索结果页面上运行。该脚本的功能是获取一个JavaScript链接，该链接用Flash播放器打开一个新窗口，跳过一些重定向环，并将常规链接插入到所需的FLV文件。用多个闭包嵌套XMLHttpRequests是个好主意吗？

我已经改变脚本来做愚蠢但结构相同的事情en.wikipedia.org。我的问题是，3个嵌套闭包和嵌套xmlhttprequest是否是最好的方法来解决这个问题。

// ==UserScript== 
// @name    wiki mod example 
// @namespace   http:// 
// @description   example script 
// @include *wikipedia.org* 
// ==/UserScript== 

var candidates = document.getElementsByTagName("a"); 

for (var cand = null, i = 0; (cand = candidates[i]); i++) { 
    if (cand.href.match(/\/wiki\/W/)) { // for all articles starting with 'W' 
    var progress = document.createElement('span'); 
    progress.appendChild(document.createTextNode(" Start")); 
    cand.parentNode.insertBefore(progress, cand.nextSibling); 
    progress.addEventListener("click", 
    function(link1) { return function() { // link1 is cand.href 
     this.innerHTML = " finding..."; 

     GM_xmlhttpRequest({method:"GET",url:link1, 
     onload:function(p) { return function(responseDetails) { 
      // p is is the current progress element 
      // the first linked article starting with 'S' is *special* 
      var link2 = responseDetails.responseText.match(/\/wiki\/S[^"]+/); 
      if(!link2) { p.innerHTML = "failed in request 1"; return;} 

      GM_xmlhttpRequest({method:"GET",url:"http://en.wikipedia.org"+link2[0], 
      onload:function(p2) { return function(responseDetails) { 
       // p2 is p, ie. progress 
       // link3 would contain the URL to the FLV in the real script 
       var link3 = responseDetails.responseHeaders.match(/Content-Length.+/); 
       if(!link3) { p2.innerHTML = "failed in request 2"; return;} 

       var elmNewContent = document.createElement('p'); 
       elmNewContent.appendChild(document.createTextNode(link3)); 
       p2.parentNode.insertBefore(elmNewContent, p2.nextSibling); 
       p2.innerHTML = " <em>Done</em>"; 
      }}(p) // 3rd closure 
      }); // end of second xmlhttprequest 

     }}(this) // 2nd closure 
     }); // end of first xmlhttprequest 

    }}(cand.href), true); // 1st closure and end of addeventlistener 
    } 
}

来源

2009-11-17 Bribles

看起来像传统的异步代码流。有什么问题？ – 2009-11-17 18:55:42

问题是这是我第一次尝试编写一个grepmonkey脚本，而且我想确保我做对了。这不是一个“是这个代码错误”的问题，更是一个“这个代码是否有味道”的问题。 – Bribles 2009-11-17 18:58:27

@Bribles：当然是。 [Nested]异步代码流总是看起来很臭，但它不会更臭，串行意大利面代码;） – 2009-11-17 19:01:47

嗯，你可以通过为每个阶段创建单独的功能，然后有1级呼叫阶段2等，所以，而不是

request({onload: function(response) { 
    request({onload: function(response) { 
     request({onload: function(response) { 
      alert("psych!"); 
     }}); 
    }}); 
}});

你必须

提高可读性

request({onload: doTheNextThing}); 

function doTheNextThing(responseObject) { 
    request({onload: doTheRightThing}); 
} 

function doTheRightThing(responseObject) { 
    request({onload: doTheLastThing}); 
} 

function doTheLastThing(responseObject) { 
    alert("psych!"); 
}

来源

2009-11-17 19:04:06

这确实降低了代码的平均缩进级别。 – Bribles 2009-11-17 19:48:17

我相信你的答案亮点是我有太多的匿名函数。 – Bribles 2009-11-17 19:52:42

当这变得更加复杂时，你可能会考虑一个状态机。 http://www.ibm.com/developerworks/library/wa-finitemach1/

来源

2009-11-17 19:15:18 ykaganovich

或者如果它变得更加复杂，您可以将Promises移植到您最喜欢的JavaScript框架中。 AJAX编程从根本上被打破。我已经做了5年--4万行JS后来尝试了解决方案。

来源

2009-11-17 19:59:18 dnolen

用多个闭包嵌套XMLHttpRequests是个好主意吗？

回答

相关问题