0

首先 - 我对 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<>）。

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

谢谢

4

1 回答 1

0

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

于 2014-09-17T21:01:21.887 回答