Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.03.2016, 00:41
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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

Есть функция, привязанная к событию .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();


	});
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2016, 01:07
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Про делегирование прочитай.
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2016, 02:35
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Пример решения
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2016, 19:20
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

Decode,
Я немного знаком с делегированием. Я понимаю, что оно актуально для кода с множеством вложений. Чтобы при клике на любом "слое" событие срабатывало на корневом элементе.
Каким образом его использовать в моём вопросе, мне непонятно.
Ответить с цитированием
  #5 (permalink)  
Старый 31.03.2016, 19:48
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Alexander Belov, дак тебе же Poznakomlus привел пример.
Ответить с цитированием
  #6 (permalink)  
Старый 31.03.2016, 20:04
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

Decode,
Я видел, да. То, что нужно. Но там без делегирования, насколько я понял.
Ответить с цитированием
  #7 (permalink)  
Старый 31.03.2016, 20:08
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Сообщение от Alexander Belov Посмотреть сообщение
Decode,
Я видел, да. То, что нужно. Но там без делегирования, насколько я понял.
С делегированием.
Ответить с цитированием
  #8 (permalink)  
Старый 31.03.2016, 21:24
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

Decode,
Благодарю. Увидел.
Ответить с цитированием
  #9 (permalink)  
Старый 01.04.2016, 09:45
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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

+ не понял, почему в функции прописано 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);
Ответить с цитированием
  #10 (permalink)  
Старый 01.04.2016, 10:53
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация кода на php Duda.Ml1986@gmail.com Серверные языки и технологии 1 15.07.2014 22:42
Оптимизация кода Nifler jQuery 6 30.09.2013 21:14
Оптимизация кода assd18 Общие вопросы Javascript 4 21.06.2013 15:26
Оптимизация кода Prizrak177 Общие вопросы Javascript 0 15.02.2011 16:36
Оптимизация кода. Правила хорошего тона при написании скриптов [ANTI]CheateR jQuery 1 18.09.2010 08:41