Ответы пользователя по тегу JavaScript
  • Где посмотреть реальные примеры использования "правильных" клиентских javascript?

    @everdimension
    Отличный вопрос, а большинство ответов дурацкие. Да, до "однозначно идеальной" архитектуры коммьюнити пока не доросло, но это не значит, что не надо интересоваться тем, как можно сделать лучше и опираться на чей-то опыт.

    Как раз за последнее время с появлением es2015 и webpack дела стали куда лучше, чем когда-либо.
    Однако в сводобном доступе больших полноценных проектов я встречал мало, хотя может быть не так хорошо искал. Но известные примеры есть, посмотри вот —

    https://github.com/andrewngu/sound-redux
    https://github.com/vslinko/ripster

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

    Посмотри на react-starter-kit. Там собрано очень много полезного. Хотя я и не советую вслепую брать бойлерплейты и разворачивать на них свой проект, но очень советую на них посмотреть "изнутри" и узнать много интересного или просто нового.

    Посмотри на examples в react-router'е. Конкретно в примере huge-apps показывается, как можно бить вебпаком код на куски и подгружать только необходимое на лету.

    Может смутить то, что во всех приведённых ссылках используется react, но для твоей цели (узнать о хорошей архитектуре приложений) это большого значения не имеет. Хотя реакт и сыграл большую роль в "компонентном" мышлении и представлении и повлиял — в хорошем, на мой взгляд, смысле — на то, какими сейчас видятся клиентские js приложения. Из большинства упомянутых проектов реакт убирается довольно легко и заменяется другой понравившейся библиотекой, а именно такая лёгкость смены технологий и является одним из критериев хорошей архитектуры.
    Ответ написан
    Комментировать
  • Как закрывать выпадающее меню при клике вне его самого?

    @everdimension
    Использовать e.stopPropagation() — плохая идея. Читайте

    Правильный способ — проверять, является ли target сделанного клика элементом меню или чем-то другим. Если это не меню — закрывать меню.

    Появляется правильный вопрос, что делать, если кликнутый элемент — дочерний элемент меню? Для этого есть офигенный метод node.contains()

    Собственно, вся требуемая проверка получается совсем несложная — gist
    var el = document.getElementById('el');
    
    document.addEventListener('click', outsideEvtListener);
    
    function outsideEvtListener(evt) {
        if (evt.target === el || el.contains(evt.target)) {
            // клик внутри
            return;
        }
        // код для закрытия меню, например el.classList.add('hidden')
       
        // не забыть убрать слушатель событий (не для каждой имплементации требуется)
        document.removeEventListener(outsideEvtListener);
    }
    Ответ написан
    2 комментария