Я прошел курс Udacity JavaScript Design Patterns Course, когда я был только новичком, и мне было очень трудно понять его содержание. Как бы тяжело это ни было, я серьезно подошел к задаче и решил переписать ванильную версию проекта TodoMVC на JavaScript. Этот пост освещает мой опыт.

На заметку

  • Финальная версия находится в ES6
  • В исходном проекте отсутствуют некоторые функции, например маршрутизация и localStorage
  • Я пытался мыслить иначе, чем изначально был написан проект.
  • Кроме того, я использовал bootstrap и некоторые пользовательские CSS вместо исходных ресурсов проекта.
  • Код этого поста можно найти здесь, а демо - здесь.

Первая попытка

Код для первой попытки начался еще в конце 2016 года. У меня было немного свободного времени, и я решил применить то, что я узнал, в практическом плане. Бен, инструктор курса, представил шаблон MVC в шаблоне MVO (Модель, Представление, Осьминог), используя простые объекты JavaScript. Поэтому я написал свое приложение, используя простые объекты JS.

Внедрение простых функций, таких как добавление или удаление из списка, было несложным. Однако совместить простую реализацию шаблона и общение в масштабе приложения оказалось непросто. Фактически, мне было сложнее всего поддерживать функцию управления событиями в масштабе всего приложения. Я использовал небольшой модуль Pub / Sub, опубликованный Дэвидом Уолшем здесь. Моя модель MVC следовала приведенному ниже соглашению.

  • Модель публикует любые изменения / события
  • Контроллер подписывается на изменения / события и, в свою очередь, управляет изменениями и событиями между представлением и моделью.
  • Представление делает все, что нужно, через контроллер.

Хотя в то время это соглашение казалось разумным, я просто не знал, как заставить представление действительно сообщать о своих изменениях и предоставлять свои API. Таким образом, я не мог реализовать такие функции, как фильтрация и очистка.

В конце концов, я отказался от кода в январе 2017 года.

Вторая попытка

После того, как я некоторое время баловался с JavaScript и даже отказался от него, я наконец решил повторить проект через некоторое время в ноябре 2017 года. Мне потребовалось около двух рабочих дней среди других задач, чтобы завершить вторую попытку.

Вначале решил, что сожгу старую и перепишу новую. Я также решил использовать новые функции ES6, которые я изучил, и исключил реализацию маршрутизации (то есть изменение locationHash).

Модель и коллекция

Модель Todo имеет только один метод - toggleCompleted. Однако большая часть управления моделями произошла в TodoCollection.

Первое, что я сделал, - это прочитал исходный код коллекций Backbone.js, поскольку раньше я использовал эту библиотеку. Я попытался структурировать свои TodoCollection API на основе Backbone. Основными API входа были get и set.

Обзор

Представление было основано на моем понимании того, как работают современные интерфейсные фреймворки, то есть вносить изменения в виртуальную DOM и публиковать их при следующем рендеринге DOM. Мне нужен был эффективный способ справиться с этим без реализации виртуальной DOM, поэтому я нашел JavaScriptDocumentFragment. Об этом можно прочитать здесь и здесь. Они идеально подходили для моих нужд, так как я мог вносить все изменения в память до фактического повторного рендеринга всей DOM.

В представлении были представлены две функции рендеринга: listRender и infoRender. Они во многом зависели от текущего состояния просмотра, которое могло быть завершено, все и активно.

Контроллер

Контроллер смог выполнить основную часть работы, вызвав внутренний метод updateView после каждого изменения, будь то в Collection или в View.

Метод updateView показан ниже:

Другое

Основная точка входа в приложение - index.js, и у меня было несколько вспомогательных функций, таких как $parent для поиска родителя узла DOM и htmlToDOM для преобразования строки html в узел DOM. Приложение было связано с webpack, и я использовал yarn в качестве менеджера пакетов.

Заключение

Для меня это верный показатель роста. Я многому научился и продолжаю узнавать больше. Если вам понравился этот пост, подумайте о том, чтобы поделиться им и дать несколько аплодисментов.

Ваше здоровье.