代码之家 › 专栏 › 技术社区 › S16

JavaScript中&&速记的解释

shorthand jquery javascript

S16 · 技术社区 · 15 年前

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

有没有人能解释一下这个速记,重写一下这些函数,这样我就可以比较一下,更好地理解速记了?

6 回复 | 直到 15 年前

Nick Craver 15 年前

让我们把你要问的每一句话分解成它们的组成部分:

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

w -是 w型 “真的”?(正在检查 != 0
!(w=0) 到 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); -添加类,将数据设置为并将文本设置为水印文本的任何值。

这两个都只是对 真正地 减少代码,当然是以牺牲可读性为代价的。如果你在看一个缩小版,这是很常见的,如果你这是原版,用沙拉叉追着作者,原版应该比这本书可读性更好,尽管它只是一个小版本。

Cristian Sanchez 15 年前

&& 基本上它意味着如果一个操作数返回一个“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('')

Ates Goral 8 年前

这些可以重写为:

// 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 s、它的优点是:

使用的字符比分解的嵌套字符少一些 如果 s、减少传递到浏览器的有效负载。
对于训练有素的眼睛来说,阅读速度更快。

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

g.d.d.c 15 年前

on_conversion 15 年前

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

代码:

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

仅在以下情况下执行

是真实的。

Community Mohan Dere 13 年前

使用

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

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

if (w) {

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

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

这是许多使用延迟求值的语言中的常用速记法:如果下一个求值与 and &&

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

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