Блог

Хорошо, пожалуйста, будьте нежны, я изучаю Javascript.

У меня есть две кнопки ( <button> теги HTML5), обе они настроены на вызов одной и той же функции, в этой функции есть две другие функции (показать скрыть), теперь мне интересно, правильно ли это, т.е. Если я нажимаю на кнопку скрыть, она вызывает функцию visibility, которая затем вызываетфункция скрывает и скрывает все, что определено в этой функции, включая исходные кнопки. Но если я нажимаю на кнопку показать, она скрывает исходное содержимое и отображает дополнительное содержимое с большим количеством кнопок.(интерактивный процесс повсюду)Или возможно ли вызывать эти функции отдельно внутри этой функции, например:

     function visible() {
    function show() {
        slide = document.getElementById('side');
        pos = 0;
        move = setInterval(slider, 1000/60);
        slide1 = document.getElementById('main');
        pos1 = 100;
        move1 = setInterval(slider1, 1000/60);

        document.getElementById('welcomer').style.display = 'none';
        document.getElementById('welcome').style.display = 'none';

            function slider() {
                    if (pos == 20) {
                        clearInterval(move);
                    }else {
                        pos  ;
                        slide.style.display = 'block';
                        slide.style.width = pos   '%';
                    }
                }
            function slider1() {
                if (pos1 == 80) {
                    clearInterval(move1);
                }else {
                    pos1--;
                    slide1.style.width = pos1   '%';
                }
            }   
        }
    function hide() {
        slide = document.getElementById('side');
        pos = 0;
        move = setInterval(slider, 1000/60);
        slide1 = document.getElementById('main');
        pos1 = 100;
        move1 = setInterval(slider1, 1000/60);

        document.getElementById('welcomer').style.display = 'none';
        document.getElementById('welcome').style.display = 'none';

            function slider() {
                    if (pos == 20) {
                        clearInterval(move);
                    }else {
                        pos  ;
                        slide.style.display = 'block';
                        slide.style.width = pos   '%';
                    }
                }
            function slider1() {
                if (pos1 == 80) {
                    clearInterval(move1);
                }else {
                    pos1--;
                    slide1.style.width = pos1   '%';
                }
            }
        }
    document.getElementById('vis').addEventListener('click', show());
    document.getElementById('invis').addEventListener('click', hide());
}
  

Или семантически правильно не иметь вложенных функций, вместо этого иметь две отдельные функции и вызывать функции отдельно onclick. Например:

     function show() {
    slide = document.getElementById('side');
    pos = 0;
    move = setInterval(slider, 1000/60);
    slide1 = document.getElementById('main');
    pos1 = 100;
    move1 = setInterval(slider1, 1000/60);

        document.getElementById('welcomer').style.display = 'none';
        document.getElementById('welcome').style.display = 'none';

        function slider() {
                if (pos == 20) {
                    clearInterval(move);
                }else {
                    pos  ;
                    slide.style.display = 'block';
                    slide.style.width = pos   '%';
                }
            }
        function slider1() {
            if (pos1 == 80) {
                clearInterval(move1);
            }else {
                pos1--;
                slide1.style.width = pos1   '%';
            }
        }
    }
function hide() {
    slide = document.getElementById('side');
    pos = 0;
    move = setInterval(slider, 1000/60);
    slide1 = document.getElementById('main');
    pos1 = 100;
    move1 = setInterval(slider1, 1000/60);

        document.getElementById('welcomer').style.display = 'none';
        document.getElementById('welcome').style.display = 'none';

        function slider() {
                if (pos == 20) {
                    clearInterval(move);
                }else {
                    pos  ;
                    slide.style.display = 'block';
                    slide.style.width = pos   '%';
                }
            }
        function slider1() {
            if (pos1 == 80) {
                clearInterval(move1);
            }else {
                pos1--;
                slide1.style.width = pos1   '%';
            }
        }
    }
  

Или это возможно, для кнопки скрыть, я просто создаю массив с каждым элементом ID / Class, который я хочу скрыть, вызываю его с помощью onclick на кнопке, чтобы скрыть, а затем изменить стиль display: none; для всех элементов в этом массиве?.
И наоборот для divs, которые я бы создал с помощью button show?

Теперь я понимаю, что многое из этого можно считать самоуверенным, поэтому причина, по которой я спрашиваю, заключается в следующем: я хочу знать, какой метод будет самым быстрым с использованием ванильного javascript, какой способ сократит объем кода и сократит время загрузки с наилучшим возможным результатом, основанным на фактах.

Пожалуйста, обратите внимание, что мне пришлось писать этот код практически с нулевым знанием, поскольку я изучаю Javascript, это в первую очередь, например, и оба show / hide пока делают одно и то же, В конечном итоге функция show создаст больше divs и контента и т. Д.

Наличие вложенных функций вполне приемлемо, а часто желательно или даже необходимо. Для этого синтаксис будет следующим :

 function base_function(){
    this.function_1 = function(){};
    this.function_2 = function(){};
}
  

Это определяет конструктор функций с двумя значениями … function_1 и function_2. Затем вы можете вызвать любой из них, используя следующее

 var base = new base_function();
base.function_1();
  

Теперь, если вам нужно только ссылаться на эти дочерние функции в рамках base_function , будет достаточно чего-то вроде следующего.

 function base_function(){
    function child_function_1(){}
    function child_function_2(){child_function_1();}
}
  

Представьте function себе, как это происходит в js, тип данных, например, строковый или числовой тип. Вы можете передать его в переменные, ссылаться на него позже в коде, передавать его как обратный вызов (например setTimeout , вы передаете ссылку на функцию как переменную. т. е. setTimeout(function_1,1000) Вместо setTimeout(function_1(),1000) ). Вы также можете объявлять функции, используя var function_1 = function(){} из-за этого (и это мой предпочтительный метод).

Из-за того, как javascript обрабатывает функции, вы можете делать с ними интересные и очень крутые вещи, такие как замыкания или IIFYs! Вот отличное объяснение этого и того, как их использовать!

Чтобы ответить на ваш вопрос, я бы предложил пойти по первому маршруту, сохранив переменную внутри функции, ссылающуюся на содержимое, которое вы хотите отобразить / скрыть. Даже если это означает, что вам нужно написать несколько дополнительных строк, это делает код намного более читаемым, когда вы сохраняете модульность, а читаемость действительно важна в большинстве случаев.

Что-то вроде этого

 var Vis_Controller = function(content){
    this.content = content;
    this.hide = function(){
        content.style.display = "none";
    }
    this.show = function(){
        content.style.display = "block";
    }
}
window.addEventListener("load", function(){
    var content = document.getElementById("content");
    var button_show = document.getElementById("button-show");
    var button_hide = document.getElementById("button-hide");
    var vis_controller = new Vis_Controller(content);
    button_show.addEventListener("click",vis_controller.show);
    button_show.addEventListener("click",vis_controller.hide);
});