Question

这个概念是有两个插件用于表单，另一个插件用于按钮。我想将我页面中的所有表单绑定到JQuery插件，该插件将处理一些工作，让我们说这是我的插件

$.fn.PluginForm = function (Options) {
var o = jQuery.extend({
    SomeOption: 1
}, Options);

var Validate = function(){
    if(o.SomeOption == 1)  return true;
    else return false;
};

$(this).on('submit', function(e) {
    e.preventDefault();
    //some code here
});
};

在我的情况下，表单实际上没有按钮，该帖子是从另一个控件触发的。这是因为我想要构建的应用程序的结构。按钮插件是：

$.fn.PluginButton = function (Options) {
var o = jQuery.extend({
    Actions: [],
    FormID: ''
}, Options);

$(this).click(function(){
    var Form = $('#' + o.FormID);
    if(Form.length > 0 && Form.PluginForm.Validate()) {
        Form.submit();
        //do something
    }
    else{ 
        //do something else
    }
});
};

我想成功的是在Form元素上调用验证函数，但我不想调用PluginForm的另一个实例。像$('#' + o.FormID).PluginForm.Validate()

这样的东西

所有这些必须是插件，因为在同一页面中会有很多表单和很多按钮。此外，还有很多按钮可以在同一表单上调用提交，但具有不同的选项。这就是我想要一次调用表单实例的原因。此外，将验证的控件将作为PluginForm选项中的参数传递。像$('#' + o.FormID).PluginForm({ Action: ‘Validate’ })这样的东西不是一个选项，因为它会丢失PluginForm的初始参数。

Answer 1

您可以将插件实例保存在元素的.data（）结构中，然后再将其调用。大多数插件都是这样使用的。

/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */

// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global
    // variable in ECMAScript 3 and is mutable (i.e. it can
    // be changed by someone else). undefined isn't really
    // being passed in so we can ensure that its value is
    // truly undefined. In ES5, undefined can no longer be
    // modified.

    // window and document are passed through as local
    // variables rather than as globals, because this (slightly)
    // quickens the resolution process and can be more
    // efficiently minified (especially when both are
    // regularly referenced in your plugin).

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

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the
        // contents of two or more objects, storing the
        // result in the first object. The first object
        // is generally empty because we don't want to alter
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {

        init: function() {
            // Place initialization logic here
            // You already have access to the DOM element and
            // the options via the instance, e.g. this.element
            // and this.options
            // you can add more functions like the one below and
            // call them like so: this.yourOtherFunction(this.element, this.options).
        },

        yourOtherFunction: function(el, options) {
            // some logic
        }
    };

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

取自：https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js

还有更多jquery插件设计模式可能更适合您在http://jqueryboilerplate.com/的插件。

使用DOM元素的id访问插件实例

1 个答案: