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

&&可以用作“守卫”。基本上它意味着如果其中一个操作数返回“falsy”值，则停止计算表达式。

否定表达式会将其转换为布尔值。特别是一个否定表达的取决于它是“真实的”还是“虚假的”。

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

基本上说：

w is "truthy" (defined, true, a string, etc.)
AND set w to zero + convert the expression to true (because (w=0) would evaluate to 0, which is falsy)
AND evaluate i.removeClass(css).data('w',0).val('')

Answer 2

让我们打破你所询问的关于其组件的每个陈述：

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

w - w“是真的”吗？（在这种情况下检查!= 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虽然对于缩小版本来说还不错。

Answer 3

这些可以改写为：

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

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

像这样使用&&只是使用嵌套if的简写。它的优点是：

使用比爆炸嵌套if少得多的字符，减少了传递给浏览器的有效负载。
训练有素的眼睛可以更快阅读。

尽管如此，我必须说上面的例子是滥用这种速记，因为使用的条件非常复杂。当我需要检查一系列简单的事情时，我只会采用这种速记：如下例所示：

function log(s) {
    window.console && console.log && console.log(s);
}

Answer 4

＆安培;＆安培;是和。它用于比较/复合条件语句。它要求if语句中的两个条件都为真。我认为还有另一种方法可以重写它 - 这就是And的语法。

Answer 5

关于：

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

代码：

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

仅在

时执行

是真的。

Answer 6

使用

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

对于此解释，它允许您将多个命令串在一起，同时确保每个命令都为真。

这也可以表示为：

if (w) {

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

首先确保w的计算结果为true，如果是，则检查w=0是否为真（w != 0）。如果这也是真的，那么它将继续执行实际的命令。

这是许多使用延迟评估的语言的常用简写：如果下一个评估放在and（&&）中，那么如果返回false，则不会执行以下命令。这在某些情况下非常有用，在这种情况下，如果前一个语句返回true，您只想对某些事情执行操作，例如：

if (object != null && object.property == true)

在使用之前确保对象不为null，否则您将访问空指针。

解释＆amp;＆amp; JavaScript中的简写

6 个答案: