Я прошел курс 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 в качестве менеджера пакетов.
Заключение
Для меня это верный показатель роста. Я многому научился и продолжаю узнавать больше. Если вам понравился этот пост, подумайте о том, чтобы поделиться им и дать несколько аплодисментов.
Ваше здоровье.