Как вынести построение DOM в отдельную функцию с настраиваемыми options?

Question

[0348raven]

Есть выдача товара, выводятся допустим по 20 штук, при этом есть огромный фильтр и подгрузка по скроллу. Сейчас это 2 разных скрипта, но хотелось бы объединить в один и вынести построение DOM в отдельную функцию.
В каждом из вызовов есть 2 отличающихся друг от друга момента, при получении ответа, когда что-либо изменилось в фильтре шлю данные, получаю ответ и использую $('.container').html(html);, в то время как при подгрузке скроллом $(html).appendTo('.container');.

Код для подгрузки скроллом:

function scrollLoad (){
    var pages = 1;
    var load = true;

    $(document).on('scroll', function () {

        if (load) {

            var $heightContainer = $('.container').height() - 500;

            if($(this).scrollTop() > $blockBarContainer) {
                load = false;
                pages++;

                $.getJSON('/someURl/' + pages, function(data){

                    var items = data.items;

                    if (items.length !== 0) {
                        var html = '';
                        $.each(items, function(key, val){
                            html += '<li class="item">' +
                                '<div class="item-wrap">';
							html += val.someInfo +
								'</div>' +
                                '</li>';

                            $(html).appendTo('.container');

                            html = '';
                            load = true;
                        });
                    } else {
                        // var html = '';
                        load = false;
                    }

                })

            }

        }

    });
}

Код для фильтра:

function filterLoad() {
    var ajaxTimeout = false,
        delayBeforeSend = '';

    var data = $('.filter').serialize();

    function sendForm() {
        $.getJSON('/someURl/', data, function(data){
        	
            var items = data.items;

            if (items.length !== 0) {
                var html = '';
                $.each(items, function(key, val){
                	
                    html += '<li class="item">' +
                        '<div class="item-wrap">';
					html += val.someInfo +
                        '</div>' +
                        '</li>';

                    $('.container').html(html);
                });
				
            } else {
                var html = '';
            }
        })
    }
	
	if (ajaxTimeout) clearTimeout(ajaxTimeout);
    loadSubscriptions();
    ajaxTimeout = setTimeout(sendForm, delayBeforeSend);
	
}

Использую именно getJSON(), так как удобнее.

Вопрос в следующем: как вынести построение DOM в отдельную функцию, но при этом чтобы можно было указать options.
Задачи:

1. Не забыть о цикле который есть, а конкретно о var items = data.items;
   
2. А также настраиваемые .append() и .html()
   

P.S. Естественно, я не жду готового решения, просто подсказки в каком направлении копать.

Answer 1

[Юрий Костин]

1. Вынесите в отдельную функцию рендер одного item-а. Лучше если функция будет получать данные в качестве аргумента, а на выходе отдавать HTMLElement - в вашем случае со всеми детьми.
2. Лучше создавайте ноды, вместо работы со строками, или используйте тогда уж js string template.
3. Достаточно проверять items.length
4. Постарайтесь постепенно отказаться от jquery, если, конечно, не поддерживаете какое-нибудь старьё. items.forEach вам вполне подойдёт. И можно будет вообще отказаться от проверки items.length, только сохраняйте в items пустой массив, если данные не пришли
5. Если я не ошибаюсь, то теперь, когда функция возвращает вам элемент вашего списка, вы уже дальше сами можете определить, как его использовать: полностью заменять содержимое, или добавлять. И значит вам не нужны никакие options.

Мне если честно не до конца понятна концепция $('.container').html(html); и $(html).appendTo('.container');, а вникать мне не хочется. Что у вас тут происходит? То есть, почему разная логика в разных случаях?

Comments

[0348raven]

В одном случае я меняю содержимое контейнера, перезатирая существующие данные, в другом добавляю items уже к существующим.

[Юрий Костин]

0348raven:

jquery морочит вам мозги, лишая вас чистоты в коде.

Если у вас должен быть пустой контейнер перед добавлением элементов, то напишите отдельную функцию, которая будет чистить контейнер. Либо через innerHTML, либо через removeChild, как хотите.
И вызывайте эту фукнцию, в случае, когда нужно добавлять элементы в пустой контейнер.

А дальше должна просто отрабатывать функция, которая добавляет элементы(я всё-таки за создание элементов через createElement, чем за формирование html строки) в ваш контейнер. И всё будет очень наглядно и просто.

[0348raven]

Юрий Костин:

Последний вопрос: использовать ноды - это серверную часть на Node.js надо написать или вы что-то иное имели в виду?

[Юрий Костин]

Нет-нет, я имел ввиду узлы.

Во втором комментарии этой ветки я написал:

А дальше должна просто отрабатывать функция, которая добавляет элементы(я всё-таки за создание элементов через createElement, чем за формирование html строки) в ваш контейнер.

То есть, например, вы делаете:

var spanText = 'Hello, World';
var span = '<span>' + spanText + '</span>';

А я предлагаю:

var spanText = 'Hello, World';
var span = document.createElement('span');
span.textContent = spanText;