Co robi (funkcja ($) {}) (jQuery); oznaczać?

Zaczynam od pisania wtyczek jQuery. Napisałem trzy małe wtyczki, ale po prostu kopiowałem linię do wszystkich moich wtyczek, nie wiedząc, co to znaczy. Czy ktoś może mi powiedzieć coś więcej na ten temat? Być może kiedyś przyda się wyjaśnienie przy pisaniu frameworka :)

Co to robi? (Wiem, że jakoś rozszerza jQuery, ale czy jest coś jeszcze ciekawego do powiedzenia na ten temat)

(function($) {

})(jQuery);

Jaka jest różnica między następującymi dwoma sposobami pisania wtyczki:

Typ 1:

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

Typ 2:

(function($) {
    $.jPluginName = {

        }
})(jQuery);

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

Mógłbym być tutaj daleko i być może wszystkie oznaczają to samo. Jestem zdezorientowany. W niektórych przypadkach, to nie wydaje się działać w wtyczce że pisałem używając Type 1. Do tej pory, typ 3 wydaje się najbardziej elegancki do mnie, ale chciałbym wiedzieć o innych.

Po pierwsze, blok kodu, który wygląda, (function(){})()jest jedynie funkcją wykonywaną w miejscu. Rozwalmy to trochę.

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

Wiersz 2 jest prostą funkcją, owiniętą w nawiasach, aby poinformować środowisko wykonawcze, aby zwróciło funkcję do zakresu nadrzędnego. Po jej zwróceniu funkcja jest wykonywana za pomocą wiersza 4, być może czytanie tych kroków pomoże

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

Widać, że 1 to deklaracja, 2 zwraca funkcję, a 3 po prostu wykonuje funkcję.

Przykład, w jaki sposób zostanie wykorzystany.

(function(doc){

   doc.location = '/';

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

Jeśli chodzi o inne pytania dotyczące wtyczek:

Typ 1: To nie jest właściwie wtyczka, to obiekt przekazywany jako funkcja, ponieważ wtyczki są zwykle funkcjami.

Typ 2: To znowu nie jest wtyczka, ponieważ nie rozszerza $.fn obiektu. To tylko rozszerzenie rdzenia jQuery, chociaż wynik jest taki sam. Dzieje się tak, jeśli chcesz dodać funkcje ruchu, takie jak toArray i tak dalej.

Typ 3: Jest to najlepsza metoda dodania wtyczki, rozszerzony prototyp jQuery pobiera obiekt przechowujący nazwę i funkcję wtyczki i dodaje ją do biblioteki wtyczek.

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

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

Odmianą tej podstawowej formy jest to, co widać we wtyczkach jQuery (lub ogólnie w tym module). W związku z tym:

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

Co oznacza, że ​​przekazujesz odwołanie do rzeczywistego jQueryobiektu, ale jest ono znane jako $obejmujące literał funkcji.

Typ 1 nie jest tak naprawdę wtyczką. Po prostu przypisujesz obiektowi dosłowność jQuery.fn. Zazwyczaj przypisujesz funkcję do, jQuery.fnponieważ wtyczki są zwykle tylko funkcjami.

Typ 2 jest podobny do Typu 1; tak naprawdę nie tworzysz tutaj wtyczki. Po prostu dodajesz dosłowność obiektu jQuery.fn.

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

Aby dowiedzieć się więcej na ten temat, spójrz na podobne pytanie i odpowiedz . Również ta strona idzie do jakiegoś szczegółu o authoringu 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);

Tylko mały dodatek do wyjaśnienia

Struktura ta (function() {})();nosi nazwę IIFE (Natychmiastowe wywołanie funkcji), zostanie wykonana natychmiast, gdy interpreter dojdzie do tej linii. Więc kiedy piszesz te wiersze:

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

oznacza to, że interpreter wywoła funkcję natychmiast i przejdzie jQueryjako parametr, który zostanie użyty w funkcji jako $.

W rzeczywistości ten przykład pomógł mi zrozumieć, co to (function($) {})(jQuery);znaczy.

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 rozważ to:

• jQuery jest zmienną przechowującą obiekt jQuery.
• $Jest to nazwa zmiennej, jak każdy inny ( a, $b, a$bitd.) i nie ma żadnego specjalnego znaczenia jak w PHP.

Wiedząc, że możemy spojrzeć jeszcze raz na nasz przykład:

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

Wpisz 3, aby dział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ś użyłby przedłużenia po prostu bezpośrednio ustawiając właściwość w prototypie jQuery, robi to samo dokładnie tylko przy większej liczbie operacji i więcej bałaganu.