무엇을 (function ($) {}) (jQuery); 평균?

jQuery 플러그인 작성으로 시작했습니다. 나는 세 개의 작은 플러그인을 작성했지만 실제로 그 의미를 모르고 모든 플러그인에 줄을 복사했습니다. 누군가 이것에 대해 조금 더 말할 수 있습니까? 아마도 프레임 워크를 작성할 때 언젠가 설명이 유용 할 것입니다 :)

이것은 무엇을 하는가? (어쨌든 jQuery를 확장한다는 것을 알고 있지만 이것에 대해 알아야 할 다른 것이 있습니다)

(function($) {

})(jQuery);

플러그인을 작성하는 다음 두 가지 방법의 차이점은 무엇입니까?

타입 1 :

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

타입 2 :

(function($) {
    $.jPluginName = {

        }
})(jQuery);

유형 3 :

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

        var options =  $.extend(defaults, options);  

        //This is where you write your plugin's name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

나는 여기서 벗어날 수 있고 아마도 모두 같은 것을 의미 할 것입니다. 혼란 스러워요. 어떤 경우에는 이것이 Type 1을 사용하여 작성한 플러그인에서 작동하지 않는 것 같습니다. 지금까지 Type 3은 나에게 가장 우아해 보이지만 다른 것에 대해서도 알고 싶습니다.

먼저, 보이는 코드 블록 (function(){})()은 단순히 실행되는 함수일뿐입니다. 조금 세분화합시다.

1. (
2.    function(){}
3. )
4. ()

2 행은 런타임에 함수를 상위 범위로 리턴하도록 런타임에 괄호로 묶은 함수입니다. 일단 리턴되면 4 행을 사용하여 함수가 실행됩니다.

1. function(){ .. }
2. (1)
3. 2()

1은 선언이고 2는 함수를 반환하고 3은 함수를 실행하고 있음을 알 수 있습니다.

사용 방법의 예입니다.

(function(doc){

   doc.location = '/';

})(document);//This is passed into the function above

플러그인에 대한 다른 질문은 다음과 같습니다.

유형 1 : 이것은 실제로 플러그인이 아니며 플러그인이 함수 인 경향이 있기 때문에 함수로 전달되는 객체입니다.

유형 2 : 이것은 $.fn객체를 확장하지 않기 때문에 다시 플러그인이 아닙니다 . 결과는 동일하지만 jQuery 코어의 확장입니다. 이것은 toArray 등과 같은 이송 기능을 추가하려는 경우입니다.

유형 3 : 이것은 플러그인을 추가하는 가장 좋은 방법입니다. jQuery의 확장 프로토 타입은 플러그인 이름과 함수를 보유한 객체를 가져 와서 플러그인 라이브러리에 추가합니다.

가장 기본적인 수준에서 양식의 일부 (function(){...})()는 즉시 실행되는 함수 리터럴입니다. 이것이 의미하는 것은 함수를 정의했으며 즉시 호출한다는 것입니다.

이 형식은 해당 함수 내부에 정의한 항목이 해당 함수에 로컬로 유지되고 외부 세계에서 액세스 할 수 없기 때문에 정보 숨기기 및 캡슐화에 유용합니다 (일반적으로 반환 된 개체 리터럴을 통해 해당 기능을 노출하지 않는 한).

이 기본 형태의 변형은 jQuery 플러그인 (또는 일반적으로이 모듈 패턴)에서 볼 수있는 것입니다. 그 후:

(function($) {
  ...
})(jQuery);

이는 실제 jQuery객체 에 대한 참조를 전달 하지만 $함수 리터럴의 범위 내 에서 알려져 있음 을 의미합니다.

타입 1은 실제로 플러그인이 아닙니다. 단순히 객체 리터럴을에 할당하는 것 jQuery.fn입니다. jQuery.fn플러그인은 일반적으로 함수일 뿐이므로 일반적으로 함수를 할당 합니다.

유형 2는 유형 1과 유사합니다. 당신은 실제로 플러그인을 만들지 않습니다. 단순히 객체 리터럴을에 추가하는 것 jQuery.fn입니다.

유형 3은 플러그인이지만 플러그인을 작성하는 가장 좋은 방법은 아닙니다.

이에 대한 자세한 내용을 보려면 이와 유사한 질문 과 답변을 살펴보십시오 . 또한 이 페이지 는 플러그인 작성에 대해 자세히 설명합니다.

작은 도움:

// an anonymous function
  
(function () { console.log('allo') });

// a self invoked anonymous function

(function () { console.log('allo') })();
  
// a self invoked anonymous function with a parameter called "$"
  
var jQuery = 'I\'m not jQuery.';

(function ($) { console.log($) })(jQuery);

설명에 작은 추가

이 구조 (function() {})();를 IIFE (즉시 호출 된 함수 표현식) 라고하며 , 인터프리터가이 행에 도달하면 즉시 실행됩니다. 따라서이 행을 작성할 때 :

(function($) {
  // do something
})(jQuery);

이는 인터프리터가 함수를 즉시 호출하고 jQuery매개 변수로 전달 하여 매개 변수로 전달 함 을 의미합니다 $.

실제로이 예는 (function($) {})(jQuery);의미 가 무엇인지 이해하는 데 도움이되었습니다 .

이걸 고려하세요:

// Clousure declaration (aka anonymous function)
var f = function(x) { return x*x; };
// And use of it
console.log( f(2) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function(x) { return x*x; })(2) ); // Gives: 4

이제 이것을 고려하십시오 :

• jQuery jQuery 객체를 보유하는 변수입니다.
• $(다른 같은 변수 이름 a, $b, a$b등)는 PHP처럼 특별한 의미가 없습니다.

우리는 우리의 예를 다시 볼 수 있다는 것을 알고 있습니다.

var $f = function($) { return $*$; };
var jQuery = 2;
console.log( $f(jQuery) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function($) { return $*$; })(jQuery) ); // Gives: 4

작업하려면 다음과 같이 3을 입력하십시오.

(function($){
    //Attach this new method to jQuery
    $.fn.extend({     
        //This is where you write your plugin's name
        'pluginname': function(_options) {
            // Put defaults inline, no need for another variable...
            var options =  $.extend({
                'defaults': "go here..."
            }, _options);

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

누군가가 jQuery 프로토 타입에서 속성을 직접 설정하는 것보다 extend를 사용하는 이유가 확실하지 않습니다. 더 많은 작업과 더 복잡한 작업에서만 똑같은 일을하고 있습니다.