jquery 方法链中的点与括号表示法

Question

假设我有一长串 jquery 方法，并希望根据某些布尔条件添加对两种方法之一（例如 show 或 hide）的额外调用。

有两种方法：

1) 点号: 将方法链存储在一个变量中，然后调用额外的方法（由if...else解析构造或三元运算符）与此变量使用点表示法。

代码:

var $tmp = $el._long_()._method_()._chain_();
if (condition) $tmp.show();
else $tmp.hide();

2) 括号表示法: 使用方括号表示法追加额外的方法调用（由三元运算符解析）。

代码:

$el._long_()._method_()._chain_()[condition? 'show' : 'hide']();

我曾经使用第一个，特别是如果 $tmp 变量在其他地方使用。但第二种方式似乎更简洁，但可读性较差。

对于这种情况，最好的选择是什么？

Answer 1

eslint prefers dot-notation:

In JavaScript, one can access properties using the dot notation (foo.bar) or square-bracket notation (foo["bar"]). However, the dot notation is often preferred because it is easier to read, less verbose, and works better with aggressive JavaScript minimizers.

IMO，将三级逻辑放在括号内有点太可爱而且难以阅读。

Answer 2

这个问题可以普遍适用于 JavaScript，而不是特定于 jQuery。

使用括号表示法的典型原因是：

您要引用的 function/property 名称是可变的，在这种情况下，括号可以帮助您保持代码干爽
property/function 名称包含字符，因此无法通过点符号访问。

您在此处的使用似乎是第一种情况的新颖变体 -- 您通过使用三元运算中的可变字符串值来指定要执行的函数来避免重复代码。

这是显式可读性和 DRY 代码之间的权衡，因此 "best" 选择将是主观的。

对于某些人来说，三元并不难读。你是you can read this ? "one of them" : "not one of them"。你总是可以在任何特别长的函数链附近发表评论，以帮助难以消化三元的人。

jquery 方法链中的点与括号表示法

dot vs bracket notation in jquery method chaining

javascript

jquery

chaining