Как сказал @Damon, в плагине jquery нет ничего особенного - это просто функция, а JS - это все о функциях;)
Так что все проблемы у вас возникают, потому что вы не продумываете все ваши привычки.Я не знаю, какие у вас привычки (или планы), но вот как бы я это сделал.Это плагин, который хранит "bigArray" для каждого экземпляра.Увеличиваем его и помещаем в объекты html.Пояснения после:
(function($) {
let _plugInstances = [];
function PlugFactory(options) {
let _plugInstances = [],
_create = function(options) {
let $el = $(this),
id = $el.data('PlugID') || (+new Date +''+Math.random()).replace('.', '_');
if (_plugInstances[id])
return _plugInstances[id];
$el.data('PlugID', id);
_plugInstances[id] = new Plug($el, options);
return _plugInstances[id];
};
this.instantiate = function(options) {
let newPlugs = this.map(_create);
return newPlugs.length > 1 ? newPlugs : newPlugs[0];
}
}
function Plug(rootEl, options) {
let _$rootEl = rootEl,
_options = options,
_bigArr = [];
this.add = (item) => {
_bigArr.push(item);
return this;
};
this.refresh = () => {
_$rootEl.html(_$rootEl.data('PlugID') + ":" + _bigArr.join('-'));
return this;
}
}
$.extend({plug: new PlugFactory});
// extend plugin scope
$.fn.extend({
plug: $.plug.instantiate
});
})(jQuery);
// Usage
$(document).ready(function () {
$('div').plug({opt: 'whatever'});
$('div').on('click', function() {
$(this).plug()
.add(1)
.refresh();
})
$('#i4').plug({opt: 'whatever'}).add(2).refresh();
});
div{border: solid 2px gray;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>1</div><div>2</div><div>3</div>
<br/>
<div id="i4">4</div>
Пояснения:
Как вы можете видеть, что вы использовали в $ .fn.pluginNameперемещен в отдельную функцию (скажем, в класс) (PluginFactory)
Это на самом деле функция, которая будет хранить экземпляры вашего плагина.
Как вы, наверное, заметили, переменные начинаются с подчеркиванияони частные свойства , дело в том, что они замыкания , поэтому они видны только внутри функций, в которых они определены, и поскольку они являются переменными, они не доступны как свойство экземпляра функции.
Также, пожалуйста, примите во внимание ES6 "контекстно-безопасные" вещи, такие как краткая запись функций и let .
Теперь дело с экземплярами.
Как вы можете видеть, у нас есть некоторый UID, сгенерированный для каждого элемента (вы можете использовать любой другой генератор, это просто POC )
Далее мы создадимновый экземпляр с новым оperator
И сохраните его в Map , чтобы упростить процесс получения экземпляров.
И сохраните наш UID в элементах данных jquery (PliginID), так что теперь мы знаемесли у нашего элемента уже есть экземпляр плагина.
Теперь основная часть (функция плагина).
Это на самом деле ваш экземпляр, который будет жить во время вызовов ".plug ".
Каждый раз, когда вы получаете $ ('# element'). plug (), вы получите свой изначально созданный экземпляр.
Таким образом, у вас будет доступ ко всем вашим личными разработайте ваши публичные методы.
PS.Я не утверждаю, что это лучший, безусловно, один из многих, в качестве примера того, как решить задачу "хранить многомерный массив и корневой элемент таким образом, чтобы только этот плагин мог внутренне извлекать и изменять"
Надеюсь, это достаточно общее, чтобы быть полезным;) Ура!