Я пытаюсь предотвратить загрязнение глобального пространства кучей переменных, и, поскольку я пока не могу использовать let
, я должен сделать замыкания.Итак, у меня есть базовая веб-страница с загрузочным аккордеоном, каждая карта скрывает разные примеры.В одном у меня есть форма, которая спрашивает <select>
, какова ваша позиция.OnChange будет захватывать объект eventData, вызывать spillObject () (метод замыкания) и заполнять содержимое другой аккордеонной карты. Это работает , но проблема в том, Я не могу заставить его работать как простое закрытие .Кажется, ничего не происходит, и, поскольку вы не можете отладить замыкание, кроме как заставить его выплевывать везде console.logs (), я не могу выяснить, что с ним не так.
Вот код:
$(function() {
$("#position").change( /*(*/ function(eventData) {
var div = $('#explodedObject');
div.html('');
var result = spillObject('#explodedObject', eventData, '');
/*};*/
div.append(result);
} /*)()*/ );
var spillObject = (function(dataParent, obj, heirarchy) {
var heirArr = heirarchy == '' ? [] : heirarchy.split('_');
heirArr.push(1);
var teir = heirArr.length - 1;
var id = "#collapse" + heirArr.join('');
var headerID = 'header' + heirArr.join('');
var card = document.createElement('div');
card.classList.add('card');
var cardHeader = document.createElement('div');
cardHeader.classList.add('card-header');
cardHeader.id = headerID;
var h5 = document.createElement('h5');
h5.classList.add('mb-0');
var button = document.createElement('button');
button.classList.add('btn', 'btn-link');
button.setAttribute('data-toggle', 'collapse');
button.setAttribute('data-target', id);
var cardBody = document.createElement('div');
cardBody.classList.add('card-body');
var collapse = document.createElement('div');
collapse.id = id.substr(1, id.length - 1);
collapse.classList.add('collapse');
collapse.setAttribute('data-parent', dataParent);
var dl = document.createElement('dl');
dl.id = '#' + heirArr.join('');
var dt;
var dd;
var x;
return function() {
for (x in obj) {
dt = document.createElement('dt');
dd = document.createElement('dd');
dt.innerHTML = x;
if (typeof obj[x] == 'object' && heirArr.length < 3) {
heirArr[teir]++;
innerObj = spillObject(dl.id, obj[x], heirArr.join('_'));
dd.appendChild(innerObj);
} else {
dd.innerHTML = obj[x];
}
dl.append(dt);
dl.append(dd);
}
heirArr.pop();
heirArr[heirArr.length - 1] = parseInt(heirArr[heirArr.length - 1]);
heirArr[heirArr.length - 1]--;
collapse.appendChild(cardBody);
button.innerHTML = 'card ' + heirArr.join('.');
h5.appendChild(button);
cardHeader.appendChild(h5);
card.appendChild(cardHeader);
card.appendChild(collapse);
cardBody.appendChild(dl);
return card;
};
});
})();
По сути, я следую этому шаблону:
var method = (function(param){
var var1 = 'default value';
return function(){
var1 = 'something else';
};
})();
Должен ли я использовать этот шаблон, и если да, то он скрыл бы переменные?
var method2 = function(param) {
return function() {
var var1 = 'default value';
};
};