jquery-plugin 中的全局或局部变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8310285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
global or local variables in a jquery-plugin
提问by user1027167
How is it possible to give a jquery-plugin individual local variables, that are accessable in different plugin-functions?
如何为 jquery 插件提供可在不同插件函数中访问的单独局部变量？
My script shows an alert with the content '123', but I am expecting 'abc'. So variable 't' exists only once and not twice for each plugin. So for each plugin-instance there should be also an instance of variable 't'.
我的脚本显示了一个内容为“123”的警报，但我期待的是“abc”。所以变量“t”对于每个插件只存在一次而不是两次。因此，对于每个插件实例，还应该有一个变量“t”的实例。
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
var t = null;
$.fn.doSomething = function()
{
alert(t);
}
$.fn.myHtmlControl = function(option) {
t = option;
}
})(jQuery);
$(function () {
$('#ctrl1').myHtmlControl("abc");
$('#ctrl2').myHtmlControl("123");
$('#ctrl1').doSomething();
})
</script>
</head>
<body>
<div id='ctrl1'>Ctrl1</div>
<div id='ctrl2'>Ctrl2</div>
</body>
</html>
回答by TeChn4K
All you need is here :
你所需要的都在这里：
// 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);
Source : http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
来源：http: //stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
回答by T.J. Crowder
The usual way to do this is to use the datafunction to store your information related to a specific element on the element itself. So in your case (live example):
执行此操作的常用方法是使用该data函数将与特定元素相关的信息存储在元素本身上。所以在你的情况下（现场例子）：
(function ($) {
$.fn.doSomething = function()
{
alert(this.data("myHtmlControl"));
}
$.fn.myHtmlControl = function(option) {
this.data("myHtmlControl", option);
}
})(jQuery);
If you need to store multiple options, here's a more robust example (live copy):
如果您需要存储多个选项，这里有一个更强大的示例（实时复制）：
(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();
});
});
