javascript - JavaScript 中 && 简写的解释

Question

使用 jQuery 的水印插件，我尝试 jslint 并最小化函数，但我遇到了以前从未见过的语法，其中存在确实应该有赋值或函数调用的表达式:

(function($) {

    $.fn.watermark = function(css, text) {

        return this.each(function() {

            var i = $(this), w;

            i.focus(function() {
                w && !(w=0) && i.removeClass(css).data('w',0).val('');
            })
                .blur(function() {
                    !i.val() && (w=1) && i.addClass(css).data('w',1).val(text);
                })
                .closest('form').submit(function() {
                    w && i.val('');
                });

            i.blur();
        });
    };

    $.fn.removeWatermark = function() {

        return this.each(function() {

            $(this).data('w') && $(this).val('');
        });
    };
})(jQuery);

我对以下几行特别感兴趣:

w && !(w=0) && i.removeClass(css).data('w',0).val('');

和

!i.val() && (w=1) && i.addClass(css).data('w',1).val(text);

有人可以解释这个简写并重写这些函数，以便我可以比较它们以更好地理解简写吗？

谢谢。

Answer 1

让我们将您所询问的每个陈述分解为它们的组成部分:

w && !(w=0) && i.removeClass(css).data('w',0).val('');

• w - w 是“true”吗？ (在本例中检查 != 0)
• !(w=0) - 将 w 设置为 0，取结果的相反值，因此 && 链继续
• i.removeClass(css).data('w',0).val('') - 删除类，将数据设置为 0 清除值。

<小时/>

!i.val() && (w=1) && i.addClass(css).data('w',1).val(text);

• !i.val() - 输入是否为空？
• (w=1) - 将 w 设置为 1
• i.addClass(css).data('w',1).val(text); - 添加类，将数据设置为 1 并设置无论水印文本是什么。

<小时/>

这两者都只是真正减少代码的声明，当然是以牺牲可读性为代价的。如果您正在查看缩小版本，这很常见，如果您不是并且这是原版，请用沙拉叉追作者，原版应该比原版更具可读性这个 IMO，虽然它对于缩小版本来说已经足够了。