Was macht (function ($) {}) (jQuery); bedeuten?

Ich fange gerade mit dem Schreiben von jQuery-Plugins an. Ich habe drei kleine Plugins geschrieben, aber ich habe die Zeile einfach in alle meine Plugins kopiert, ohne wirklich zu wissen, was das bedeutet. Kann mir jemand etwas mehr darüber erzählen? Vielleicht ist eine Erklärung eines Tages nützlich, wenn Sie ein Framework schreiben :)

Was macht das? (Ich weiß, dass es jQuery irgendwie erweitert, aber gibt es noch etwas Interessantes zu wissen)

(function($) {

})(jQuery);

Was ist der Unterschied zwischen den folgenden zwei Arten, ein Plugin zu schreiben:

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

Ich könnte hier weit weg sein und vielleicht bedeuten alle dasselbe. Ich bin verwirrt. In manchen Fällen ist dies scheint nicht in ein Plugin zu arbeiten, dass ich schrieb Typ 1 verwendet Bisher Typ 3 der eleganteste mir scheint , aber ich möchte auch über die anderen kennen.

Erstens ist ein Codeblock, der aussieht, (function(){})()lediglich eine Funktion, die an Ort und Stelle ausgeführt wird. Lassen Sie es uns ein wenig aufschlüsseln.

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

Zeile 2 ist eine einfache Funktion, die in Klammern eingeschlossen ist, um die Laufzeit anzuweisen, die Funktion an den übergeordneten Bereich zurückzugeben. Sobald sie zurückgegeben wird, wird die Funktion mit Zeile 4 ausgeführt. Vielleicht hilft das Lesen dieser Schritte

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

Sie können sehen, dass 1 die Deklaration ist, 2 die Funktion zurückgibt und 3 nur die Funktion ausführt.

Ein Beispiel, wie es verwendet werden würde.

(function(doc){

   doc.location = '/';

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

Was die anderen Fragen zu den Plugins betrifft:

Typ 1: Dies ist eigentlich kein Plugin, sondern ein Objekt, das als Funktion übergeben wird, da Plugins in der Regel Funktionen sind.

Typ 2: Dies ist wiederum kein Plugin, da es das $.fnObjekt nicht erweitert . Es ist nur eine Erweiterung des jQuery-Kerns, obwohl das Ergebnis dasselbe ist. Dies ist der Fall, wenn Sie Verfahrfunktionen wie toArray usw. hinzufügen möchten.

Typ 3: Dies ist die beste Methode zum Hinzufügen eines Plugins. Der erweiterte Prototyp von jQuery verwendet ein Objekt mit Ihrem Plugin-Namen und Ihrer Plugin-Funktion und fügt es der Plugin-Bibliothek für Sie hinzu.

Auf der einfachsten Ebene ist etwas von der Form (function(){...})()ein Funktionsliteral, das sofort ausgeführt wird. Dies bedeutet, dass Sie eine Funktion definiert haben und diese sofort aufrufen.

Dieses Formular ist nützlich zum Ausblenden und Einkapseln von Informationen, da alles, was Sie innerhalb dieser Funktion definieren, für diese Funktion lokal bleibt und von der Außenwelt aus nicht zugänglich ist (es sei denn, Sie legen es ausdrücklich offen - normalerweise über ein zurückgegebenes Objektliteral).

Eine Variation dieser Grundform sehen Sie in jQuery-Plugins (oder in diesem Modulmuster im Allgemeinen). Daher:

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

Das heißt, Sie übergeben einen Verweis auf das eigentliche jQueryObjekt, der jedoch $im Rahmen des Funktionsliteral liegt.

Typ 1 ist eigentlich kein Plugin. Sie weisen einfach ein Objektliteral zu jQuery.fn. Normalerweise weisen Sie eine Funktion zu, jQuery.fnda Plugins normalerweise nur Funktionen sind.

Typ 2 ähnelt Typ 1; Sie erstellen hier nicht wirklich ein Plugin. Sie fügen einfach ein Objektliteral hinzu jQuery.fn.

Typ 3 ist ein Plugin, aber es ist nicht der beste oder einfachste Weg, eines zu erstellen.

Um mehr darüber zu erfahren, werfen Sie einen Blick auf diese ähnliche Frage und Antwort . Außerdem werden auf dieser Seite einige Details zum Erstellen von Plugins erläutert.

Eine kleine Hilfe:

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

Nur eine kleine Ergänzung zur Erklärung

Diese Struktur (function() {})();heißt IIFE (Sofort aufgerufener Funktionsausdruck) und wird sofort ausgeführt, wenn der Interpreter diese Zeile erreicht. Wenn Sie also diese Zeilen schreiben:

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

Dies bedeutet, dass der Interpreter die Funktion sofort aufruft und jQueryals Parameter übergibt, der innerhalb der Funktion als verwendet wird $.

Dieses Beispiel hat mir tatsächlich geholfen zu verstehen, was (function($) {})(jQuery);bedeutet.

Bedenken Sie:

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

Und jetzt bedenken Sie Folgendes:

• jQuery ist eine Variable, die ein jQuery-Objekt enthält.
• $ist ein Variablenname wie jeder andere ( a, $b, a$betc.) und es eine besondere Bedeutung wie in PHP nicht hat.

Zu wissen, dass wir uns unser Beispiel noch einmal ansehen können:

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

Typ 3, um zu arbeiten, müsste so aussehen:

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

Ich bin mir nicht sicher, warum jemand Extend verwenden würde, um die Eigenschaft im jQuery-Prototyp direkt festzulegen. Es macht genau das Gleiche nur bei mehr Operationen und mehr Unordnung.