javascript - jQuery 插件 : variable scope issue between plugins

Question

我对编写 jQuery 插件还很陌生，但决定尝试一下。起初，我的代码的整洁和简洁给我留下了深刻的印象，但现在我遇到了一些变量范围的问题。

下面是一些代码片段:

这里我将一些 DOM 元素缓存为我自己的插件中的变量:

cacheElements : function () {
    this.$highlighter         = $('div#highlighteranalysis');
    ...
    this.$highlighterText    = this.$highlighter.find('div#highlightertext');
},

我定义了一个函数:

createValidSelection : function (highlights) {
    ....
},

因此，通过我的插件，我可以通过此访问这些变量和函数。这很方便。但我在插件的另一部分依赖于一个名为 jquery.texthighlighter 的插件:

makeSelectable : function () {
    var createValidSelection    = this.createValidSelection,
        showNotes        = this.showNotes;
    this.$highlighterText.textHighlighter({
        onAfterHighlight: function(highlights) {
            createValidSelection(highlights);
            showNotes();
        }
    });
},

我首先将 createValidSelection 对象声明为常规变量，因为 this.createValidSelection 现在将指向 texthighlighter 对象，而不是我自己的插件对象。

这可行，但我感觉还有更好的方法。

另外，如果我想要方法 createValidSelection(highlights);将任何内容返回到我的插件，我不明白这是怎么可能的。返回将发生在 texthighlighter 对象上。

我希望有人可以向我解释如何“切换范围”。我已经查看了 .extend() 和 .proxy() 方法，但我不确定如何应用它们，或者即使它们与可能的解决方案相关。

谢谢， 亨德里克

PS:如果有任何不清楚的地方，这可能是因为我真的不知道我在说什么。我不是专业开发人员。请耐心等待:-)

Answer 1

您可以在进入 textHighlighter 闭包范围之前缓存您的上下文，并从该变量调用您的方法:

makeSelectable : function () {
    var _this = this;

    this.$highlighterText.textHighlighter({
        onAfterHighlight: function(highlights) {
            _this.createValidSelection(highlights);
            _this.showNotes();
        }
    });
},