1

Как-то раз, давным-давно я захотел минифицировать свой JS-код, но случайно зашёл на сайт, который помимо минификации ещё и обфусцирует его. Я это заметил не сразу, а лишь спустя, ибо торопился поскорее закончить работу. Теперь я решил этот код вручную деобфусцировать, но сломал при этом функционал. Суть в том, что при клике на инпут появлялось выпадающее меню, а если кликнуть где-то в другое место, то оно скрывалось. Я переписал этот код на читаемый, но при этом сломался тот самый функционал, отвечающий за закрытие выпадающего меню. Почему это произошло? Ведь я в точности переписал код.

Новый код:

$(() => {
    let dropdown = $('.passengers-main-dropdown');

    dropdown.on('click', function(){
        $(this).toggleClass('active');
        $(this).nextAll('.dropdown-box').toggleClass('active');
    });

    $('body').on('click', function(e){
        let drop = $('.dropdown-box');
        console.log(`${dropdown.is(e.target)} + ${dropdown.has(e.target).length !== 0} + ${drop.has(e.target).length !== 0)}`)
        if(dropdown.is(e.target) && dropdown.has(e.target).length !== 0 && drop.has(e.target).length !== 0) {
            drop.removeClass('active');
            dropdown.removeClass('active');
        }
    })
});

Старый (обфусцированный) код:

$(function() {
    var t = $(".passengers-main-dropdown");
    t.on("click", function() {
        t.nextAll(".dropdown-box").toggleClass("active"), t.toggleClass("active")
    }), $("body").on("click", function(o) {
        var i = $(".dropdown-box");
        t.is(o.target) || 0 !== t.has(o.target).length || 0 !== $(i).has(o.target).length || (i.removeClass("active"), t.removeClass("active"))
    })
})

Проблема, скорее всего, в этой строке: t.is(o.target) || 0 !== t.has(o.target).length || 0 !== $(i).has(o.target).length || (i.removeClass("active"), t.removeClass("active"))

У меня она переписана, как:

if(dropdown.is(e.target) && dropdown.has(e.target).length !== 0 && drop.has(e.target).length !== 0) { drop.removeClass('active'); dropdown.removeClass('active'); }

Несмотря на то, что в обфусцированном варианте кода используется оператор ||(или), переписанный код с этим оператором не работает вовсе. С оператором &&(и) выпадающий список работает, однако, почему-то не скрывается по клику вне. Помогите, пожалуйста, разобраться, где я допустил ошибку.

3
  • 3
    ОМГ, а вы что, не храните исходный код?
    – Nick Volynkin
    Commented 25 июн. 2017 в 13:40
  • @NickVolynkin на то время я ещё не умел делать бэкапы. Да и как-то не парился особо. Commented 25 июн. 2017 в 13:42
  • Обфусцированный код хранить вообще не надо, лол. Он должен быть в опубликованной релизной версии, но никак не в локальной версии для разработки
    – andreymal
    Commented 26 июн. 2017 в 8:12

1 ответ 1

2

Данная строка кода:

t.is(o.target) || 0 !== t.has(o.target).length || 0 !== $(i).has(o.target).length || (i.removeClass("active"), t.removeClass("active"))

имеет вид:

a || b || c || d

JavaScript вычисляет несколько ИЛИ слева направо. При этом, чтобы экономить ресурсы, используется так называемый «короткий цикл вычисления».

Если выражение a вернет true, то вычислять выражения b, c, d не имеет смысла. Очевидно, выражение d вычислится только тогда, когда выражения a, b и c вернут false.

if (a == false && b == false && c == false) {
  d
}

Преобразованный код для вашей задачи:

if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0 && $(drop).has(e.target).length === 0) {
  drop.removeClass("active");
  dropdown.removeClass("active")
}
4
  • .length ты зря потерял...
    – Qwertiy
    Commented 26 июн. 2017 в 8:11
  • @Qwertiy почему?
    – Dmitry
    Commented 26 июн. 2017 в 8:12
  • 1
    Потому что это jQuery. Там has возвращает набор элементов, который никогда не бывает ложным. А вот пустым бывает.
    – Qwertiy
    Commented 26 июн. 2017 в 8:13
  • @Qwertiy согласен. Исправил
    – Dmitry
    Commented 26 июн. 2017 в 8:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.