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

这个概念是有两个插件，一个用于表单，另一个用于按钮。我想将我页面中的所有表单绑定到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
});
};

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

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

我想要成功的是调用表单元素上的验证函数，但我不想调用PluginForm的另一个实例。类似于

$（'#'+o.FormID）.PluginForm.Validate（）

---

所有这些都必须作为插件，因为在同一个页面中将有许多表单和许多按钮。还有很多按钮可以在同一个表单上调用submit，但是有不同的选项。这就是为什么我想一次调用表单的实例。此外，将要验证的控件将作为参数传递到PlugInfo的选项中。类似这样的东西

$（'#'+o.FormID）.PluginForm（{Action:'Validate'}）

不是一个选项，因为它将丢失PluginForm的初始参数。

您可以将插件实例保存在元素的.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 );

摘自：

---

此外，还有更多jquery插件设计模式可能更适合您的插件

工作起来很有魅力。我不习惯这种结构，但这是我的问题；）。如果其他人读到这篇文章，唯一必须记住的是this.element=element；返回DOM对象而不是JQuery对象this.element=$（element）；tnx