绕过范围问题以有效使用chrome.storage

Question

Chrome的扩展API广泛使用了回调函数，我经常发现我遇到了范围问题。

实施例

我正在创建一个选项页面，当我发现chrome.storage.sync.set/get时，它似乎是完美的解决方案。

在options.js中：

var myOptions = {
    "option1": true,
    "option2": false,
    "option3": false
}

chrome.storage.sync.set(myOptions, function(){});

这就像一个魅力。所以现在在我的内容脚本中，我想访问并使用这些值：

// The documentation says you can pass null to retrieve all stored data
var myOptions = chrome.storage.sync.get(null, function(){});

aFunctionThatNeedsToKnowTheseOptions(myOptions);

哦，哦！

不幸的是你做不到。 chrome.storage.sync.get()不返回任何内容。所以我需要这样做：

chrome.storage.sync.get(null, function(myOptions){

    var options = myOptions; // Hurray! I have my options

    /* Now all the logic for my function has to be put
       inside this callback. This function might need
       to call other functions outside of this scope.
       This is a mess.
    */
});

问题

如何从chrome.storage中取出我的选项并进入我的内容脚本中所有其他功能的范围？

Answer 1

你的问题不是范围，而是时间问题。

var options; // everyone has access to options.

chrome.storage.sync.get(null, function(myOptions){
    options = myOptions; // Hurray! I have my options
});

console.log(options);                               // No options yet
setTimeout(function(){console.log(options)}, 2000); // Options

我认为处理异步编程陷阱的最佳方法（特别是你需要做的嵌套回调）是Promise模式。

这是一篇博客文章，旨在让您开始了解Promise以及它们如何帮助您更好地构建代码：

http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semantics

如果您发现该特定帖子很难理解，请谷歌其他人，直到找到您所做的一个。请记住，承诺并非特定于JS，因此您可能会找到其他语言的想法和解释，以帮助您理解。

Answer 2

您可以访问当前范围之外的变量。

var myOptions = {
    option1: true,
    option2: false,
    option3: false
};

function aFunctionThatNeedsToKnowTheseOptions () {

    console.log(myOptions);
}

chrome.storage.sync.get(null, function (options) {

    myOptions = options;

    aFunctionThatNeedsToKnowTheseOptions();
});