JavaScript IIFE

Question

나는 JavaScript에 관해서는 꽤 초록색이라고 인정할 것이다. 그리고 나는 그것을 얻을 때마다 이상한 커브 볼이 나를 당황하게 만들 것이라고 생각한다.

(function (myiife, $) { 

    var myArrayOfThings = [];  

    myiife.myFunction = function (id) { 
     var cachedThing = myiife.getFromArray(id); 
     if (cachedThing === null) { 
      // get from server 
     } else { 
      // do something with cached item 
     } 
    }; 

    myiife.getFromArray = function (idToFind) { 
     for (var i = 0, len = myArrayOfThings; i < len; i++) { 
      if (myArrayOfThings[i].Id=== idToFind) { 
       return myArrayOfThings[i]; // Return as soon as the object is found 
      } 
     } 
     return null; 
    }; 

}(window.myiife= window.myiife|| {}, jQuery)); 

정말이 일을 호출 할 수 있기를 기대하는 적절한 방법입니다 혼란 무엇 :

나는 이런 JS 파일에 뭔가있어. 나는 아직 사물의 범위를 이해하지 못하고 정직하기가 힘듭니다.

페이지에서 myFunction을 호출하려면 다음과 같이해야 할 것으로 예상됩니까?

onclick="myiife.myFunction(1)" 

범위에 관한 내용을 읽었지만 필자는 분명히이 모든 것을 이해하는 데있어 매우 근본적인 것이 빠져 있습니다.

필자가 본 예에서 페이지에서 물건을 실행하기 위해 함수 이름 앞에 iife이라는 접두사를 붙이면 안되는 다른 사람을 보지 못했습니다.

좋은 추천 도서도 좋습니다.

Answer 1

자바 스크립트의 전체 범위 (최소한 브라우저에서)는 window입니다. 그래서 당신은 윈도우에 myiife을 첨부했고 myiffe에는 myFunction이라는 함수가 있습니다. 따라서 전역 범위 (예 : window)에서 호출하려면 물론 myiffe.myFunction()을 지정해야합니다.

당신이 볼지도 모른다 어떤 다른 사람들이 어떻게이 같은 것입니다 :

가 (객체를 반환 다른 많은 경우 사람들이 경우에 함수)를 인생의 반환 뭔가를

var myFunction = (function() { 
    var counter = 0; 
    return function() { 
     counter++; 
     console.log(counter); 
    }; 
})() 

. 이 경우 myFunction은 전역 변수이므로 myFunction()으로 호출 할 수 있습니다. IIFE로 얻은 것은 기본적으로 counter 변수를 비공개로 설정하는 것입니다. IIFE 안에있는 것들만이 접근 할 수 있습니다.

물론 myFunction을 IIFE 내부에 정의하지 않으면 전역 범위의 함수 일 뿐이며 전역 범위에서 직접 호출 할 수 있습니다. 더 나은 연습을 처음부터 당신의 HTML에서 이벤트 핸들러를 인라인 대신 코드에 결합하지 않는 것 -

function myFunction() { 
    // do something 
} 

myFunction(); 

그러나 이벤트 핸들러이 사용에 대한 귀하의 질문에

. 이렇게하면 더 많은 유연성, 더 깨끗한 분리 및 유지 보수가 용이 한 코드가 제공됩니다.