Question

好的，请温柔我正在学习Javascript。

我有两个按钮（HTML5 <button>标签）它们都设置为调用相同的功能，在该功能中是另外两个功能（显示+隐藏），现在，我想知道这是否正确，即如果我点击按钮隐藏，它会调用函数可见性，然后调用函数hide并隐藏此函数中定义的所有内容，包括原始按钮。但是，如果我单击按钮显示，它会隐藏原始内容并显示额外的内容，并显示更多按钮。（可单击整个过程）或者是否可以在此功能中单独调用这些功能，例如：

    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调用它来隐藏然后将样式更改为{{1对于该数组中的所有元素？反之亦然，我会用按钮显示创建div？

现在我明白了很多可以被认为是自以为是的，所以我问的原因是：我想知道哪种方法是使用vanilla javascript的最快方法，哪种方式会缩短代码量并减少加载时间，根据事实得出最好的结果。

请注意我必须用非常零知识编写此代码，因为我学习 Javascript，这些主要是例如，并且两个show / hide都做同样的事情现在，最终show函数将创建更多的div和内容等。

Answer 1

嵌套函数是完全可以接受的，通常是可取的甚至是必要的。这样做的语法如下：

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)而不是{{1 }}）。您也可以使用setTimeout(function_1(),1000)声明函数（因为这是我的首选方法）。

由于javascript处理函数的方式，你可以用它们做一些有趣和超酷的东西 - 比如闭包或IIFY！ Here is a great explanation of these and how to use them！

要回答你的问题，我建议你选择第一条路线，同时在引用你要显示/隐藏的内容的函数中保留一个变量。即使这意味着您需要编写一些额外的行，但是当您保持模块化时，它会使代码更具可读性，并且在大多数情况下可读性确实是最佳的。

像这样的东西

var function_1 = function(){}

理解函数和语义

1 个答案: