Question

当我遇到这一行时浏览了jQuery源代码：

jQuery(this)[ state ? "show" : "hide" ]();

是否有任何优势

state ? jQuery(this).show() : jQuery(this).hide();

独立示例：

var object = {
    foo: function() {
        alert('foo');
    },

    bar: function() {
        alert('bar');
    }
};  


object[true ? 'foo' : 'bar']();
object[false ? 'foo' : 'bar']();

Answer 1

表现没有优势。但是如果你的函数中有很多参数，那么代码长度（如果你认为它是一个优势）和DRY原则（不要重复代码）是有优势的。

请考虑以下事项：

obj[ cond ? "foo" : "bar" ]("param1", "param2", "param3");

对战：

cond ? obj.foo("param1", "param2", "param3") : obj.bar("param1", "param2", "param3");

如您所见，您以第二种方式重复“大量”代码

希望这会有所帮助。干杯

Answer 2

在您的示例中，

之间没有区别

jQuery(this)[ state ? "show" : "hide" ]();

和

state ? jQuery(this).show() : jQuery(this).hide();

但是，正方形可以用来调用没有它名字的函数：

var myFunctionName = 'show';
jQuery(this)[ myFunctionName ]();

为什么这有用？在上面的例子中，它完全没用。但我们可以找到一些可能很好的情况：

// list of available methods
var effects = [ 'hide', 'slideUp', 'fadeOut' ];

// get a random index between 0 and effects.length-1 (2 in this case)
var randomIndex = Math.floor(Math.random() * (effects.length)); 

// get the method name
var methodToCall = effects[ randomIndex ];

jQuery(this)[ methodToCall ]();

此代码段将选择一个随机方法并在jQuery对象上调用该方法。不是很好吗？：）

Answer 3

有什么好处

不，除了稍微短的代码，而不是重复jQuery(this).

然而，可以通过声明重复来减轻重复。 $this首先。

我没有发现这种模式特别容易阅读，所以我自己唯一一次使用它是因为参数列表不重要，并且不依赖于调用哪种方法。

Answer 4

jQuery方式更简洁，并遵循DRY原则。我认为这是第二个例子的主要优势。

Answer 5

按顺序，我排名：

代码可靠地按预期工作（没有合适的解决方案）
代码易读且容易维护（缺乏可读性或可维护性会导致错误并降低开发速度）
代码是干的（重复是可读性，可维护性和有时性能不好）
代码很短（如果它达到了上述所有条件，通常会更短）

我对jQuery(this)[ state ? "show" : "hide" ]();的问题在于，这并不是很多人习惯于阅读和习惯阅读的常见设计模式。因此，它不具有超级可读性，并且很容易混淆未来试图维护此代码的人（导致错误）。正如我上面提到的优先事项所示，如果两者存在差异，我更倾向于对DRY的可读性。

在这种情况下，我可能会写：

var $this = jQuery(this);
state ? $this.show(): $this.hide();

不是很短，但在我看来更具可读性。

JavaScript方括号函数调用

5 个答案: