14

我不知道如何搜索这个，所以我在这里问。

我继承了一个项目，这里没有人知道这个语法技巧叫什么。

如果从列表中选择了一个或另一个特定值，则有一个选择下拉更改事件将调用一个函数。

$('#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的三个特性的理解。

首先，函数是一流的对象，因此您可以将它们分配给变量等

 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();
}

更新：关于这个特殊情况的一个注释。在大多数情况下，您不需要做这样复杂的事情，因为$().toggle()接受布尔参数来打开和关闭，所以

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

将以相同的方式工作

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

请注意，我使用 !! 为了将值转换为布尔值，因为切换检查参数使用===

于 2012-08-02T18:16:27.917 回答
10

像这样的调用函数是什么？

糟糕的编码习惯。

这是一种动态调用show()orhide()函数的方法。看着真恶心

编辑：显然我的回答对某些人来说是“有争议的”。请让我澄清一下：如果我可以在三元运算符上编写 if-else 语句——尤其是对于字符串比较之类的事情——我肯定会更清楚更短的代码。

这不是“令人讨厌的外观”，因为只是三元运算符或只是方法的括号访问。看起来很讨厌，因为代码在清晰性上采用了捷径，并在不需要时采用了捷径。

三元运算符也不错。支架访问还不错。但它们是易变的概念，很容易被滥用。

于 2012-08-02T17:58:27.177 回答
6

显然它被称为括号表示法

于 2012-08-02T18:00:48.073 回答
3

三元运算符将值设置为两个或多个选项（可以嵌套）。

将它们视为一个switch或一个if/else或一个if/elseif/.../else操作，但仅用于设置 ONE 值。

所以看看类似的东西：

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

这是一个三元条件，可以根据条件是真还是假来选择设置名称。

在您的 jQuery 中，他们只是跳过了一步，通过使用带有三元内部的括号表示法。

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

这将要求sayHi()或，People.Bob基于的值。People.DougPeople.Jimmyselected_person

所以这是一个用于选择对象属性的三元条件，嵌套在括号符号内，而不是分两步完成：

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

编辑：

根据您的编辑，它是括号符号。

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

您可以myFunc通过几种不同的方式调用。
通过使用点表示法：var func = MyObj.myFunc;或通过括号表示法：var func = MyObj["myFunc"];
无论哪种方式，现在的值func都是myFunc。

所以他们正在做的是将 a 设置为string他们想要调用的函数的名称。

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 回答