Co oznacza (function ($) {}) (jQuery);?

Na najbardziej podstawowym poziomie, coś z formy (function(){...})() jest funkcją dosłowną, która jest wykonywana natychmiast. Oznacza to, że zdefiniowałeś funkcję i natychmiast ją wywołujesz.

Ta forma jest przydatna do ukrywania informacji i hermetyzacji, ponieważ wszystko, co zdefiniujesz wewnątrz tej funkcji, pozostaje lokalne dla tej funkcji i niedostępne ze świata zewnętrznego (chyba że specjalnie to ujawnisz-zwykle za pomocą zwracanego obiektu).

Odmiana tego podstawowa forma jest tym, co widzisz w wtyczkach jQuery (lub ogólnie w tym wzorze modułu). Stąd:

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

Co oznacza, że przekazujesz odniesienie do rzeczywistego obiektu jQuery, ale jest on znany jako $ w zakresie funkcji dosłownej.

Type 1 nie jest tak naprawdę wtyczką. Po prostu przypisujesz obiekt do jQuery.fn. Zazwyczaj przypisujesz funkcję jQuery.fn, ponieważ wtyczki są zwykle tylko funkcjami.

Type 2 jest podobny do Type 1; tak naprawdę nie tworzysz wtyczki proszę. Po prostu dodajesz obiekt do jQuery.fn.

Type 3 to wtyczka, ale nie jest to najlepszy i najłatwiejszy sposób na jej utworzenie.

Aby zrozumieć więcej na ten temat, spójrz na podobne pytanie i odpowiedź . Ponadto ta strona opisuje szczegóły dotyczące tworzenia wtyczek.

Mała pomoc:

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

Typ 3, aby zadziałał musiałby wyglądać tak:

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

Nie jestem pewien, dlaczego ktoś miałby używać extend over TYLKO bezpośrednio ustawiając właściwość w prototypie jQuery, robi dokładnie to samo tylko w większej ilości operacji i większej bałaganu.

Tylko mały dodatek do wyjaśnienia

Ta struktura (function() {})(); nazywa się IIFE (natychmiast wywołane wyrażenie funkcji), zostanie wykonana natychmiast, gdy interpreter dotrze do tej linii. Więc kiedy piszesz ten wiersz:

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

Oznacza to, że interpreter natychmiast wywoła tę funkcję i przekaże jQuery jako parametr, który będzie użyty wewnątrz funkcji jako $.

Właściwie, ten przykład pomógł mi zrozumieć, co oznacza (function($) {})(jQuery);?

Rozważ to:

// 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

A teraz:

jQuery jest zmienną zawierającą obiekt jQuery.
$ jest nazwą zmiennej jak każda inna (a, $b, a$b itd. i nie ma specjalnego znaczenia jak w PHP).

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

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