0

私は jQuery プラグインのプラグイン ボイラー プレートを見てきましたが、問題はないと思いますが、設計に 1 つの大きな欠陥があるか、私には理解できないことがあるかもしれません。

現時点でプラグインを作成する場合、プラグインのみがアクセスできるパブリックに公開されたメソッドとプライベート メソッドを簡単に定義できます。

ボイラープレートで似たようなことをしようとしたとき、私は挫折しました。

;(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
4

2 に答える 2

3

呼び出しprivateFunctionてから、thisその結果のスコープとしてバインドしています。
だから使用してください（@Khanh_TOが言ったように）：

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

それ以外の：

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

詳細:

bind渡したスコープを適用した後（あなたの場合はの結果）が呼び出される関数のコピーを返します（あなたの場合）。は次のようなものです：privateFunctionthisbind

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);
        }
}

例えば。myFunction.bind(newScope, param1, param2, ...)-> 無名関数を返し、それがmyFunction(param1, param2,....)set を持つ関数を返しますthis = newScope。
したがって、概念実証として、次のコードも機能します。

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

ただし、最後のものは追加のパッセージで同じことを行うため、最初のものを使用する必要があります。

于 2013-12-12T15:34:54.317 に答える