Was bedeutet diese JQuery-Code Doing - Funktion ($) und var = var => var =>

Question

Hier ist ein Abschnitt der entsprechenden Code:

!function($){ 
    const figure = name => f => $(`<figure data-name="${name}"><img src="${URL.createObjectURL(f)}"><figcaption><input type=checkbox checked><br>${f.name}</figcaption></figure>`).data("f",f); 

$(document).on("change", "[data-preview-to]", function() { 
     $($(this).data("preview-to")).append($.map(this.files, figure(this.name))); 
     $(this).replaceWith(this.outerHTML); 
***OTHER CODE FOR SUBMIT**** 
}(jQuery); 

HTML 
<input type="file" data-preview-to="#preview" multiple="" name="fileToUpload[]"> 

Erste Frage, die "Funktion ($)!" Für mich sagt das, ich bin keine Funktion, da "!" ist NICHT, aber das kann es nicht sein, denn warum würdest du eine Funktion deklarieren, das ist keine Funktion, dann dachte ich gut, könnte es heißen "Mach das, auch wenn das Dokument nicht bereit ist" da (denke ich) funktioniert ($), ist das Dokument bereit Kurzschrift.

Aber die Funktion endet, hat eine (jquery), die benötigt wird, wenn ich das entfernen, der Code fehlschlägt, so muss dies etwas tun, das ist nicht vollständig JQuery. Die zweite Frage, ist die Variable "Figur", die Art, wie ich es gelesen habe, und keinen Sinn macht "deklarieren Sie die Zahl als eine Konstante, nehmen Sie den Wert des Namens, schieben Sie es in f und dann alles in den HTML Aber ich sehe nicht, wie "f" zugewiesen wird. Ich weiß, dass es von der "$ .map (this.files, figure (this.name))" kommt, aber es sieht so aus, als wäre es das einzige, was ist immer auf Figur geschickt wird der Name (fileToUpload []) des HTML-Input-Tag.

Was dieser Code ist zu sagen und?

Dank tun,

Dave

Answer 1

Die erste ist nur ein Inline-aufgerufene Funktion Ausdruck. Die ! ist da, um den Parser davon abzuhalten, eine Anweisung zu erwarten, einen Ausdruck zu erwarten, so dass function einen Funktionsausdruck statt Funktionsdeklaration startet (weshalb wir es sofort aufrufen können). Details dazu in this question's answers. jQuery wird nach dem Ende der Funktion mit () übergeben und als $ Parameter empfangen.

figure ist ein ES2015 + (aka "ES6") arrow function (genauer gesagt, ein Pfeil Funktion einen Pfeil Funktion zurückkehrt, die enthält ein template literal [das Ding in Backticks mit ${...} in it]). In diesem Fall, da diese spezielle Funktion nicht this oder arguments verwendet oder ein paar andere Dinge, dann ist es entspricht in etwa diesem ES5 und früheren Code:

var figure = function(name) { 
    return function(f) { 
     return $('<figure data-name="' + name + '"><img src="' + URL.createObjectURL(f)' + "><figcaption><input type=checkbox checked><br>' + f.name + '</figcaption></figure>').data("f",f); 
    }; 
}; 

Answer 2

function() {}()

!function(){}(argument); bedeutet sofort erstellte Funktion aufrufen.

Funktionserklärung function(){} gibt undefined zurück. Wenn wir versuchen, diese Funktion sofort aufzurufen

Es wird SyntaxError werfen. Durch die Nutzung ! Operator vor der Funktion, js versteht es als Ausdruck und läuft funktioniert erfolgreich

!function() {}() 

=> Pfeil Funktionen

const figure = name => f => $() 

// is equal to 
const figure = function(name){ 
    return function(f){ 
     return $(); 
    } 
} 

Pfeil Funktionen ermöglicht kurzen Code zu schreiben. Pfeilfunktionen bestehen aus Argument Kopf und Körper wie in normalen Funktionen.

(arg1, arg2) => { 
    return 4; 
} 

Keine Notwendigkeit mehr zu schreiben function. Argumente werden durch Standard Weg übergeben, mit Klammern wie diesem (arg1, arg2) => {}, oder wenn es nur ein Argument gibt - kann nur Argument arg => {} sein.

Code im Körper kann üblich sein "Block Körper", wie in normalen Funktionen. Wenn es eine ist nur - Rückkehr Ausdruck, kann die Funktion hat „prägnante Körper“

(arg1, arg2) => return 4; 

Also, wenn Sie nur ein Argument und einen Körperausdruck haben, Pfeil Funktion kann kurz dauern, aber ungewöhnliche Form

var sqr = x => x*x; 

// equal to 
var sqr = function(x){ 
    return x*x; 
}