5

私は次のようなコードを持っています:

 (function(MyHelper, $, undefined){

var selectedClass = "selected";

MyHelper.setImageSelector = function(selector) {
    var container = $(selector);

    setSelected(container, container.find("input:radio:checked"));
    container.find("input:radio").hide().click(function() {
        setSelected(container, $(this));
    });
};

MyHelper.enableIeFix = function(selector) { 
    var container = $(selector);
    container.find("img").click(function() {
        $("#" + $(this).parents("label").attr("for")).click();
    });
};

function setSelected(container, selected) {
    container.find("label").removeClass(selectedClass);
    selected.siblings("label").addClass(selectedClass);
}

 }( window.MyHelper = window.MyHelper || {}, $))

私はJSを初めて使用しますが、これがJavaScriptプログラミングの特定のパターンであるかどうか疑問に思っています。私は具体的に最後の行の意味は何であるか疑問に思います:

   }( window.MyHelper = window.MyHelper || {}, $))

モジュールパターンですか?

4

4 に答える 4

4

はい、これは基本的にモジュール パターンです。

モジュール パターンを使用してモジュールを作成する方法の概要は次のとおりです。

  • モジュール スコープを作成します。通常は、即時呼び出し関数式 (IIFE) を使用してクロージャーを作成します。これにより、モジュール用の「プライベート スペース」が作成され、グローバルな汚染を回避し、コードをモジュール化して分離した状態に保つことができます。

  • パブリック メソッドをアタッチする名前空間を用意します。開発者は、この「添付」手順を実行するさまざまな方法を持っています。モジュールにオブジェクトを「渡す」開発者もいれば、変数に格納するオブジェクトを「返す」開発者もいます。いずれにせよ、それは同じです。

この場合、それはモジュール パターンの「ハンドイン」バージョンです。

(function(MyHelper, $, undefined){

    var selectedClass = "selected";

    MyHelper.setImageSelector = function(selector) {};

    function setSelected(container, selected) {}

}(window.MyHelper = window.MyHelper || {}, $))

最後の行で、すぐに関数を呼び出し、これらの引数を送信します

(window.MyHelper = window.MyHelper || {}, $)

これはこれと似ていますが、関数名を使用していません:

function anonymous(MyHelper, $, undefined){...}
anonymous(window.MyHelper = window.MyHelper || {}, $);
  • 最初の引数window.MyHelper = window.MyHelper || {}は、操作の組み合わせです。その操作が返すものは何でもMyHelper、モジュールに引数を提供します。

    • これ||は「デフォルト」の操作です。の左側の値||が「偽」である場合、式が想定する値は右側の値に「デフォルト設定」されます。したがって、コード内でwindow.MyHelperが存在しない場合は、デフォルトで object になります{}

    • 「デフォルト」操作でwindow.MyHelperは、既存のオブジェクト インスタンスが割り当てられるか、存在window.MyHelperしない場合は新しいオブジェクト インスタンスが割り当てられます。{}

    • JavaScript の代入操作は値を返します。割り当て操作によって返される値は、変数に割り当てられた値です。これにより、操作全体がモジュールに値を提供することも可能になります。

  • 2 番目の引数は何でも$構いません (jQuery だと思いますか?)

  • 3 番目の引数は渡されず、内部からは未定義です。私の知る限り、これundefinedは変更可能であるため、この方法で行われます。したがって、純粋に undefinedundefinedにするために、何も送信しないため、変数undefinedundefinedです。


このコードの機能:

MyHelper.setImageSelector = function(selector) {};

MyHelperメソッドに追加されましたsetImageSelector。あなたMyHelperは外部からのものなので、それを使用する人は誰でもMyHelper.setImageSelector()メソッドを持っています。

拡張されていない IFFE 内の他の関数と変数は、MyHelper「プライベート」メンバーと呼ばれるものです。JavaScript には機能スコープがあります。つまり、関数宣言ごとに新しいスコープが作成されます。簡単に言えば、内側は外側を見ることができますが、外側は内側を見ることができません。これは、多くの関数と変数でグローバル スコープを汚染しないための 1 つの方法でもあります。

于 2012-04-19T11:19:08.150 に答える
1

これはJavaScriptクラスです。あなたはここでそれらについてもっと読むことができます:

http://javascript.about.com/library/bltut35.htm

于 2012-04-19T11:03:08.740 に答える
0

存在する場合はグローバル MyHelper オブジェクトを拡張し、そうでない場合は新しいオブジェクトを作成します。Jquery グローバルが渡され、undefined が引数として指定されているため、js ミニマイザーで圧縮できます。

私にはモジュールパターンにかなり似ています。参照: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjquery

于 2012-04-19T11:07:31.747 に答える
0

匿名関数は、次のような定義の直後に呼び出されます/呼び出されます

(
 function(arg1,arg2){
 }
)(xarg1,xarg2);

最後の行は、定義された無名関数を呼び出します。無名関数への引数は次のとおりです。

  1. window.MyHelper = window.MyHelper || {} /*MyHelper グローバル オブジェクト、または未定義の場合は空のオブジェクト */
  2. $ /* jQuery またはプロトタイプ オブジェクト。jquery では、通常、他のライブラリとの競合を回避するための「jQuery」グローバル オブジェクトです */

無名関数 " undefined " の 3 番目のパラメーターは、実際の undefined をオーバーライドしたりシャドウしたりしないことを保証します。

これは、javascript で安全な自己呼び出し関数を定義します。

于 2012-04-19T11:23:20.390 に答える