使用DOM元素的ID訪問插件實例

Question

概念是有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 
    } 
}); 
}; 

我想成功是調用表單元素上的驗證功能，但我並不想調用的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/。