3

私はこのコードを<head>HTMLページのセクションで見つけました（同僚がこれを作成しましたが、彼はもうここでは機能しません）：

(function(window, PhotoSwipe){ 
    document.addEventListener('DOMContentLoaded', function(){
        var options = {},
            instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
    }, false);
}(window, window.Code.PhotoSwipe));

（document.addEventListenerから）中央部分は理解できますが、最初と最後の行は理解できません。彼らはここで何をしているのですか？コードは、PhotoSwipeと呼ばれるオープンソースの画像ギャラリーからのものです。どんなポインタでも大歓迎です。

[編集]

このコードは次のものと同じですか？

document.addEventListener('DOMContentLoaded', function(){
        var options = {},
            instance = window.Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
    }, false);

？

4

5 に答える 5

3

これは、自己実行型の保護されたコードです。それを分解しましょう：

(function(window, PhotoSwipe){
  ...
}(window, window.Code.PhotoSwipe));

括弧を使用すると、他に何も呼び出さずに、コードが単独で実行されます。

これにより、外部コードへの参照が作成され、外部コードによって改ざんされることはありませんwindow。window.Code.PhotoSwipeしたがって、私たちの親の中にPhotoSwipeは、の保護されたエイリアスがありwindow.Code.PhotoSwipeます。またwindow、名前は変わりませんが、外部グローバルwindowオブジェクトへの保護された参照でもあります。

次の行であるaddEventListener行は、無名関数を名前付き関数として出力するように書き直すことができます。

function myFunc() {
  var options = {},
      instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}
document.addEventListener('DOMContentLoaded', myFunc, false);

addEventListenerこれは元のコードと機能的に同じであることに注意してください。関数を呼び出しから引き出して名前を付けただけです。

addEventListener特定のイベントを処理するためのコールバック関数をアタッチします。この場合、イベントを処理していますDOMContentLoaded。このイベントはdocumentオブジェクトでリッスンされています。このイベントが聞こえたときはいつでも、に電話して応答しmyFuncます。

最後のパラメータ、falseは、キャプチャとバブリングを扱います。これらは、イベントがDOM全体に伝播する2つのメソッドです。キャプチャすると、イベントはDOMの上部から内側に移動します。バブリングすると、DOMの内側から外側に移動します。フレーズfalseでこれを処理したい状態を使用します。bubbling

でイベントが発生するmyFunctたびに呼び出される、内に、最初に。と呼ばれる新しいオブジェクトを宣言する1行のコードがあります。このオブジェクトは空で、メンバーはありません。DOMContentLoadeddocumentoptions

次に、オブジェクトのattachメソッドに2つの引数を渡します。PhotoSwipe最初の方法はセレクターです。DOMで一致する要素を検索します#Gallery a。つまり、IDが「Gallery」の要素内のアンカー要素を検索します。これは、次のすべてを意味します。

<div id="Gallery"><a href="#">Foo</a></div>

または

<div id="Gallery">
  <div class="picture">
    <a href="#">Open</a>
  </div>
  <div class="picture">
    <a href="#">Open</a>
  </div>
</div>

これは、作成した空のオブジェクトに関連付けられています。PhotoSwipeそのコードはここに提示されていないため、この時点では内部で何が行われているのかは不明です。

于 2012-04-18T15:06:15.740 に答える
2

ローカルスコープ内のこれらの変数を移動して、ルックアップを高速化します。また、window.Code.PhotoSwipeとして利用可能になりますPhotoSwipe。

ただし、通常windowは最初の引数として使用することはありませんが、グローバルスコープで実行すると、ブラウザthisのグローバルオブジェクト（である）であることが保証されます。window

于 2012-04-18T14:56:31.610 に答える
2

これは自己実行型の無名関数です。通常、これはJavascriptの変数にスコープを提供して、親の名前空間が乱雑にならないようにするために使用されます（この場合、親の名前空間はグローバル名前空間です）。

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

于 2012-04-18T15:01:40.987 に答える
0

最初の行は関数宣言です。最後の1つは、引数を使用したこの関数の自動呼び出しです。このようにして、関数は1つのステップで宣言され、呼び出され、実行されます。

于 2012-04-18T14:57:52.263 に答える
0

再フォーマット：

(function(window, PhotoSwipe){
    document.addEventListener('DOMContentLoaded', function(){
        var options = {},
            instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'),
                                      options );
        }, false);
}(window, window.Code.PhotoSwipe));

これにより、2つの引数（windowとPhotoSwipe）をとる関数が作成され、イベントリスナー（2番目の（内部）関数）が追加され、すぐに値window.Code.PhotoSwipeを引数として外部関数が呼び出されます。

なぜこれをするのですか？関数内にコードを配置しない限り、Javascriptはスコープの分離に優れていません。したがって、サンプルのmain関数内では、PhotoSwipeは渡された2番目の引数のみを参照できます。

于 2012-04-18T14:58:54.160 に答える