При чтении минифицированного Javascript, как я должен читать этот оператор возврата с запятыми, && и || операторы?

У меня есть исходный код:

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
}

Я понимаю, как оператор запятой "выполняет серию выражений по порядку, а затем возвращает результат последнего из них" (отсюда). Но мне трудно понять, как эти операторы OR и AND работают при построении той строки, которая возвращается в минифицированном коде.

Есть ли у кого-нибудь полезный способ прочитать это вслух, который поможет мне понять, как это работает? Думаю, я не вижу, как 2 независимых оператора IF в исходном коде минифицируются в серию && then ||. Я не хочу искать источник каждый раз, когда хочу понять логику работы минифицированного кода.


javascript minify
person Atom999    schedule 26.09.2017    source источник
comment
Как насчет того, чтобы просто не читать мидифицированный код? Он не предназначен для употребления в пищу.   -  person llama    schedule 26.09.2017
comment
Я не хочу искать источник каждый раз, когда хочу понять логику работы минифицированного кода. Не надо. Используйте исходные карты.   -  person T.J. Crowder    schedule 26.09.2017
comment
На всякий случай, если непонятно, TJ означает технологию, описание которой вы можете найти здесь: MDN: используйте исходную карту.   -  person zero298    schedule 26.09.2017
comment
Не знаю, почему проголосовали против ... Я просто хотел узнать логику того, как это работает. (теперь я знаю, что это оценка короткого замыкания .. благодаря ответу на этот пост)   -  person Atom999    schedule 28.09.2017

Ответы (1)


arrow_upward
4
arrow_downward

По возможности используйте исходные карты, а не пытайтесь прочитать минимизированный код.

Но это не значит, что вы не хотите знать, как читать сложные утверждения; иногда их пишут люди. :-)

Я сделал некоторое форматирование и встроенные комментарии, чтобы объяснить:

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 запускает (ужасно) автоматическую вставку точки с запятой. Остальные () добавлены для ясности объяснения.

person T.J. Crowder    schedule 26.09.2017
comment
Огромное спасибо. Ваши комментарии помогли мне понять, что происходит. Я знаю исходные карты и буду использовать их, но просто подумал, что это то, что я должен знать о Javascript. Спасибо еще раз. - person Atom999; 26.09.2017
comment
Для дальнейшего уточнения, ядро ​​«магии» здесь, в каждом из операторов, - это устранение короткого замыкания для && и ||. - person Karl Reid; 26.09.2017