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

Access plugin instance using the id of the DOM Element

本文关键字：访问 插件 实例 id DOM 元素 使用      更新时间：2023-09-26

这个概念是有 2 个插件，一个用于表单，另一个用于按钮。我想将页面中的所有表单绑定到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 元素上调用验证函数，但我不想调用插件表单的另一个实例。像$('#' + o.FormID).PluginForm.Validate()

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

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

相关文章：