0

次のコードでプラグインを作成しました。

var myplugin = {
    init: function(options) {
         $.myplugin.settings = $.extend({}, $.myplugin.defaults, options);
    },
    method1: function(par1) {
        .....
    },
    method2: function(par1) {
        .....
    }
};
$.myplugin = function(method){
     if ( myplugin[method] ) {
    return myplugin[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
     } else if (typeof method === 'object' || !method) {
        return myplugin.init.apply(this, arguments);
     } else {
    $.error( 'Method "' +  method + '" does not exist in myplugin!');
     }
};
$.myplugin.defaults = {
     option1: 'test',
     option2: '',
     option3: ''
};
$.myplugin.settings = {};
$.myplugin();

これはうまく機能しますが、問題は、複数のオプションを設定して後でその値を返そうとすると、空になることです。1 つのオプションを設定するとうまくいきます。たとえば。最初のコンボ ボックスの値を変更する場合、次のように呼び出します: $.myplugin({option1: 'first test'}); それは機能しますが、2番目のコンボボックスで別のものを呼び出そうとすると、オプションが保存されず、代わりに空にリセットされます。

修正はありますか?

4

1 に答える 1

0

この構造を使用するようにプラグインを再編成します。

var methods = {
    settings: {
        foo: "foo",
        bar: "bar"
    },
    init: function(options) {
        this.settings = $.extend({}, this.settings, options);
    },
    method1: function(par1) {
        alert(this.settings.foo);
    },
    method2: function(par1) {
        alert(this.settings.bar);
    }
};

function MyPlugin(options) {
    this.init(options);
    return this;
}
$.extend(MyPlugin.prototype, methods);
$.myPlugin = function(options) {
    return new MyPlugin(options);
}

/* usage */

// without parameters
var obj1 = $.myPlugin();
// with parameters
var obj2 = $.myPlugin({foo: "foobar"});
// each has it's own settings
obj1.method1();
obj2.method1();

デモ: http://jsfiddle.net/ypXdS/

基本的$.myPluginに、MyPlugin クラスの新しいインスタンスを作成して返すだけです。あなたはそれを完全に取り除き、そのnew myPlugin(options)場所で使うことができます。

于 2012-06-08T20:54:15.593 に答える