Javascript jQuery插件，带有；“本地”；属于给定插件实例的变量

我正在开发jQuery插件，但在变量的“范围”方面遇到了问题。每个插件都需要跟踪一个相当大的多维数组，以及jQuery插件所连接的根元素

如下所示，我定义了

var$rootEl=null和
var multidArray=null位于插件代码的顶部；但是，当我运行
$（anySelector）.pluginName（“value”）
在多个元素上（或者当我使用不同的选择器调用
.pluginName（）
两次时），这些变量似乎没有沙盒化/作用域化到插件实例，因此第二个实例覆盖了这两个值，而第一个实例在DOM中看起来是空的（因为所有jQuery操作都应用于
$rootEl
，而原始值在第二次jQuery插件调用时被覆盖）

昨天我尝试将插件转换为使用init和
this.varname
来存储值，它似乎正确地保留了插件每个实例的
this.rootEl
属性，但我必须将所有函数移到
var PluginName={…}
并将它们从
funcName=function（）
切换到
funcName:function（）
，以查看插件实例的“本地”变量。然后我遇到了许多未定义函数的错误，因此我尝试在所有函数调用前加上
this.
和
PluginName.
作为
this.functionName（）
或
PluginName.functionName（）前缀
分别用于某些函数，但不是所有函数。我的一些函数是从另一个运行回调函数并将数据传递给它的jQuery插件调用的，在这种情况下，
this.$rootEl
变为
未定义的

(function ($){

    var PluginName = {

        init: function(options, rootEl) {

            this.options = $.extend({}, this.options, options);

            this.rootEl  = rootEl;
            this.$rootEl = $(rootEl);

            this.setListeners();

            return this;

        },

        options: {
            rootvar: "test"
        },

        ...

        setListeners:function (){

            var self = this;

            this.$rootEl.on("div", "click", function () {
                $.proxy(self.divClick, self);
            });

        }

    };

    ...

    $.fn.pluginName = function(options) {

        this.init = function(options, rootEl) {

            this.options = $.extend({}, this.options, options);

            this.rootEl  = rootEl;
            this.$rootEl = $(rootEl);
            this.multidArray = null;


            return this;

        };

        this.each(function() {

            var plugInstance = Object.create(PluginName);
            plugInstance.init(options, this);
            $.data(this, 'pluginName', plugInstance);

        });

    }

}(jQuery));

我如何重构代码以存储多维数组和根元素，使之只有给定的插件才能在内部检索和修改？我当然不应该对大型数组使用
.data（）

谢谢！
插件只是一个附加到jQuery对象的函数。它没有多个实例，但可以多次调用。每个调用都会创建一个新的作用域，但是，在
pluginName
函数之外声明的变量将由每个调用共享

与您在第二次迭代中尝试的面向对象方法不同，我建议您重新使用多个函数。但是，您可以将所有必需的参数传递给这些函数，这样它们就不必依赖不明确的
this
值

由于您只包含了部分代码片段，我无法清楚地了解您要实现的目标，但我在下面提供了一个示例插件，它突出了如何正确使用scope


（函数（$）{
//在此处声明每个“pluginName”调用都可以共享的变量
var defaultColor='绿色'
//将元素作为参数传递意味着我们不必依赖于含糊不清的“this”。
函数someTransformation（$el，someColor）{
返回$el.css（{backgroundColor:someColor}）
}
$.fn.pluginName=函数（颜色，idx）{
//在此处声明每次调用“pluginName”时应重新初始化的变量
变量els=[]
这个。每个（函数（）{
变量$el=$（此）
someTransformation（$el，默认颜色）
els.push（$el）
})
//我们仍然可以使用存储的数组
if（els[idx]）{
someTransformation（els[idx]，颜色）
}
}
})($)
$（“#first i”）.pluginName（'red'，2）
$（“#第二个i”）.pluginName（'blue'，0）
i{
显示：内联块；
宽度：50px；
高度：50px；
利润率：10px；
}
div{
边框：1px纯黑；
}
正如@Damon所说，jquery插件没有什么特别之处——它只是一个函数，而JS就是关于函数的；）

所以你所有的问题都是因为没有考虑你所有的用法。
我不知道你有（或计划有）什么用途，但我会这样做。它是一个为每个实例存储“bigArray”的插件。将其递增并放入对象html中。解释如下：


（函数（$）{
让_plugInstances=[]；
功能插件工厂（选项）{
设_plugInstances=[]，
_创建=功能（选项）{
让$el=$（这个），
id=$el.data（'PlugID'）||（+newdate+''+Math.random（））.replace（'.'，'.'）；
如果（_plugInstances[id]）
返回_plugInstances[id]；
$el.data（'PlugID'，id）；
_plugInstances[id]=新插头（$el，选项）；
返回_plugInstances[id]；
};
this.instantiate=函数（选项）{
让newPlugs=this.map（_create）；
返回newPlugs.length>1？newPlugs:newPlugs[0]；
}
}
功能插件（rootEl，选项）{
设$rootEl=rootEl，
_选项=选项，
_bigArr=[]；
this.add=（项目）=>{
_大推力（项目）；
归还这个；
};
this.refresh=（）=>{
_$rootEl.html（$rootEl.data（'PlugID'）+”：“+bigArr.join（'-'））；
归还这个；
}
}
$.extend（{plug:new PlugFactory}）；
//扩展插件范围
$.fn.extend({
plug:$.plug.instantiate
});
})（jQuery）；
//用法
$（文档）.ready（函数（）{
$（'div'）.plug（{opt:'whatever'}）；
$（'div'）。在（'click'，function（）上{
$（this.plug（））
.add（1）
.refresh（）；
})
$（'#i4'）.plug（{opt:'whatever'}）.add（2.refresh（）；
});
div{border:solid 2p
(function ($){

    var PluginName = {

        init: function(options, rootEl) {

            this.options = $.extend({}, this.options, options);

            this.rootEl  = rootEl;
            this.$rootEl = $(rootEl);

            this.setListeners();

            return this;

        },

        options: {
            rootvar: "test"
        },

        ...

        setListeners:function (){

            var self = this;

            this.$rootEl.on("div", "click", function () {
                $.proxy(self.divClick, self);
            });

        }

    };

    ...

    $.fn.pluginName = function(options) {

        this.init = function(options, rootEl) {

            this.options = $.extend({}, this.options, options);

            this.rootEl  = rootEl;
            this.$rootEl = $(rootEl);
            this.multidArray = null;


            return this;

        };

        this.each(function() {

            var plugInstance = Object.create(PluginName);
            plugInstance.init(options, this);
            $.data(this, 'pluginName', plugInstance);

        });

    }

}(jQuery));