! ($) {$ (function() {})} (window.jQuery)의 기능은 무엇입니까?

Question

트위터 부트 스트랩을 사용하여 사이트를 만들고 툴팁을 초기화하려고했습니다. application.js에

 $("[rel=tooltip]").tooltip()

같은 것을 추가하는 것 외에도 다음 코드를 부트 스트랩 문서에 사용하지 않으면 내 툴팁이 초기화되지 않습니다.

 
!function ($) { 

    $(function(){ 

    }) 

}(window.jQuery) 

위의 코드는 무엇을 수행합니까?

Answer 1

코드

function() { 
}() 

또는 자주

(function() { 
})() 

로도 즉시-호출 기능 식 (IIFEs)로 알려진 self-invoking anonymous 기능을가 기록을 깨는에 의해 설명 할 수 있습니다. 익명 함수를 인라인으로 즉시 실행합니다.

Explain the encapsulated anonymous function syntax에서 자세히 알아보십시오.

익명 기능은 강력한 기능이며 범위 지정 ("변수 이름 간격")과 같은 이점이 있습니다 (What is the purpose of a self executing function in javascript? 참조).

---

은 이제 그들은 이제 지금은 !을 건너 뛸

function ($) { 

}(window.jQuery) 

을 사용하고 있습니다.

따라서 그들은 window.jQuery을 인수로 함수에 넣고 $을 수락합니다. 이 window.jQuery (원래의 jQuery 객체)에 $ 별칭을 따라서 $는 항상 closure 내부 jQuery object를 참조 것이라는 점을 보장한다 무엇

는 상관없이 다른 라이브러리는 그 ($) 외부 촬영 한 경우.

이렇게 코드를 작성하면 $을 사용하여 클로저가 항상 작동합니다.

또 다른 이점은 $이 가까이 scope chain의를 제공하고, 따라서 그것이 그렇지 않으면 우리 경우했다 것보다 폐쇄 내부의 $ 개체를 찾기 위해 JS 인터프리터를위한 시간이 적게 걸립니다 익명 함수의 인수로 제공한다는 것입니다 세계 $을 사용했습니다.

---

$(function(){ 

}) 

그것은 당신이 이미 dom is ready는, 따라서 모든 event binding's이 제대로 작동 할 때 실행이 함수 내에서 그 코드를 보장하는, 알고 하듯이 jQuery의 문서 준비 블록입니다.

더 http://api.jquery.com/ready/

에서 읽고 그 무엇 !이되었습니다 않습니다 잘 짧은에서 What does the exclamation mark do before the function?

에서 here 또는 설명 :

는 !의 장점을 설명하기 위해 케이스를 고려하자,

(function() { 
    alert('first'); 
}()) 


(function() { 
    alert('second'); 
}()) 

당신이 console에서 위의 코드를 붙여 넣을 경우 10

, 두 개의 경고를 얻을 것이다, 그러나 당신은이 오류 발생 원인

TypeError: undefined is not a function 

을받을 수 있습니까? JS 엔진이 위의 코드 블록을 실행하는 방법을 시뮬레이션 해보자. 이 익명의 함수를 실행합니다 function() {alert('first');}()는 경고를 표시하고 아무 것도 반환하지 않기 때문에 undefined은 () 안에 반환됩니다. 두 번째 함수에서도 같은 일이 발생합니다. 이 블록의 실행 후 그래서, 그것은

(undefined)(undefined) 

같은 가지고 뭔가를 종료하고 구문의 같은 self-invoking anonymous 기능처럼, 그 함수를 호출하려고하지만, 먼저, (undefined)는 함수가 아닙니다. 따라서 undefined is not a function 오류가 발생합니다. !이이 종류 또는 오류를 수정합니다. !은 어떻게됩니까? 위의 답변 링크에서 줄을 인용하고 있습니다.

당신이 사용하는 경우!, 함수는 단항 (논리) NOT 연산자의 하나의 값이됩니다.

이것은 함수가 표현식으로 계산되도록합니다. 은이 함수를 즉시 인라인으로 호출 할 수있게합니다.

이 위의 문제를 해결, 우리는 당신이 단순히이

같은 문서를 준비 블록 내부에 도구 설명 코드를 넣을 수 있습니다 귀하의 경우를 들어

!(function() { 
    alert('first'); 
}()) 


!(function() { 
    alert('second'); 
}()) 

---

같은 !를 사용하여 위의 블록을 다시 작성할 수 있습니다

$(function(){ 
    $("[rel=tooltip]").tooltip(); 
}); 

그리고 정상적으로 작동합니다.

doc ready block없이 $("[rel=tooltip]").tooltip()을 사용하면이 코드가 실행될 가능성이 있으며 DOM에 rel=tooltip의 요소가 아직 없습니다. 따라서 $("[rel=tooltip]")은 빈 집합을 반환하고 tooltip은 작동하지 않습니다. 브라우저로

이 doc ready block없이 작동하지 않습니다 예 마크 업,

. 
. 
. 
<script type="text/javascript"> 
    $("[rel=tooltip]").tooltip(); 
</script> 
. 
. 
. 
. 
<a href="#" rel="tooltip">Something</a> 
<a href="#" rel="tooltip">Something</a> 
<a href="#" rel="tooltip">Something</a> 

, 그것은 바로이 같은 현실을 직시으로 JS 코드를 실행, 마크 업 순차적으로 해석합니다. 그리고 여기에 JS 블록을 실행할 때 아직 JS 블록 다음에 나타나는 것처럼 a rel="tooltip" 태그를 아직 파싱하지 않았습니다. 따라서 그들은 그 순간 DOM에 있지 않습니다.

위의 경우 $("[rel=tooltip]")은 비어 있으므로 툴팁이 작동하지 않습니다. 그래서 모든 일이 지금 당신에게 의미가

$(function){ 
    // put all your JS code here 
}); 

희망처럼 document ready 블록 내부의 모든 JS 코드를 넣어하는 것이 안전합니다.