理解函数和语义

Understanding Functions and the semantics

本文关键字：语义 函数      更新时间：2023-09-26

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

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

    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());
}

或者在语义上不使用嵌套函数，而是使用两个单独的函数，并在单击时分别调用函数。例如:

    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/类元素，调用按钮上的onclick来隐藏，然后将该数组中的所有元素的样式更改为display: none; ?反之亦然对于div，我用button show创建?

现在我明白很多这可以被认为是固执己见的，所以我问的原因是:我想知道哪种是使用香草javascript最快的方法，哪种方法会缩短代码量，减少加载时间，基于事实的最佳结果。

请注意，我不得不写这段代码几乎零知识，因为我是学习 Javascript，这些主要是例如，和显示/隐藏做完全相同的事情现在，最终显示函数将创建更多的div和内容等

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

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);
});
相关文章：