함수 및 의미 이해

Question

좋아요, 제발 부드럽게 제발 자바 스크립트를 배우고 있습니다.

나는 두 개의 버튼 (HTML5 <button> 태그)을 가지고 있는데, 두 함수가 모두 같은 함수를 호출하도록 설정되어 있습니다.이 함수는 다른 두 개의 함수 (show + hide)입니다. 이제 이것이 맞는지 궁금합니다. on 버튼 숨김을 사용하면 함수 가시성을 호출 한 다음 함수 숨기기를 호출하고 원래 버튼을 포함하여이 함수에 정의 된 모든 것을 숨 깁니다. 내가 버튼 쇼를 클릭하면, 그것은 원래의 내용을 숨 깁니다 더 많은 버튼을 추가 컨텐츠를 표시합니다 (클릭 할 수있는 절차를 걸쳐) 아니면 예를 들어,이 함수 내에서 별도로 함수를 호출 할 수 있습니다 :.

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/클래스 요소 내가 숨기려와 버튼에 온 클릭으로 전화를 한 후 숨길하고, 배열을 만들려면 어떻게해야합니까 해당 배열의 모든 요소에 대해 스타일을 display: none;으로 변경하십시오. Divs에 대한 반대로, 버튼 쇼로 만들겠습니까?

이제 내가 알기로는이 점을 충분히 이해할 수 있습니다. 그래서 내가 묻는 이유는 바닐라 자바 ​​스크립트를 사용하는 것이 가장 빠른 방법인지 알고 싶습니다. 코드 길이를 줄이고로드 시간을 줄입니다. 사실에 근거하여 최선의 결과를 얻을 수 있습니다.

내가 가 자바 스크립트를 배우고로 거의 제로 지식이 코드를 작성해야했다 유의하시기 바랍니다, 이들은 예를 들어 주로하고, 모두 표시/숨기기는 지금 궁극적 쇼 기능을 똑같은 일을 div와 콘텐츠 등을 더 많이 생성 할 것입니다.

Answer 1

중첩 된 기능은 완벽하게 허용되며 종종 바람직하거나 필요합니다. 이렇게하려면 구문은 다음과 같습니다.

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

이 값은 ... function_1 및 function_2의 두 값을 갖는 함수 생성자를 정의합니다. 그런 다음에만 base_function의 범위 내에서 그 아이의 기능을 참조하기 위해 충분 다음과 같은 일을해야하는 경우, 이제 다음

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

를 사용하여 중 하나를 호출 할 수 있습니다. function의

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

생각해 그것은 문자열이나 숫자 유형과 같은 JS, 데이터 타입,에서와 같이. 변수에 전달하거나 나중에 코드에서 참조하거나 콜백으로 전달할 수 있습니다 (예 : setTimeout, setTimeout(function_1(),1000)이 아닌 setTimeout(function_1,1000)). 이것 때문에 (그리고 필자가 선호하는 방법이므로) var function_1 = function(){}을 사용하여 함수를 선언 할 수도 있습니다.

javascript가 함수를 처리하는 방식 때문에 클로저 또는 IIFY와 같이 흥미롭고 멋진 멋진 것들을 할 수 있습니다! Here is a great explanation of these and how to use them!

질문에 답하기 위해, 표시/숨기려고하는 내용을 참조하는 함수 안에 변수를 유지하면서 첫 번째 경로로가는 것이 좋습니다.몇 줄을 추가로 작성해야한다는 의미 일지라도 모듈화 된 상태로 유지하면 코드를 훨씬 쉽게 읽을 수 있으며 대부분의 경우 가독성이 실제로 중요합니다. 이

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