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

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中取出，并放入我的内容脚本中所有其他功能的作用域中？

您的问题不在于作用域，而在于时间

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模式

下面是一篇博文，让您开始了解承诺以及它们如何帮助您更好地构建代码：

---

如果你觉得很难从那篇文章中理解，谷歌其他人，直到你找到一个你能理解的。请记住，承诺不是特定于JS的，因此您可能会找到其他语言的想法和解释来帮助您理解。

您的问题不在于范围，而在于时间

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模式

下面是一篇博文，让您开始了解承诺以及它们如何帮助您更好地构建代码：

---

如果你觉得很难从那篇文章中理解，谷歌其他人，直到你找到一个你能理解的。请记住，承诺并非特定于JS，因此您可能会找到其他语言的想法和解释，以帮助您理解。

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

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

function aFunctionThatNeedsToKnowTheseOptions () {

    console.log(myOptions);
}

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

    myOptions = options;

    aFunctionThatNeedsToKnowTheseOptions();
});

---

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

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

function aFunctionThatNeedsToKnowTheseOptions () {

    console.log(myOptions);
}

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

    myOptions = options;

    aFunctionThatNeedsToKnowTheseOptions();
});