jquery-plugin中的全局变量或局部变量
如何为jquery-plugin提供单独的局部变量，这些变量可以在不同的插件函数中访问？
我的脚本显示内容为“123”的警报，但我期待’abc’。 所以变量’t’只存在一次而不是每个插件两次。 因此，对于每个插件实例，应该还有一个变量’t’的实例。
通常的方法是使用data函数来存储与元素本身上的特定元素相关的信息。 所以在你的情况下（ 实例 ）：
(function ($) { $.fn.doSomething = function() { alert(this.data("myHtmlControl")); } $.fn.myHtmlControl = function(option) { this.data("myHtmlControl", option); } })(jQuery);
如果您需要存储多个选项，这里有一个更强大的示例（ 实时复制 ）：
(function ($) { var defaults = { msg1: "(msg1)", msg2: "(msg2)" }; $.fn.doSomething1 = function() { alert(getOption(this, "msg1")); return this; } $.fn.doSomething2 = function() { alert(getOption(this, "msg2")); return this; } $.fn.myHtmlControl = function(options) { this.data("myHtmlControl", $.extend({}, defaults, options)); return this; }; function getOption(inst, name) { var obj = inst.data("myHtmlControl"); return (obj || defaults)[name]; } function setOption(inst, name, value) { var obj = inst.data("myHtmlControl"); if (!obj) { obj = $.extend({}, defaults); inst.data("myHtmlControl", obj); } obj[name] = value; } })(jQuery); jQuery(function($) { $("#theButton").click(function() { $('#ctrl1').myHtmlControl({msg1: "abc"}); $('#ctrl2').myHtmlControl({msg2: "123"}); alert("about to do ctrl1"); $('#ctrl1').doSomething1().doSomething2(); alert("about to do ctrl2"); $('#ctrl2').doSomething1().doSomething2(); }); });
所有你需要的是：
// jQuery Plugin Boilerplate // A boilerplate for jumpstarting jQuery plugins development // version 1.1, May 14th, 2011 // by Stefan Gabos // remember to change every instance of "pluginName" to the name of your plugin! (function($) { // here we go! $.pluginName = function(element, options) { // plugin's default options // this is private property and is accessible only from inside the plugin var defaults = { foo: 'bar', // if your plugin is event-driven, you may provide callback capabilities for its events. // execute these functions before or after events of your plugin, so that users may customize // those particular events without changing the plugin's code onFoo: function() {} } // to avoid confusions, use "plugin" to reference the current instance of the object var plugin = this; // this will hold the merged default, and user-provided options // plugin's properties will be available through this object like: // plugin.settings.propertyName from inside the plugin or // element.data('pluginName').settings.propertyName from outside the plugin, where "element" is the // element the plugin is attached to; plugin.settings = {} var $element = $(element), // reference to the jQuery version of DOM element the plugin is attached to element = element; // reference to the actual DOM element // the "constructor" method that gets called when the object is created plugin.init = function() { // the plugin's final properties are the merged default and user-provided options (if any) plugin.settings = $.extend({}, defaults, options); // code goes here } // public methods // these methods can be called like: // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside the plugin, where "element" // is the element the plugin is attached to; // a public method. for demonstration purposes only - remove it! plugin.foo_public_method = function() { // code goes here } // private methods // these methods can be called only from inside the plugin like: // methodName(arg1, arg2, ... argn) // a private method. for demonstration purposes only - remove it! var foo_private_method = function() { // code goes here } // fire up the plugin! // call the "constructor" method plugin.init(); } // add the plugin to the jQuery.fn object $.fn.pluginName = function(options) { // iterate through the DOM elements we are attaching the plugin to return this.each(function() { // if plugin has not already been attached to the element if (undefined == $(this).data('pluginName')) { // create a new instance of the plugin // pass the DOM element and the user-provided options as arguments var plugin = new $.pluginName(this, options); // in the jQuery version of the element // store a reference to the plugin object // you can later access the plugin and its methods and properties like // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or // element.data('pluginName').settings.propertyName $(this).data('pluginName', plugin); } }); } })(jQuery);
资料来源： http ： //stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/