Javascript:全局变量=坏？

Question

我制作了一个简单的 Chrome 扩展程序，可以自动将我带到我正在观看的系列节目的下一集。只是要清楚:代码有效! :p

但是，由于对 Chrome API 的调用大部分是异步的，我不得不将函数分成 3 个不同的部分，并且我不得不使用全局变量才能打开新标签页。

因为我一直听说全局变量是不好的风格，所以我想知道有什么办法可以解决这个问题(尽管是一个小问题)。

欢迎任何提示!

//Global var = bad style?
var newUrl;

//Event listener for extension button click
chrome.browserAction.onClicked.addListener(getHistory);

function getHistory (tab) {
    chrome.history.search({text: "watchop.com/watch/"}, processHistory)
}

function processHistory  (history) {
    var lastUrl = history[0].url;
    var regEx = /-(\d{3})-/;

    //There is no history or the last page was the home page, so just go to the home page
    if ( (history.length == 0)  || !regEx.test(lastUrl)) {
        newUrl = "http://www1.watchop.com/";

    //There is history: get the number of the last viewed episode
    } else {
        //grab first captured group
        var lastEp = regEx.exec(lastUrl);
        lastEp = lastEp[1];
        var newEp = parseInt(lastEp) + 1;
        newUrl = "http://www1.watchop.com/watch/one-piece-episode-" + newEp + "-english-subbed/";
    }

    //Get possible tabs in which OP is opened
    chrome.tabs.query({url: "http://www1.watchop.com/*"}, gotoOP);
}

function gotoOP (tabs) {

    //There are open tabs
    if (tabs.length != 0) {
        var tab = tabs[0];
        chrome.tabs.highlight({tabs: tab.index}, doNothing);
        //Change window location of the active tab
        chrome.tabs.executeScript(tab.id, {code: "document.location = '" + newUrl + "'"}, doNothing)

    //No open tabs, just make a new one
    } else {
        chrome.tabs.create({url: newUrl})
    }
}

//Bogus function because some chrome API calls require a callback function
function doNothing (window) {
    return;
}

Answer 1

您可以使用高阶函数(返回函数的函数)来构建符合 Chrome API 预期签名的“自定义”回调。

您的问题是:您想要使用附加参数 newUrl 回调到 chrome.tabs.query 函数，而 API 只会将选项卡列表提供给回调。

解决方案:编写参数化回调

function gotoOP(url) {
  return function(tabs) { // <-- Construct and return an (anonymous) function
    //There are open tabs
    if (tabs.length != 0) {
      var tab = tabs[0];
      chrome.tabs.highlight({tabs: tab.index}, doNothing);
      //Change window location of the active tab
      chrome.tabs.executeScript(
        tab.id,
        {code: "document.location = '" + newUrl + "'"},
        doNothing
      );
    //No open tabs, just make a new one
    } else {
      chrome.tabs.create({url: url}); // <-- Using the parameter here
    }
  };
}

//Get possible tabs in which OP is opened
chrome.tabs.query({url: "http://www1.watchop.com/*"}, gotoOP(newUrl));

事实上，JavaScript 有一个函数叫做bind()。 ，它允许您设置调用函数时 this 的内容。您也可以使用它:

function gotoOP(tabs) {
  //There are open tabs
  if (tabs.length != 0) {
    var tab = tabs[0];
    chrome.tabs.highlight({tabs: tab.index}, doNothing);
    //Change window location of the active tab
    chrome.tabs.executeScript(
      tab.id,
      {code: "document.location = '" + newUrl + "'"},
      doNothing
    );
  //No open tabs, just make a new one
  } else {
    chrome.tabs.create({url: this.url}); // <-- Using the parameter here
  }
}

chrome.tabs.query({url: "http://www1.watchop.com/*"}, gotoOP.bind({url: newUrl}));