Was bedeutet diese JavaScript/jQuery-Syntax?

Question

Was bedeutet folgende Syntax?

(function($){ 
    $.fn.columnize = function(options) { 
    ... 

Was ist function($)?

Was ist $.fn. …?

Answer 1

Diese Konvention wird verwendet, wenn Plugins zu schreiben, um sicherzustellen, keine confilict mit anderen Javascript-Bibliotheken gibt es die $ Notation, während das Plugin Autor gewährleisten kann noch diese notataion verwenden:

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

Der Autor ist eine anonyme Funktion mit einem einzigen Parameter ($) erklärt, dann ruft sie sofort und Leiten des jQuery-Objekt zu. Dies stellt sicher, dass die Funktion aufgerufen wird und dass alles darin definiert ist.

Eine längere Schreibweise könnte sein:

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

Obwohl das eine variable MyDefs im globalen Namespace schaffen würde. Das anonyme Funktionsmuster lässt den globalen Namespace leer und vermeidet Konflikte.

Answer 2

Es deklariert die columnize Funktion als ein jQuery-Plugin, so dass Sie es auf Elemente wie dieses $('.someSelector').columnize() verwenden können. Sie könnten mehr über plugin authoring here lesen.

Answer 3

Ich habe gerade gefunden ... ist es ein Proxy-Muster?

Proxy Pattern

das obige Wissen kombinieren, erhalten Sie als JavaScript-Entwickler ziemlich viel Macht. Eine Möglichkeit, das zu kombinieren ist ein Proxy-Muster in JavaScript zu implementieren, so dass die Grundlagen der aspektorientierten Programmierung (AOP):

(function() { 
    // log all calls to setArray 
    var proxied = jQuery.fn.setArray; 
    jQuery.fn.setArray = function() { 
    console.log(this, arguments); 
    return proxied.apply(this, arguments); 
    }; 
})(); 

Die oben wickelt seinen Code in einer Funktion die „Proxy“ -variable zu verstecken. Es speichert jQuerys setArray-Methode in einem Closure und überschreibt es. Der Proxy protokolliert dann alle Aufrufe der Methode und delegiert den Aufruf an das Original. Die Verwendung von apply (this, arguments) garantiert, dass der Aufrufer den Unterschied zwischen der ursprünglichen und der proxied-Methode nicht bemerken kann.

Answer 4

Es ist wahrscheinlich eine jQuery-Erweiterung, die im Grunde (jQuery) passiert am Ende wie

(function($){ 
    //$ is jQuery here 

    //added columnize function to existing jQuery object 
    $.fn.columnize = function(options) { 

    } 

})(jQuery); 

Answer 5

Nicht durch die $ verwirrt werden. Tatsächlich ist $ ein gültiger Variablenname in JavaScript (wie alle Variablen, die $, source (PDF) enthalten).

So könnte die erste Zeile als

(function (someVariable) { 

umformuliert werden, die häufiger aussehen könnte. Für den Rest, ja, es ist ein Proxy-Muster, und James Wiseman's Antwort ist zu erklären, was vor sich geht.

Answer 6

function($) {...} definiert eine anonyme Funktion mit einem formalen Parameter namens $. $.fn bezieht sich auf die Eigenschaft mit dem Namen fn des Objekts, auf das sich die Variable $ bezieht.