JavaScript方括号函数调用

JavaScript方括号函数调用,javascript,jquery,Javascript,Jquery,当我遇到这行代码时,我正在浏览jQuery源代码: jQuery(this)[ state ? "show" : "hide" ](); 相比之下有什么优势吗 state ? jQuery(this).show() : jQuery(this).hide(); ? 独立示例: var object = { foo: function() { alert('foo'); }, bar: function() { alert('bar')

当我遇到这行代码时,我正在浏览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']();
有什么好处吗

不,除了稍微短一点的代码之外,不要重复jQuery(this)。

但是,可以通过先声明,例如,
$this
来减少重复


我不觉得这个模式特别容易阅读,所以我自己使用它的唯一时间是如果参数列表非常重要,并且不依赖于调用哪个方法。

jQuery方法更简洁,并且遵循DRY原则。我认为这是与第二个示例相比的主要优势。

性能上没有优势。但在代码长度方面有一个优势(如果您认为这是一个优势的话),而DRY原则(不要重复代码)尤其是在函数中有许多参数的情况下

考虑以下几点:

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

cond ? obj.foo("param1", "param2", "param3") : obj.bar("param1", "param2", "param3");
正如您所看到的,您以第二种方式重复了大量代码


希望这有帮助。干杯

在你的例子中,两者之间没有区别

jQuery(this)[ state ? "show" : "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对象调用该方法。这不是很好吗?:)

按照顺序,我会排名:

  • 代码按预期可靠地工作(不需要有bug的解决方案)
  • 代码可读且易于维护(缺乏可读性或可维护性会滋生错误并减慢开发速度)
  • 代码是枯燥的(重复对可读性、可维护性、有时甚至性能都有害)
  • 代码很短(如果它实现了上述所有功能,那么越短越好)
  • 我对jQuery(this)[state?”show]的问题是:“hide”]()是因为它不是一种常见的设计模式,很多人都习惯于观看和阅读。因此,它不是超级可读的,并且很容易让将来试图维护该代码的人感到困惑(导致bug)。如上所述,如果二者不一致,我倾向于可读性而非干性

    在这种情况下,我可能会写:

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

    没有那么短,但在我看来更具可读性。

    那很好。你对它有不同的看法。你应该再投一票!我同意你的1-4点(以及它们的排名),但我不会声明
    $this
    变量,除非它将在更多地方使用。对于直接使用一行代码,它(在我看来)不会比
    state更具可读性?jQuery(this.show():jQuery(this.hide(),实际上需要输入更多的字符,这让我想知道代码中还使用了哪些字符。我的习惯是避免在同一个函数中多次使用相同的参数调用同一个函数。在这种情况下,这与简洁直接冲突。学到的新东西——在一天剩下的时间里关掉大脑:)
    
    var $this = jQuery(this);
    state ? $this.show(): $this.hide();