Question

首先 - 我没有完全理解JQuery小部件。我看待它们的方式就是可以自己保持状态和表现形式的对象。我用于设计的例子来自微软的“SILK”项目。

问题 - 当我忙于为新网站创建视觉元素作为JQuery小部件时，一切都很顺利，直到我用小部件初始化了超过1个元素。实例变量（数组）似乎是全局的，而不是其他所有东西。所以我创建了一个简单的测试项目来演示行为：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.9.2.min.js"></script>
    <script type="text/javascript">
        (function ($, undefined) {
            $.widget('AR.MultiQueue', {
                options: {
                    queueName: "",
                    Names: [],
                    Wrong: [],
                    Right: []
                },

                _create: function () {
                    var temp = [];
                    for (var i = 0; i < this.options.Names.length; i++) {
                        console.log('pushing ' + this.options.Names[i] + ' for ' + this.options.queueName);
                        this.options.Wrong.push(this.options.Names[i]);
                        temp.push(this.options.Names[i]);
                    }

                    this.options.Right = temp;
                },

                Test: function () {
                    console.log(this.options.queueName);
                    for (var i = 0; i < this.options.Names.length; i++)
                        console.log('Name->' + this.options.Names[i]);
                    for (var i = 0; i < this.options.Wrong.length; i++)
                        console.log('Wrong->' + this.options.Wrong[i]);
                    for (var i = 0; i < this.options.Right.length; i++)
                        console.log('Right->' + this.options.Right[i]);
                },

                destroy: function () {
                    $.Widget.prototype.destroy.apply(this, arguments);
                }
            });
        }(jQuery));

    </script>
</head>
<body>
<div id="a"></div>
    <div id="b"></div>
    <script type="text/javascript">
        (function () {
            $('#a').MultiQueue({ queueName: 'a', Names: ["a"] });
            $('#b').MultiQueue({ queueName: 'b', Names: ["b"] });
            setTimeout(function () {
                $('#a').MultiQueue('Test');
                console.log('Next widget');
                $('#b').MultiQueue('Test');
            }, 1000);
        })();


    </script>
</body>
</html>

因此我预期的输出是每个小部件仅打印出相应的（“a”或“b”）数组字符串3次。相反，输出是：

pushing a for a
pushing b for b
a
Name->a
Wrong->a
Wrong->b
Right->a
Next widget
b
Name->b
Wrong->a
Wrong->b
Right->b

正如您所看到的，两个窗口小部件都为使用直接实例变量“push”的数组打印出“a”和“b”。现在我只是重写我的小部件以使用临时数组对象，例如示例中的'Right'选项var，但我感觉有更多的jQuery小部件然后我可以理解（因为，我是否以我的方式编写代码）应该???）

我在网上搜索了这个，但我唯一想到的就是
- 不要使用jQuery PLUGINS作为实例
- jQuery小部件存储在数组中的东西
- 事实上我从来没有真正理解javascript中的数组（因为事实数组具有固定的大小，而最接近的是C＃中的List＆lt;＆gt;）。

无论如何，我真的想知道为什么会这样（如果我能期待更多这些惊喜，这花了一点时间才能找到）

由于

Answer 1

在选项中使用null代替[]，仅在_create或_init上启动它们。发生这种情况是因为数组为该窗口小部件类型实例化一次（基本上讲），并作为每个创建的新窗口小部件的参考。原始类型被复制（递归）但引用了数组，因此当jQuery复制选项时，数组保持不变。

Array作为JQuery Widget实例变量

1 个答案: