왜 익명 함수를 정의하고 jQuery를 인수로 전달합니까?

왜 익명 함수를 정의하고 jQuery를 인수로 전달합니까?

백본.js 스크린캐스트의 훌륭한 피프코드 데모 코드를 살펴보고 있습니다.백본 코드는 모두 jQuery 객체를 전달하는 익명 함수에 포함됩니다.

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

제 백본 코드에서는 jQuery DOM 'ready' 이벤트에서 모든 코드를 랩했습니다.

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

첫 번째 접근 방식의 요점/장점은 무엇입니까?이렇게 하면 익명 함수가 생성되고 jQuery 개체가 함수 인수로 전달되어 $가 jQuery 개체임을 효과적으로 확인할 수 있습니다.이것이 jQuery가 '$'로 묶여 있다는 것을 보장하는 유일한 포인트입니까? 아니면 그렇게 해야 하는 다른 이유가 있습니까?

표시한 두 코드 블록은 실행 시기와 실행 이유가 크게 다릅니다.그들은 서로를 배제하지 않습니다.그들은 같은 목적을 수행하지 않습니다.

JavaScript 모듈

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

이것은 "JavaScript Module" 패턴으로, 즉시 호출 기능으로 구현됩니다.

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

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

한 이기의구호출의해기능다니입호출는되즉시에현능은▁the▁▁the▁function에 의해 즉시 호출되는 기능입니다.(jQuery)에 전달하는 변수에 지정을 입니다.jQuery를 괄호 안에 전달하는 목적은 전역 변수에 로컬 범위 지정을 제공하는 것입니다. 검색 시 오버헤드를 줄일 수 있습니다.$변수이며, 경우에 따라 최소화기에 대해 더 나은 압축/최적화를 허용합니다.

호출 기능은 즉시 실행됩니다.기능 정의가 완료되는 즉시 기능이 실행됩니다.

jQuery의 "DOMReady" 기능

이것은 jQuery의 "DOMReady" 함수의 별칭입니다. http://api.jquery.com/ready/

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

jQuery의 "DOMReady" 함수는 사용자의 자바스크립트 코드로 DOM을 조작할 준비가 되었을 때 실행됩니다.

모듈 대 DOM Ready In 백본 코드

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

DOMReady 함수 밖에서 Backbone 개체를 정의하는 것이 좋습니다.저는 코드에 대한 캡슐화와 개인 정보를 제공할 수 있도록 JavaScript Module 패턴 내에서 이 작업을 수행하는 것을 선호합니다.모듈 외부에 필요한 비트에 액세스할 수 있도록 "모듈 공개" 패턴(위의 첫 번째 링크 참조)을 사용하는 경향이 있습니다.

DOMReady 함수 밖에서 개체를 정의하고 참조할 수 있는 몇 가지 방법을 제공하면 브라우저가 JavaScript 처리를 미리 시작하여 사용자 경험을 가속화할 수 있습니다.또한 이동할 때 더 많은 DOMReady 기능을 생성할 필요 없이 이동할 수 있으므로 코드를 더 유연하게 만들 수 있습니다.

Backbone 개체를 다른 곳에서 정의하더라도 DOMReady 기능을 사용할 가능성이 높습니다.그 이유는 많은 백본 앱들이 어떤 방식으로든 DOM을 조작해야 하기 때문입니다.이렇게 하려면 DOM이 준비될 때까지 기다려야 하므로 DOMReady 기능을 사용하여 정의된 후 응용 프로그램을 시작해야 합니다.

웹에서 이에 대한 많은 예를 찾을 수 있지만 모듈과 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();
});

부차적인 참고로, $를 익명 함수에 인수로 보내면 $ 함수가 많이 호출될 경우 긍정적인 성능 영향이 작은 함수에 $를 로컬로 만듭니다.Javascript가 먼저 로컬 범위에서 변수를 검색한 다음 창 범위(보통 $가 있는 곳)까지 모두 이동하기 때문입니다.

항상 사용할 수 있도록 보장합니다.$사용했더라도 그 폐쇄 안에.

이 폐쇄가 없다면 당신은 사용해야 할 것입니다.jQuery에 $

그것은 $ 변수의 잠재적인 충돌을 피하기 위한 것입니다.$라는 이름의 변수를 다른 변수가 정의하는 경우 플러그인에서 잘못된 정의를 사용할 수 있습니다.

자세한 내용은 http://docs.jquery.com/Plugins/Authoring#Getting_Started 을 참조하십시오.

둘 다 사용합니다.

라이브러리 충돌을 방지하고 $로 예상되는 대로 jQuery를 사용할 수 있는지 확인하기 위해 jQuery를 전달하는 자체 호출 기능입니다.

그리고 DOM이 로드된 후에만 Javascript를 실행하는 데 필요한 .ready() 바로 가기 메서드:

(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