jquery插件创建问题

时间:2012-06-08 20:15:01

标签: jquery-plugins jquery

我创建了一个包含以下代码的插件:

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

这很有效,但问题是当我尝试设置多个选项并尝试在之后返回其值时,它会给出空的;设置一个选项很有效。例如。 如果在更改第一个组合框值时我称之为:     $ .myplugin({option1:'first test'}); 它工作,但当我尝试在第二个组合框上调用另一个它不保存选项,而是重置为空。

有没有修复?

1 个答案:

答案 0 :(得分: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)