Мое закрытие не сработает - PullRequest
0 голосов
/ 17 мая 2018

Я пытаюсь предотвратить загрязнение глобального пространства кучей переменных, и, поскольку я пока не могу использовать 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';
        };
    };

1 Ответ

0 голосов
/ 17 мая 2018

Это потому, что результат spillObject является функцией, затем вы должны также вызвать эту функцию.Вот упрощенная версия того, что вы делаете.

var spillObject = (function(dataParent, obj, heirarchy) {
  
  console.log('first function')
  
  return function() {
    console.log('second function')
  };
  
});

var result = spillObject()

console.log(result)

result()
...