[javascript] 익명 함수를 정의하고 jQuery를 인수로 전달하는 이유는 무엇입니까?

여러분이 보여준 두 개의 코드 블록은 실행시기와 이유가 크게 다릅니다. 그들은 서로 배타적이지 않습니다. 그들은 동일한 목적을 제공하지 않습니다.

자바 스크립트 모듈

(function($) {
  // Backbone code in here
})(jQuery);

이것은 즉시 호출 함수로 구현 된 “JavaScript 모듈”패턴입니다.

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
• http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

이 코드의 목적은 “모듈화”, 개인 정보 보호 및 코드 캡슐화를 제공하는 것입니다.

이 구현은 호출하는 (jQuery)괄호에 의해 즉시 호출되는 함수입니다 . jQuery를 괄호 안에 전달하는 목적은 전역 변수에 로컬 범위를 제공하는 것입니다. 이것은 $변수 를 찾는 오버 헤드의 양을 줄이는 데 도움이되며 경우에 따라 축소 자에 대한 더 나은 압축 / 최적화를 허용합니다.

즉시 호출하는 함수가 즉시 실행됩니다. 함수 정의가 완료되는 즉시 함수가 실행됩니다.

jQuery의 “DOMReady”기능

이것은 jQuery의 “DOMReady”함수에 대한 별칭입니다 : http://api.jquery.com/ready/

$(function(){
  // Backbone code in here
});

jQuery의 “DOMReady”함수는 DOM이 JavaScript 코드에 의해 조작 될 준비가되면 실행됩니다.

백본 코드의 모듈 대 DOMReady

jQuery의 DOMReady 함수 내에 백본 코드를 정의하는 것은 잘못된 형식이며 잠재적으로 애플리케이션 성능을 손상시킵니다. 이 함수는 DOM이로드되고 조작 할 준비가 될 때까지 호출되지 않습니다. 즉, 개체를 정의하기 전에 브라우저가 DOM을 한 번 이상 파싱 할 때까지 기다립니다.

DOMReady 함수 외부에서 Backbone 개체를 정의하는 것이 더 좋습니다. 저는 다른 많은 사람들 중에서 JavaScript 모듈 패턴 내에서이 작업을 수행하여 코드에 대한 캡슐화 및 개인 정보 보호를 제공하는 것을 선호합니다. 저는 “Revealing Module”패턴 (위의 첫 번째 링크 참조)을 사용하여 모듈 외부에서 필요한 비트에 대한 액세스를 제공하는 경향이 있습니다.

DOMReady 함수 외부에서 개체를 정의하고 개체를 참조 할 수있는 방법을 제공함으로써 브라우저가 JavaScript 처리를 앞당기 고 잠재적으로 사용자 경험을 가속화 할 수 있습니다. 또한 물건을 움직일 때 더 많은 DOMREady 함수를 만드는 것에 대해 걱정할 필요없이 물건을 움직일 수 있기 때문에 코드를 더 유연하게 만듭니다.

Backbone 객체를 다른 곳에 정의하더라도 여전히 DOMReady 함수를 사용할 것입니다. 그 이유는 많은 Backbone 앱이 어떤 방식 으로든 DOM을 조작해야하기 때문입니다. 이렇게하려면 DOM이 준비 될 때까지 기다려야하므로 DOMReady 함수를 사용하여 정의 된 후 애플리케이션을 시작해야합니다.

웹에서 이에 대한 많은 예제를 찾을 수 있지만 다음은 Module 및 DOMReady 함수를 모두 사용하는 매우 기본적인 구현입니다.

// Define "MyApp" as a revealing module

MyApp = (function(Backbone, $){

  var View = Backbone.View.extend({
    // do stuff here  
  });

  return {
    init: function(){
      var view = new View();
      $("#some-div").html(view.render().el);
    }
  };

})(Backbone, jQuery);



// Run "MyApp" in DOMReady

$(function(){
  MyApp.init();
});