14

検索しても分からないのでこちらで質問させて頂きます。

私はプロジェクトを継承しましたが、ここにいる誰もこの構文トリックが何と呼ばれているか知りません。

リストの中から 1 つまたは別の特定の値が選択された場合に関数を呼び出す選択ドロップダウン変更イベントがあります。

$('#accordion select[name=x_range]').change(function(){
  $('#custom-time')[$(this).val() == 'custom' ? 'show' : 'hide']();
  $('#custom-time-to-now')[$(this).val() == 'custom_to_now' ? 'show' : 'hide']();
  updateTimeIntervalOptions();
}).triggerHandler('change');

この場合、表示または非表示機能が#custom-timeまたは#custom-time-to-nowdiv で呼び出されます。

このような呼び出し関数は何と呼ばれますか?

編集：
私は三項if/elseを理解していると言ったはずですが、その$(selector)[function_name]()部分は理解していません。

4

7 に答える 7

17

これはトリックではなく、javascriptの3つの機能を理解していると言えます。

まず、関数はファーストクラスのオブジェクトなので、変数などに割り当てることができます

 var f = function () { ... }
 var b = [];
 b[1] = f; // assigning function to array element
 b[1]();   // calling function assigned to array element

第二に、便利な三項演算子。これは、効果的に組み合わせifと割り当ての省略表記です。

 var a = (b >c ) ? b : c;

 // is the same as

 if (b > c ) {
     a = b;
 } else {
     a = c;
 }

そして最後に重要なのは、すべてのオブジェクトプロパティにディクショナリ要素としてアクセスできるという事実です。

 a.b = 5
 a['b'] === 5 // true!

だから、これをすべてまとめると、このような表現ができます

$(selector)[condition?'show':'hide']();

これはに等しい

if (condition) {
   $(selector).show();
} else {
   $(selector).hide();
}

更新：この特定のケースに関する1つのメモ。$().toggle()ほとんどの場合、オンとオフを切り替えるためのブール引数を受け入れるので、そのような複雑なことをする必要はありません。

$(selector)[condition?'show':'hide']();

と同じように動作します

$(selector).toggle(!!condition);

私が使用することに注意してください!! トグルが使用してパラメータをチェックするため、値をブール値にキャストするため===

于 2012-08-02T18:16:27.917 に答える
10

このような呼び出し関数は何と呼ばれますか?

コーディングの練習が不十分。

show()またはhide()関数を動的に呼び出す方法です。それは血まみれの厄介な見た目です。

編集：明らかに私の答えは、一部の人々にとって「物議を醸す」ものです。はっきりさせてください。特に文字列比較のような場合に、三項演算子で if-else ステートメントを書くことができれば、短いコードよりも明確になります。

三項演算子またはメソッドのブラケットアクセスだけのため、「血まみれの厄介な見た目」ではありません。コードが明快さよりも近道を取り、必要のないときにその近道を取ったため、見栄えが悪くなります。

三項演算子は悪くありません。ブラケットへのアクセスは悪くありません。しかし、それらは簡単に悪用される不安定な概念です。

于 2012-08-02T17:58:27.177 に答える
6

どうやらそれはブラケット記法と呼ばれています

于 2012-08-02T18:00:48.073 に答える
3

三項演算子は、値を 2 つ以上のオプションに設定します (入れ子にすることができます)。

switchまたは またはif/elseまたは操作のように考えてください。ただし、1 つのif/elseif/.../else値を設定するためだけです。

次のようなものを見てください。

var name = X === Y ? "Bob" : "Doug";
sayHello(name);

これは、条件が true か false かに基づいて、オプションで名前を設定する 3 項条件です。

あなたのjQueryでは、三項を含むブラケット表記を使用して、ステップをスキップしているだけです。

People[ (selected_person === "Bob") ? "Bob" : (selected_person === "Doug") ? "Doug" : "Jimmy" ].sayHi();

これは、 の値に基づいてsayHi()、People.BobまたはPeople.Dougを呼び出します。People.Jimmyselected_person

したがって、これはオブジェクト プロパティを選択するために使用される 3 項条件であり、2 つのステップで行うのではなく、ブラケット表記の内側にネストされています。

 var person = // ternary from last step
 People[person].sayHi();

編集：

あなたの編集に基づいて、それはブラケット表記です。

MyObj = { myFunc : function () { doStuff(); } };

myFuncいくつかの異なる方法で呼び出すことができます。
ドット表記法を使用するvar func = MyObj.myFunc;か、ブラケット表記法を使用するかのいずれか:var func = MyObj["myFunc"];
どちらの方法でも、 の値funcは nowmyFuncです。

stringつまり、呼び出したい関数の名前に a を設定しています。

var string = "show";
MyObj[string] // = MyObj.show
MyObj[string]() // = MyObj.show()

あなたのコードの場合、文字列の値を決定するために三項を使用しています。

于 2012-08-02T18:04:13.410 に答える
2

それは「配列表記」と呼ばれます。ここを見てください: http://www.erichynds.com/jquery/accessing-jquery-methods-using-array-syntax/

于 2012-08-02T18:01:19.387 に答える
2

作成者は、三項演算子 ( ) を使用して、ではなく? :配列表記を使用して jQuery オブジェクトのメンバー関数を呼び出しています。分解すると、次のようになります。el['show']()el.show()

var fnName;
if($(this).val() == 'custom') {
  fnName = 'show';
} else {
  fnName = 'hide';
}

$('#custom-time')[fnName]();  // an alternative to $('#custom-time').show() or .hide()
于 2012-08-02T18:02:07.860 に答える
0

このパターンに特定の名前はないと思います。さまざまなメソッド名を選択するために使用される条件演算子があり、この文字列を「ブラケット」または「配列」構文で使用して、メソッドが動的に呼び出されます。

于 2012-08-02T18:02:59.683 に答える