javascript - jQuery 插件实例变量

Question

我从 jQuery 插件开始，对于新手问题深表歉意。我的目标是让一个插件实例化两次，其中每个实例都有自己的变量值。但是，它们似乎共享命名空间。

例如，给定以下插件:

(function ( $ ) {

    var x = false;

    $.fn.test = function() {

        alert(x);

        if ( !x )
           x = true;

        return this;

    };

}( jQuery ));

从以下 div 调用:

$( "div1" ).test();
$( "div2" ).test();

警报首先显示 false，然后显示 true，当目标是必须设置警报将显示 false 两次的变量集时。

这可能吗？

Answer 1

您的问题有些困惑。您的插件是一个简单的功能。您不会通过调用函数来“实例化”它。所以你也不要“实例化”你的插件。

你可以在你的函数中实例化一些东西，并将它们保存在某个地方。

由于外部作用域仅运行一次，因此在您的原始解决方案中您只能获得一个变量 x 的实例。

如果您在函数内部创建它，则每次调用它时都会创建一个新实例。

我假设您想为调用此插件的每个元素创建一个实例。一个好的解决方案是将您的数据附加到您启动插件的 DOM 元素，例如:

(function ( $ ) {
    $.fn.test = function() {
        var vars = this.data('testPlugin');
        if (!vars) {
            vars = {
                x: false,
                something: 'else'
            };
            this.data('testPlugin', vars);
        }

        alert(vars.x);
        vars.x = !vars.x;

        return this;
    };
}( jQuery ));

尝试 this fiddle .