Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Оптимизация кода (https://javascript.ru/forum/jquery/62216-optimizaciya-koda.html)

Alexander Belov 31.03.2016 00:41

Оптимизация кода
 
Привет!

Есть функция, привязанная к событию .on( "click" )
Эта функция "перематывает" контент страницы на нужную соответствующую секцию.

$( ".red" ).on( "click", function(){

		$( "html, body" ).animate({
			scrollTop: $( ".red_zone" ).offset().top
		}, 1000);

	});

	$( ".blue" ).on( "click", function(){

		$( "html, body" ).animate({
			scrollTop: $( ".blue_zone" ).offset().top
		}, 1000);

	});


Допустим, таких секций много. Каким образом можно оптимизировать код, учитывая, что функция scrollTop всегда будет "перематывать" страницу на одну и ту же величину (отступ в 1000px), но всегда к разным сецкиям. Т.е. каждой кнопке соответствует своя секция. 10 разных кнопок - 10 разных секций но с одной и той же функцией по сути.

И второй вопрос: к примеру, есть функция doSmth().

Можно ли её прописать как дефолт к событию .on( "click" ) для моих элементов?
Т.е., чтобы не приходилось в конце каждой такой функции вызывать функцию doSmth() "вручную" как показано в коде ниже?

$( ".red" ).on( "click", function(){

		$( "html, body" ).animate({
			scrollTop: $( ".red_zone" ).offset().top
		}, 1000);

                doSmth();

	});

	$( ".blue" ).on( "click", function(){

		$( "html, body" ).animate({
			scrollTop: $( ".blue_zone" ).offset().top
		}, 1000);
      
                 doSmth();


	});

Decode 31.03.2016 01:07

Про делегирование прочитай.

Vlasenko Fedor 31.03.2016 02:35

Пример решения

Alexander Belov 31.03.2016 19:20

Decode,
Я немного знаком с делегированием. Я понимаю, что оно актуально для кода с множеством вложений. Чтобы при клике на любом "слое" событие срабатывало на корневом элементе.
Каким образом его использовать в моём вопросе, мне непонятно.

Decode 31.03.2016 19:48

Alexander Belov, дак тебе же Poznakomlus привел пример.

Alexander Belov 31.03.2016 20:04

Decode,
Я видел, да. То, что нужно. Но там без делегирования, насколько я понял.

Decode 31.03.2016 20:08

Цитата:

Сообщение от Alexander Belov (Сообщение 412587)
Decode,
Я видел, да. То, что нужно. Но там без делегирования, насколько я понял.

С делегированием.

Alexander Belov 31.03.2016 21:24

Decode,
Благодарю. Увидел.

Alexander Belov 01.04.2016 09:45

Объясните, пожалуйста, почему именно делегирование использовалось для решения такой задачи (в чём его
преимущество в данном случае?).

+ не понял, почему в функции прописано return false
Без возврата false тоже работает, вроде.
* Created by Fedor Vlasenko [email]VlasenkoFedor@mail.ru[/email]
 */
!function($){
   $(document).on('click', 'a[href^=#]', function () {
        $('html, body').animate({ scrollTop:  $('a[name="'+this.hash.slice(1)+'"]').offset().top }, 1000 ); 
        return false;
    });
}(jQuery);

Vlasenko Fedor 01.04.2016 10:53

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


Часовой пояс GMT +3, время: 09:31.