javascript - 创建 jquery 扩展。范围问题

Question

我创建了一个简单的 jQuery 扩展(这是我的第一个)。

(function($){
  var MyClass = function(opt){
     //..
  };
  //one of the methods of my extension
  $.fn.myExtension = function(opt){
    this._ext = new MyClass(opt);
    return this;
  };
  $.fn.myExtensionOtherMethod = function(){
    if(this._ext){
      //do something ..
    }
    return this;
  };
}(jQuery));

//using ..
$(document).ready(function(){
  $('#selector').myExtension({
    //options ..
  });
  $('#selector').myExtensionOtherMethod();
});

当我调用方法 $('#selector').myExtensionOtherMethod(); 时，this 不包含 this._ext 变量。我知道这是其他范围，但我知道有一些方法可以在两种方法中访问该变量。我该怎么做？

Answer 1

这实际上不是范围问题。这是因为 jQuery 原型(prototype) $.fn 为您提供了一个 jquery 对象作为 this。即使每次将新的 jQuery 对象设置为上下文时您都选择相同的元素，以便该属性消失。您可以将该属性放在 DOM 元素上并实现您想要的结果。

(function($) {
    var MyClass = function(opt) {};
    //one of the methods of my extension
    $.fn.myExtension = function(opt) {
        this[0]._ext = new MyClass(opt);
        return this;
    };
    $.fn.myExtensionOtherMethod = function() {
        if (this[0]._ext) {
            //do something ..
        }
        return this;
    };
}(jQuery));

//using ..
$(document).ready(function() {
    $('#selector').myExtension({
        //options ..
    });
    $('#selector').myExtensionOtherMethod();
});

这只是上面的一个简单示例。如果你的选择器找到了不止一个元素，你应该遍历它们。但是我只抓取了第一个索引，因为你是按 ID 选择的。

fiddle :https://jsfiddle.net/AtheistP3ace/gd1ehk0d/

正如@charlietfl 在上面提到的那样，我同意该评论。很乐意解释为什么您所做的没有奏效，但可能有更好的方法来实现您的目标。