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

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

---

backbone.js 스크린 캐스트에서 훌륭한 peepcode 데모 코드를 살펴보고 있습니다. 그 안에 백본 코드는 모두 jQuery 객체를 전달하는 익명 함수로 묶여 있습니다.

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

내 백본 코드에서 jQuery DOM 'ready'이벤트에 모든 코드를 래핑했습니다.

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

첫 번째 접근 방식의 요점 / 장점은 무엇입니까? 이렇게하면 jQuery 객체가 함수 인수로 전달되는 즉시 실행되는 익명 함수가 생성되어 $가 jQuery 객체임을 효과적으로 보장합니다. 이것이 유일한 요점입니까-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를 괄호 안에 전달하는 목적은 전역 변수에 로컬 범위를 제공하는 것입니다. 이것은 $변수 를 찾는 오버 헤드의 양을 줄이는 데 도움이되며 경우에 따라 minifier에 대한 더 나은 압축 / 최적화를 허용합니다.

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

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

---

부수적으로 $를 익명 함수에 대한 인수로 보내면 $ 함수가 많이 호출되는 경우 약간의 긍정적 인 성능 영향을주는 해당 함수에 $ 로컬이됩니다. 이는 자바 스크립트가 변수에 대한 로컬 범위를 먼저 검색 한 다음 창 범위 ($가 일반적으로있는 곳)까지 아래로 이동하기 때문입니다.

---

사용 된 경우에도 해당 클로저 내부에서 항상 사용할 수 있습니다 .$$.noConflict()

이 폐쇄가 없으면 전체 시간 jQuery대신 사용해야 합니다 $.

---

It is to avoid a potential conflict of the $ variable. If something else defines a variable named $, your plugin may use the wrong definition

Refer to http://docs.jquery.com/Plugins/Authoring#Getting_Started for more details

---

Use both.

The self invoking function in which you pass in jQuery to prevent library conflicts, and to just make sure jQuery is available as you would expect with $.

And the .ready() shortcut method as required to run javascript only after DOM has loaded:

(function($) {
    $(function(){
          //add code here that needs to wait for page to be loaded
    });

    //and rest of code here
})(jQuery);

참고URL : https://stackoverflow.com/questions/10371539/why-define-an-anonymous-function-and-pass-it-jquery-as-the-argument