jQuery 소스 구조분석 1. IIFE(즉시 함수 호출 표현식)

jQuery 소스 코드의 전체 구조를 살펴보자.

오픈소스를 제대로 분석하려면 무엇보다 전체적인 구조를 파악해야 한다.

---

1. jQuery IIFE

외부에서 jQueyr 라이브러리 스크립트 코드를 불러오기만 하면 변수 선언, 생성자 호출 없이 사용할 수 있다.

그 원리는 무엇일까?

다음 소스는 jQuery 소스 코드의 처음 시작 부분과 마지막 끝 부분이다.

// jQuery Start
(function( global, factory ) {
 
    if ( /*... code/*/) {
 
        // ... more code
 
    } else {
 
        factory( global );
 
    }
 
 
}(window , function( window, noGlobal ) {
 
 // ... more code
 
}));
// jQuery End

원리는 IIFE(즉시 함수 호출 표현식)에 있다.

1) IIFE(즉시 함수 호출 표현식)

(function( global, factory ) {
    // more code...
}(window ,function( window, noGlobal ) {/* code */} ));

IIFE 익명 함수를 닫힌 스코프에 묶어 자바스크립트가 로딩되면서 즉시 호출한다.

전역 객체(window)를 오염시키지 않으며, 다른 라이브러리와의 출동을 예방하는 형태이다.

---

2) IIFE의 인자 (window, 익명 함수)

(window, function( window, noGlobal ) {...

IIFE(즉시 호출 함수 표현식)를 호출할 때 인자로 window 전역 객체 참조와 익명 함수를 전달한다.

인자로 전달하는 익명 함수가 jQuery의 실질적인 함수 객체이다.

익명 함수를 factory라는 이름의 매개변수로 받는다.

 

즉, 여기서 실행할 함수는 호출문과 넘겨진 매개변수 뒤쪽에 있다.(= 인자)

이러한 패턴을 UMD(Universal Module Definition(범용 모듈 정의) 라고 부른다.

---

3) IIFE의 실행

if ( /* ... code */) {
        
    // ... more code
} else {
    factory( global );
}    

전달 받은 익명 함수(jQuery의 실질적인 함수)에 global 전역 객체(window) 참조를 인자로 넘겨 즉시 호출한다.

---

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.