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期望的签名的“自定义”回调。

您的问题是：您希望使用附加参数chrome.tabs.query回调newUrl函数，而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}));

Answer 2

是的，这是真的，因为在JS中，变量和函数具有范围，它们被定义为上下文。在您的代码中，您有1个变量和4个全局函数。要隐藏它们，你需要使用某种功能块来包装它们，无论命名与否。

你可以用自动执行JS函数来包装它，这样我就会隐藏所有逻辑，并且不会对全局命名空间进行规范：

(function() {
  alert('Hello World');
  })();

http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write

（与第一次相同，但在dom加载后执行）：您可以将此代码放在就绪块（包含jQuery）中，它会得到相同的结果。
在一个类中包装整个函数： http://www.phpied.com/3-ways-to-define-a-javascript-class/

Javascript：全局变量=坏？

2 个答案: