この行うjQueryのコードは何 - 機能（$）とVAR = VARを=> VAR =>

Question

ここでは、関連するコードのセクションです：！

!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[]"> 

最初の質問、 "機能（$）！" は私にとってこれは言う、私は関数ではないから、 "！"そうではありませんが、関数ではない関数を宣言するのはなぜですか？それから、私はよく考えました。「ドキュメントが準備できていなくてもこれをやってください。 $）は、文書の準備を簡略化したものです。

しかし、私はそれを削除する必要がある、（JQuery）が必要ですが、コードが失敗するので、これは完全にJQueryではない何かをしている必要があります。

2番目の質問は、変数 "figure"です、私はそれを読んで、意味がない "定数としてfigureを宣言し、名前の値を取ってfに押し込み、HTML私はそれが "$ .map（this.files、figure（this.name））"から来ていることを知っていますが、それは名前は、HTML入力タグの（fileToUpload []）の図にある送られたばかり。

おかげで、

デイブ

このコードは何を言っていると？

をやって

Answer 1

最初はのインラインで呼び出される関数式です。 !は、パーサーが式を期待するのを期待しないようにするために、functionが関数宣言ではなく関数式を開始するようにしています（これはすぐに呼び出すことができます）。その詳細はin this question's answersです。 jQueryは、関数の終了後に()を使用して渡され、$パラメータとして受信されます。

figureは、ES2015の+（別名「ES6」）arrow function（[その中${...}とバッククォートにおけるもの] template literalを含ん矢印関数を返す具体的には、矢印関数）です。この場合には、この特定の機能はthisまたはargumentsまたは他の物事のカップルを使用していないので、それはこのES5およびそれ以前のコードとほぼ同等です：！

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(){}(argument);は、即座に作成された関数を呼び出すことを意味します。

関数宣言function(){}は、undefinedを返します。この関数を瞬時に呼び出そうとすると、

function() {}() 

SyntaxErrorがスローされます。を使用して！ショートコードを記述することができ、オペレータが機能する前に、JSは式としてそれを理解し、実行が正常

!function() {}() 

=>アロー機能

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

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

矢印機能を機能します。矢印関数は、通常の関数のように引数の頭と体で構成されています。

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

functionを書き込む必要はありません。 引数は標準的な方法で渡され、このような角かっこ（(arg1, arg2) => {}）、または引数が1つしかない場合は、引数arg => {}のみが使用できます。

ボディ内のコードは、通常の機能のように通常の「ブロックボディ」にすることができます。一つだけ存在する場合 - 式を返す、関数は「簡潔な身体」あなたは唯一の引数と1つの身体表現を持っている場合

(arg1, arg2) => return 4; 

ので、矢印の機能が短いかかる場合がありますが、珍しい形を有していてもよい

var sqr = x => x*x; 

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