Question

我一直在寻找jQuery插件的插件样板，我发现它没问题，但设计中存在一个主要缺陷，或者只是我无法弄清楚的东西。

当我创作插件时，我很容易定义只有插件才能访问的公开方法和私有方法。

当我试图在锅炉板上做类似的事情时，我被挫败了。

;(function ( $, window, document, undefined ) {

// Create the defaults once
var 
    pluginName = "defaultPluginName",
    defaults = {
        propertyName: "value"
    };

// The actual plugin constructor
function Plugin ( element, options ) {
        this.element = element;
        this.settings = $.extend( {}, defaults, options );
        this.defaults = defaults;
        this.name = pluginName;
        this.init();
}

Plugin.prototype.init = function() {
    console.log('init')
    console.log(this)
    this.yourOtherFunction();
}
Plugin.prototype.yourOtherFunction = function () {
    console.log('yourOtherFunction')
    console.log(this)
    this.yourOtherFunction2();
}
Plugin.prototype.yourOtherFunction2 = function () {
    privateFunction().bind(this)
}

var privateFunction = function() {
    console.log('private')
    console.log(this)
}   

// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[ pluginName ] = function ( options ) {
    return this.each(function() {
        if ( !$.data( this, "plugin_" + pluginName ) ) {
            $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
        }
    });
};

})( jQuery, window, document );

$(document).defaultPluginName()

无论如何你可以看到函数'privateFunction'它的范围是对象的窗口对象，但是我想要做的是将它作为插件实例的范围，或者基本上是原型方法中的'this'。

我不想做的是将范围作为函数参数传递给每个私有函数！

那么如何绑定范围呢？

Console output

init
Plugin { element=document, settings={...}, defaults={...}, more...}
yourOtherFunction
Plugin { element=document, settings={...}, defaults={...}, more...}
private
Window index.html <-- I want Plugin, not window

Answer 1

您正在调用privateFunction和然后绑定this作为其结果的范围。
所以使用（如@Khanh_TO所说）：

Plugin.prototype.yourOtherFunction2 = function () {
    privateFunction.apply(this,arguments);
}

而不是：

Plugin.prototype.yourOtherFunction2 = function () {
    privateFunction().bind(this)
}

更多详情：

在应用您传入的范围后，

bind会返回调用该函数的副本（在您的情况下为privateFunction的结果）（{{ 1}}在你的情况下）。 this的作用类似于：

bind

例如。 Function.prototype.bind = function(scope) { var _function = this; var _args = []; for (var i = 0, len = arguments.length-1; i < len; i++){ _args[i] = arguments[i+1]; } return function() { // returns the same function on which is called (not the same Function object, but // another with same properties) with 'this' equal to the first parameter and // the remaining specified parameters as parameters of the function returned return _function.apply(scope, _args); } } - ＆gt;返回一个匿名函数，该函数返回函数myFunction.bind(newScope, param1, param2, ...)并设置myFunction(param1, param2,....) 因此，作为概念证明，此代码也可以起作用：

this = newScope

但你应该使用第一个，因为最后一个用额外的段落做同样的事情。

Answer 2

替换：

Plugin.prototype.yourOtherFunction2 = function () {
    privateFunction().bind(this)
}

使用

Plugin.prototype.yourOtherFunction2 = function () {
    privateFunction.apply(this,arguments);
}

jQuery插件样板 - 具有绑定范围的私有方法？

2 个答案: