Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2015, 19:46
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

Как правильно организовать код?
Ниже по тексту идут долгие разъяснения о сути происходящего и ссылка ведет на код, в котором сперва можно заблудиться.
Я недавно закончил курс по javascript от этого сайта и в данный момент времени пытаюсь обобщить полученные данные, а так же выявить белые пятна, которые остались по завершению. Одна из проблем это явное неумение задать правильные имена методам и свойствам, но с этим я борюсь постепенно, а вот неумение правильно организовать код весьма мешает. Я пытаюсь создать веб-компонент, исключительно в учебных целях, в котором бы использовались основные темы, затронутые в курсе.
То, что имеется сейчас размещено в песочнице вот здесь. На данный момент это просто 2 кнопки. При нажатии на первую появляется div с картинкой, при нажатии на вторую div исчезает. Исчезновение не доработано, по причине того, что код уже раздулся и стал нечитаемым. Поэтому я притормозил и решил обратиться за помощью. Итоговая цель этой затеи создать компонент, разметка которого включается в страницу, к ней подключается наш скрипт собранный с помощью webpack и пропущенный через babel и стили нашей разметки. Наш компонент умеет отображать аватар по клику на кнопку, по зажатию кнопки мыши на картинке, справа будет появляться контейнер, куда мы можем перетащить наш аватар, после перетаскивания кнопка скрыть аватар становится недоступной. Генерация картинок осуществляется через запрос к серверу, где из полученного json файла выбирается рандомная картинка. Это то, что я хочу реализовать. Буду чрезмерно благодарен, если кто то дочитал до этого момента и уделит время чтоб посмотреть на то, что сейчас я имею и подскажет как вышеперечисленное грамотнее всего организовать.
Ответить с цитированием
  #2 (permalink)  
Старый 13.12.2015, 20:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

karssen,
вопрос зачем две одинаковых функции анимации -- одна что не справится?
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2015, 20:15
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

рони,
Да,эт я чего то передумал себя. Тогда еще 1 встречный вопрос, как лучше обозвать анимации, чтоб различать какая из них по завершению инициирует новое событие, а какая нет.
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2015, 20:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

karssen,
добавить в функцию анимации stop и callback -- stop -- форсирование или остановка анимации и если есть callback вызываем в конце анимации
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2015, 20:35
Аспирант
Посмотреть профиль Найти все сообщения от pnpquest
 
Регистрация: 09.11.2015
Сообщений: 94

Если ты о грамотном проектировании, то вот тебе совет. Встань возле стены, и бейся об нее головой до тех пор, пока не забудешь все то, что прочитал в этом учебнике, кроме технических деталей стандарта языка, а так же жеквери. Далее, берешь литературу по реализации и семантике динамических ООП языков, таких как Io, Self, Smalltalk. Смотришь как устроены эти языки, как они работают, изучаешь код, паттерны, затем возвращаешься к жаваскрипту, начинаешь понимать как он работает, фильтруешь весь синтаксический мусор (~ 95 % языка) и начинаешь писать грамотный, взвешенный код, profit.
Ответить с цитированием
  #6 (permalink)  
Старый 13.12.2015, 21:37
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

рони,
_animate(draw, duration, elem, callback) {
        let start = performance.now();

        requestAnimationFrame(function animate(time) {
        
          let timePassed = time - start;

          if (timePassed > duration) timePassed = duration;

          draw(timePassed);

          if (timePassed < duration) {
            requestAnimationFrame(animate);
          } else{
            if(!callback) return;

            callback(elem);
          }
        });
      }


Что то вроде такого? И в колбек передавать создание кастомного события? Не до конца понял как реализовать stop в этой функции.


pnpquest,
А без причинения себе физических увечий можно обойтись?)) Я собственно только технические детали и знаю. И то пока не на том уровне что хотелось бы. Можно грамотные советы по тому как сделать описанный выше веб компонент правильно исходя из ООП.
Ответить с цитированием
  #7 (permalink)  
Старый 13.12.2015, 21:40
Аспирант
Посмотреть профиль Найти все сообщения от pnpquest
 
Регистрация: 09.11.2015
Сообщений: 94

karssen,
Мне лень разбираться в твоем коде, извини. Можешь словами описать проблему, только кратко. Может че подскажу.
Ответить с цитированием
  #8 (permalink)  
Старый 13.12.2015, 21:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

karssen,
как вариант
if (timePassed > duration || elem.stop) timePassed = duration;
Ответить с цитированием
  #9 (permalink)  
Старый 13.12.2015, 21:47
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

рони,
Так получается нам уже проще сделать class Animation со своими методами и передавать в него набор опций при вызове?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно организовать ajax ссылки dima85 AJAX и COMET 4 01.08.2015 16:25
как правильно обращаться к свойствам объект внутри самого объекта ? mitiya Общие вопросы Javascript 12 25.04.2015 21:18
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 12:34
Как правильно удалить из шаблона, javascript код? QroxZ Общие вопросы Javascript 0 04.11.2011 17:59
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14