[javascript] 무엇을 (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은 나에게 가장 우아해 보이지만 다른 것에 대해서도 알고 싶습니다.

답변

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

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

(function(doc){

   doc.location = '/';

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

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

// 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($) {
  // do something
})(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

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

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