0

所以，这不是一个“新”问题，但除了创建一些全局之外，我似乎找不到解决方案。但如果我有超过 1 个实例，该全局将与其他插件实例发生冲突。例如。

;(function( $, window, document, undefined ) {
    var self = {};
    function Niftyplugin(elem, config){
        this.config = $.extend( {}, $.fn.niftyplugin.config, config );
        this.elem = elem;
        this.$elem = $( elem );
        self.config = this.config;
    }
}

我可以避免不断需要做这样的事情：

var that = this;

在会产生范围问题的函数中，但如您所见 - 我正在使用全局

var self = {};或我可以使用的任何其他名称。

我的问题是，有没有更好的方法？一种更强大的方式，我的插件可以在构造函数中将不会与其他实例冲突的“this”obj分配给某个 var/obj ？

我试过...

;(function( $, window, document, undefined ) {
    var self = {};
    function Niftyplugin(elem, config, _self){  // <-- passing in _self
        this.config = $.extend( {}, $.fn.niftyplugin.config, config );
        this.elem = elem;
        this.$elem = $( elem );
        _self.config = this.config; // <-- _self
    }
 }


Niftyplugin.prototype = {
   // all the methods, and subsequently in some methods I'd have to use
   // var that = this. In situations of scope. I want to not do this and 
   // make my plugin self-contained with no global vars. But I want to circumvent 
   // need to assign "this" to vars etc..
}

$.fn.niftyplugin = function( config ) {
    if(this.length){
        this.each(function() {
            var nifty = new Niftyplugin( this, config, {} ); // <-- passing in obj
        }
    }
}

我希望我很清楚。

编辑： 为了更清楚。

可以说，在我的方法实例中......我有类似的东西：

Niftyplugin.prototype = {
     _create : function(){
         $(someobj).each(function(){
             self.someVar <------ this gives me an error. "self" is undefined.
          })
     }
}

这是我的问题。即使我在构造函数中声明了“var self”，它也不会继承到原型方法中。这让我感到困惑。现在，如果我将“var self”声明为全局变量，然后在构造函数中将其分配给它，就可以了。但是，我不想弄乱全局空间（即使它位于匿名函数中）。

现在，如果我做类似的事情

Niftyplugin.prototype = {
     _create : function(){
         var self = this;
         $(someobj).each(function(){
             self.someVar <------ this works
          })
     }
}

但我想规避总是必须在每个原型方法中做一个 var self = this 。因此，我需要一个可以在构造函数中声明或传入等的“this”等价变量……我可以使用它。如果我有使用插件的各种元素，则该 var 不会发生冲突。

4

1 回答 1

1

你还没有描述你真正想要解决的问题，我怀疑如果我们理解了这一点，我们可以提出比你在这里试图强迫的更优雅的解决方法。

jQuery 方法是 jQuery 对象的方法。因此，当它被调用时，它已this设置为当前正在操作的 jQuery 对象。这就是 jQuery 方法的设计方式和工作方式。您要么希望您的方法成为像这样工作的 jQuery 方法，要么不这样做。

如果您只是希望您的 jQuery 方法能够访问某些全局状态，那么您可以这样做：

(function() {

    // Set up protected global state for my plugin method
    // This data is available only inside this closure.
    // It is global in nature, but is not actually available in the global scope.
    var myData = {};
    myData.whatever = "foo";
    myData.whomever = "joe";

    // define the new jQuery method
    $.fn.niftyplugin = function( config ) {
        // you can access myData state here
        if(this.length){
            this.each(function() {
                // whatever code you need here
            }
        }
    }

})();

这将创建一个闭包，该闭包中的一些变量仅适用于您的插件方法。

除了某些全局状态的定义之外，您还没有描述您可能实际尝试解决的其他问题。请根据真正的问题来描述事情，而不是您试图伪造的 javascript 解决方案，因为您当前对解决方案的尝试看起来过于复杂或方向错误，或者至少问题解释得不够好，让我们知道建议什么.

另一方面，如果您想要的是每个实例数据，这些数据对于调用插件方法的每个 jQuery 对象都是独立的，那么您可以这样做：

(function() {

    // Set up protected global state for my plugin method
    // This data is available only inside this closure.
    // It is global in nature, but is not actually available in the global scope.
    var myData = {};

    // define the new jQuery method
    $.fn.niftyplugin = function( config ) {
       // set instance data on the jQuery object itself
       this.whatever = "foo";
       this.whomever = "joe";
       var self = this;

        if(this.length){
            this.each(function() {
                // inside this callback function, this is a DOM element
                // self is the jQuery obect
                // whatever code you need here
                // you can access self.whatever or self.whomever
                // to get access to instance data on this jQuery object
            }
        }
    }

})();

或者，如果您在插件方法的持续时间内只需要一些数据，您可以像这样使用局部变量：

(function() {

    // Set up protected global state for my plugin method
    // This data is available only inside this closure.
    // It is global in nature, but is not actually available in the global scope.
    var myData = {};

    // define the new jQuery method
    $.fn.niftyplugin = function( config ) {
       // set instance data on the jQuery object itself
       var whatever = "foo";
       var whomever = "joe";

        if(this.length){
            this.each(function() {
                // inside this callback function, this is a DOM element
                // whatever code you need here
                // you can access whatever or whomever
                // to get access to local variables during this method call
            }
        }
    }

})();

由于您在问题中添加了更多内容，因此这里有更多信息。如果您有这种类型的构造：

Niftyplugin.prototype = {
     _create : function(){
         var self = this;
         $(someobj).each(function(){
             self.someVar <------ this works
          })
     }
}

并且您想访问each()回调中的对象实例，那么最好的办法就是将 保存this到单独的局部变量中，例如self. this在回调中被重新分配给其他东西，.each()所以如果你想访问原始的this，那么你必须将它保存在其他地方。如果您想在没有全局变量的情况下干净地执行此操作（这是建议），那么您必须在回调函数范围内的局部变量中执行此操作。在您在此处提供的代码片段中，您唯一的选择就是添加var self = this到每个方法中。

可以使用共享相同的不同结构self。

function Niftyplugin() {
    var self = this;

    this._create = function() {
        $(someobj).each(function(){
            self.someVar <------ this works
        })
    }

    this._update = function() {
        this.each(function(){
            self.someVar <------ this works
        })
    }
}
于 2013-03-29T08:41:03.977 回答