1

使用 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);

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

谢谢你。

4

6 回答 6

3

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

否定表达式会将其转换为布尔值。具体来说，它是对表达式的否定，具体取决于它是“真实的”还是“虚假的”。

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('')
于 2010-10-04T22:00:49.360 回答
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 更具可读性，虽然它很好对于缩小版。

于 2010-10-04T21:58:57.660 回答
1

这些可以重写为：

// 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);
    }
}

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

  1. 使用的字符比展开的嵌套ifs 略少，从而减少了传递给浏览器的有效负载。
  2. 训练有素的眼睛可以更快地阅读。

不过，我必须说，上面的例子是对这种速记的滥用，因为使用的条件相当复杂。当我需要检查一系列简单的事情时，我只使用这个速记，如下例所示：

function log(s) {
    window.console && console.log && console.log(s);
}
于 2010-10-04T21:59:23.023 回答
0

&& 是和。它用于比较/复合条件语句。它要求 if 语句中的两个条件都为真。我认为没有另一种方法可以重写它——那就是 And 的语法。

于 2010-10-04T21:55:53.767 回答
0

关于：

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

编码：

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

只有在

w

是真实的。

于 2010-10-04T21:58:18.497 回答
0

使用

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

对于这个解释，它允许您将多个命令串在一起，同时确保每个命令都是正确的。

这也可以表示为：

if (w) {

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

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

and这在许多使用惰性求值的语言中是常​​见的简写：如果下一个求值用( )放入，&&那么如果返回 false，则不会执行以下命令。这在您只想在前一个语句返回 true 的情况下对某事执行操作的情况下很有用，例如：

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

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

于 2010-10-04T22:01:05.647 回答