JQuery: попытка #2. Как реализовать функцию?

Question

[Anton Filippov]

Есть код:

var buttonAll = $('.works-button')[0],
    buttonWeb = $('.works-button')[1],
    buttonGraphic = $('.works-button')[2],
    buttonArt = $('.works-button')[3],
    worksWeb = $('.category-web'),
    worksGraphic = $('.category-graphic'),
    worksArt = $('.category-art'),
    worksAll = $('.work-image-link');
 
$(document).ready(function(){
    $(buttonAll).on('click', function(){
        worksAll.show('fast', function(){
            worksAll.appendTo('.works-flow');
        });
    });
 
    $(buttonWeb).on('click', function(){
        worksAll.hide('fast');
        worksWeb.show('fast', function(){
            worksWeb.appendTo('.works-flow');
        });
    });
 
    $(buttonGraphic).on('click', function(){
        worksAll.hide('fast');
        worksGraphic.show('fast', function(){
            worksGraphic.appendTo('.works-flow');
        });
    });
 
    $(buttonArt).on('click', function(){
        worksAll.hide('fast');
        worksArt.show('fast', function(){
            worksArt.appendTo('.works-flow');
        });
    });
 
});

Хочу отрефакторить его так, чтобы:

// Хочу, чтобы такой фрагмент:
 
// $(buttonWeb).on('click', function(){
//     worksAll.hide('fast');
//     worksWeb.show('fast', function(){
//         worksWeb.appendTo('.works-flow');
//     });
// });
 
// можно было заменить на: 
// $(buttonWeb).on('click', showOnly(worksWeb));

Помогите написать функцию, эта не работает:

showOnly = function(cat){
      $(this).addClass('active');
        worksAll.hide();
        cat.show('fast', function(){
            cat.appendTo('.works-flow');
        });
    };

Comments

[88z]

Фиддл в студию

[Anton Filippov]

88z: вопрос уже решен, ниже в комментах кодепен есть

Answer 1

[Владислав Килин]

Попробуйте

showOnly = function (cat) {
    return function (evt) {
        $(this).addClass('active');
        worksAll.hide();
        cat.show('fast', function () { cat.appendTo('.works-flow'); });
    };
};

А еще поузнавайте про делегаты в JavaScript.

Comments

[Сергей Протько]

Это не делегаты. Это замыкания.

[Владислав Килин]

Сергей Протько: топикстартер должен передать по ссылке функцию. Это делегат. Замыкание здесь - постольку поскольку.

[Сергей Протько]

Quilin: Javascript не c#, в нем есть отдельное понятие - делегирование событий. Делегатов же в JS нет и небыло никогда, эта штука специфична только для .NET.

[Сергей Протько]

Quilin: я к тому что слово "делегат" в контексте js может ввести путаницу. В JS не нужно держать отдельную структуру для хранения "указателя" на функцию. Замыкания и анонимные функции в нем такой же объект как и любой другой. Так что вы в return возвращаете не делегат а просто объект по сути.

[Anton Filippov]

Спасибо! этот вариант подошел. Про делегаты и каррирование почитаю, я только не понял, что за evt и где мы его используем?

[Anton Filippov]

Сергей Протько: не знаком с понятием делегатов вообще.
В двух словах почему не работало моим способом? почему надо возвращать функцию?

[Владислав Килин]

Сергей Протько: ну, делегирование не означат отдельную структуру, и дотнет тут вообще ни при чем. Речь о делегировании как о композиции методов двух объектов.

[Владислав Килин]

Сергей Протько: можете назвать это "аггрегированием" или "композицией", но сама реализация предполагает передачу объекта по ссылке, что, собственно, и называется делегированием.

[Владислав Килин]

Антон: потому что jQuery-метод "on" принимает в себя вторым параметром именно функцию-обработчик события. В момент "подписки" (subscribe) обработчик еще не выполняется, так что ему нужно дождаться, когда событие будет "опубликовано" (publish), после чего он, собственно, и выполнит функцию, которая была сгенерирована нами в showOnly. По-хорошему эту функцию надо бы назвать "createShowOnlyFunction". Evt - это аргумент, который принимает функция-обработчик события в jQuery-методе "on". Это объект клиентского события, на которое вы подписались, из него можно узнать кучу интересных вещей. Например, evt.ctrlKey скажет, зажимал ли пользователь ctrl, когда вызвал событие. А evt.preventDefault() позволит отменить обработчик события "по умолчанию" (например, пользователь не перейдет по ссылке, если кликнул по ней).

[Anton Filippov]

Quilin: спасибо про подробный ответ)
даже не встречался с таким пока.

Если интересно, вот для чего это все было codepen.io/anon/pen/QwbxNK
(только в artwork почему то 2 блока слипаются)

[Сергей Протько]

Quilin: в функциональном программировании есть вполне себе устоявщийся термин - каррирование. Когда функция возвращает в качестве результата своей работы замыкание, имеющие доступ к значению аргументов вызываемой функции и т.д. и т.п. Задача подразумевает именно это а не "передачу чего-бы-то-нибыло по ссылке". Отдавайте хоть по ссылке хоть с копированием по значению хоть как угодно - у нас из замыкания просто будет доступ к родительскому скоупу где хранятся все нужные нам значения + свой контексте и аргументы.

А делегирование функций/методов - такое понятие по сути распространено только в ОО мире. Классы-делегаты, прокси классы... По сути все так же как и везде - просто терминология различается как и внутреннее устройство работы. В целом суть та же. Но поскольку мы говорим о JS то там довольно сложно найти информацию о "делегатах" ибо популярнее функциональные подходы. Я хотел указать лишь на это.

[Владислав Килин]

Сергей Протько: композиция - вполне функциональное явление. Каррирование для описания данного явления более частное и потому может быть более точное понятие. Реализация каррирования, равно как и композиции получается через передачу в функцию указателя на другую функцию. Впрочем, я лично прекрасно понял, что вы имеете в виду и прошу прощения, что воспользовался не очень популярной терминологией.

Answer 2

[Сергей Протько]

Функции могут возвращать функции

function (worksWeb) {
    return function () {
        // magic     
        // эту функцию будет дергать jQuery по клику.
    }
}

Это называется каррирование. Если развернуть получится так:

var buttonWebClickHandler = showOnly(worksWeb);
$(buttonWeb).on('click', buttonWebClickHandler);

Answer 3

[asdz]

было бы легче если вы оформили задачу на codepen.

Comments

[Anton Filippov]

ок, сейчас будет :)

[Anton Filippov]

codepen.io/anon/pen/QwbxNK в принципе уже отрефакторенный вариант

[asdz]

Антон: такое нужно? codepen.io/asdz/pen/azOKJj?editors=101

[Anton Filippov]

asdz: да, все уже ок, но с версткой есть один невозможный косяк, можете подсказать?
codepen.io/anon/pen/QwbxNK - Artwork - первые 2 работы сливаются, хотя правый маргин у меня убирается только у nth-child(4n).
В чём может быть дело?

[asdz]

это потому что данный элемент хоть и первым отображается, но на самом деле его позиция кратна 4, т.е. он в конце строки, из-за этого отступа справа у него нет

[asdz]

Вам лучше отображать и скрывать элементы добавлением/исключением класса управляющий стилем display,

.visible {
display:block;
}

a стиль

.work-image-link:nth-child(4n) {
 margin-right: 0; 
}

переписать на

.work-image-link.visible:nth-child(4n) {
 margin-right: 0; 
}

[Anton Filippov]

asdz: да, точно. я сначала подумал об этом, потом отбросил мысль, когда в других категориях все было нормально(как оказалось по совпадению). сделал небольшой чит, спасибо.

[Anton Filippov]

asdz: хм, интересно.
Я сначала хотел скрывать элементы display: none, но это все выглядело резко и топорно и транзишны не применялись, поэтому я решил делать с помощью jquery.
(это моя первая верстка, поэтому так туплю)