Question

我有这个源代码：

function findMessageErrors(btn) {
    var error = "";
    var message = $(btn).parent().siblings().find("textarea[name='message']").val();
    if (message === "") {
        error += "*Please enter a message.<br/>";
    }
    if (!$(btn).parent().siblings().find('input[name="agree"]').prop('checked')) {
        error += "*Please agree.<br/>";
    }
    return error;
}

这会变得微不足道。缩小后，Chrome Dev工具源选项卡中显示如下：

function findMessageErrors(btn) {
    var error = "";
    return "" === $(btn).parent().siblings().find("textarea[name='message']").val() && (error += "*Please enter a message.<br/>"),
    $(btn).parent().siblings().find('input[name="agree"]').prop("checked") || (error += "*Please agree.<br/>"),
    error
}

我理解逗号运算符如何按顺序运行一系列表达式，然后返回最后一个'(from here)的结果。但是我很难理解OR和AND运算符是如何构建在缩小代码中返回的字符串的。

有没有人有一种有用的方式来大声阅读，这将有助于我了解它是如何工作的？我想我不知道源中2个独立的IF语句如何被缩小为一系列＆amp;＆amp;然后||。每次我想了解缩小代码的工作原理时，我都不想查找源代码。

Answer 1

尽可能使用source maps而不是尝试阅读缩小的代码。

但这并不意味着你不想知道如何阅读复杂的陈述;有时人类会写它们。： - ）

我已经做了一些格式化和内联评论来解释：

function findMessageErrors(btn) {
    var error = "";
    return (
        (
            "" === $(btn).parent().siblings().find("textarea[name='message']").val()
            &&
            // This only runs if the === above is true, because of the &&
            (error += "*Please enter a message.<br/>")
        )
        ,
        ( // This runs regardless of the above
            $(btn).parent().siblings().find('input[name="agree"]').prop("checked")
            ||
            // This only runs if prop("checked") returned a falsy value, because of ||
            (error += "*Please agree.<br/>")
        )
        ,
        ( // This runs regardless, of the above...
            // ...and this is the ultimate value of the return
            error
        )
    );
}

外部()刚刚添加，因为return之后的换行符触发（恐怖）自动分号插入。为了清楚起见，添加了其他()。

在阅读缩小的Javascript时，我怎么能用逗号，＆amp;＆amp;和||读取这个return语句运营商？

1 个答案: