jQuery 插件中的私有变量

Question

我正在制作一个 jQuery 插件，其中每个元素都应该有自己的变量。我认为这样做的正确方法是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>test 1</div>
<div>test 2</div>
<script language="javascript">
$.fn.menu = function(options) {
    var defaults = {i : 0};
    this.each(function(){
        var parameters = $.extend(defaults, options); 
        $(this).on("click", function(event){parameters.i++;alert(parameters.i);});
    });
};
$("div").menu();
</script>

但它不起作用：参数对象是全局的，因此在调用插件的所有元素之间共享。

这个例子有什么问题？

Answer 1

使用 var parameters = $.extend(defaults, options);，parameters 是对（扩展的）defaults 对象的引用。

Keep in mind that the target object (first argument) will be modified, and will also be returned from $.extend().

您需要创建一个新的对象引用，将空对象传递给 jQuery extend() 方法：

var parameters = $.extend({}, defaults, options);

这相当于：

var parameters = $.extend(JSON.parse(JSON.stringify(defaults)), options);

jQuery 插件中的私有变量

private variable in jQuery plugin

javascript

jquery

plugins

private

global-variables