Как да подобрим вашите JavaScript умения, като напишете собствена рамка за уеб разработка

Снимка от @ryoji__iwata от Unsplash

Някога питали ли сте се как работи рамката?

Когато открих AngularJS след като научих jQuery преди много години, AngularJS ми се стори като тъмна магия.

Тогава излезе Vue.js и като анализирах как работи под капака, ме насърчи да опитам да напиша собствена двустранна система за свързване.

В тази статия ще ви покажа как да напишете съвременна рамка на JavaScript с персонализирани атрибути на HTML елементи, реактивност и двойно обвързване.

Как работи реактивността?

Би било добре да започнете с разбирането за това как работи реактивността. Добрата новина е, че това е просто. Всъщност, когато декларирате нов компонент във Vue.js, рамката ще проксимира всяко свойство (getters и setters), използвайки модела на прокси дизайн.

По този начин ще бъде в състояние да открие промените в стойността на свойствата както от кода, така и от потребителските данни.

Как изглежда моделът на прокси дизайн

Идеята зад прокси модела е просто да се претовари достъпа до обект. Аналогия в реалния живот може да бъде достъпът до вашата банкова сметка.

Например не можете да получите директен достъп до салдото на банковата си сметка и да промените стойността според нуждите си. Необходимо е да попитате някой, който има това разрешение, в случая - вашата банка.

В горния пример, когато използвате банковия обект за достъп до салдото по сметката, функцията за получаване се претоварва и тя винаги връща 9 000 000 вместо стойността на свойството, дори ако собствеността не съществува.

Чрез претоварване на зададената функция е възможно да се манипулира нейното поведение. Можете да промените стойността, която да зададете, вместо това да актуализирате друго свойство или дори изобщо да не направите нищо.

Пример за реактивност

Сега, когато сте уверени в това как работи модела на прокси дизайн, нека започнем да пишем нашата JavaScript рамка.

За да бъдем прости, ще имитираме синтаксиса AngularJS, за да го направим. Декларирането на контролер и обвързване на елементи на шаблон към свойствата на контролера е съвсем ясно.

Първо определете контролер със свойства. След това използвайте този контролер в шаблон. И накрая, използвайте атрибута ng-bind, за да активирате двойното свързване със стойността на елемента.

Разработете шаблона и инсталирайте контролера

За да имаме свойства за обвързване, трябва да намерим място (известен още като контролер), за да декларираме тези свойства. По този начин е необходимо да се определи контролер и да се въведе в нашата рамка.

По време на декларацията на контролера, рамката ще търси елементи, които имат атрибути на ng-контролер.

Ако се вписва с един от декларираните контролери, той ще създаде нов екземпляр на този контролер. Този екземпляр на контролер е отговорен само за този конкретен шаблон.

Ето как изглежда декларацията за променлива на ръчни контролери. Обектът контролери съдържа всички контролери, декларирани в рамките, чрез извикване на addController.

Определение за ръчно изработени контролери

За всеки контролер се запаметява фабрична функция за създаване на нов контролер, когато е необходимо. Рамката също съхранява всеки от новите екземпляри на същия контролер, използван в шаблона.

Търсите връзки

В този момент имаме инстанция на контролера и парче шаблон, използвайки този екземпляр.

Следващата стъпка е да се търсят елементи със връзки, които използват свойства на контролера.

Съвсем просто, тя съхранява всички връзки на обект (използва се като хеш карта). Тази променлива съдържа всички свойства за свързване с текущата стойност и всички DOM елементи, които свързват това свойство.

Декларация за ръчно изработени връзки

Свойства на контролера с двойно свързване

След като предварителната работа е извършена от рамката, сега идва интересната част: двойно обвързване.

Това включва обвързване на свойството на контролера с DOM елементите, за да се актуализира DOM винаги, когато кодът актуализира стойността на свойството.

Също така, не забравяйте да свържете DOM елементите към свойството на контролера. По този начин, когато потребителят промени входната стойност, той ще актуализира свойството на контролера. Тогава тя ще актуализира и всички други елементи, свързани с това свойство.

Откриване на актуализации от код с прокси

Както беше обяснено по-горе, Vue обвива компоненти в прокси, за да реагира на промените в свойствата. Нека направим същото, като се свържем със сетера само за свойства, свързани с контролера.

Всеки път, когато е зададено свързано свойство, проксито ще проверява всички елементи, свързани към това свойство. Тогава ще ги актуализира с новата стойност.

В този пример поддържаме свързване само на входни елементи, тъй като е зададен само атрибутът на стойност.

Реагирайте на стихийни събития

Последното нещо, което трябва да направите, е да реагирате на взаимодействията на потребителите. DOM елементите задействат събития, когато открият промяна в стойността.

Слушайте тези събития и актуализирайте свързаната собственост с новата стойност от събитието. Всички останали елементи, свързани към същото свойство, ще се актуализират автоматично благодарение на прокси сървъра.

След като сглобите всичко, получавате ръчно изработени двойно вложени входове. Ето работна демонстрация, включваща всички кодове.

Благодаря ви за четенето. Надявам се да ви помогна да демистифицирате как работят рамките на JavaScript.

Честито! Вие сте разработили популярни функции като персонализирани атрибути на HTML елементи, реактивност и двойно свързване!

Ако сте намерили тази статия за полезна, моля кликнете върху бутона няколко пъти, за да накарате другите да намерят статията и да покажат вашата подкрепа!

Не забравяйте да ме последвате, за да получавате известия за предстоящите ми статии

Вижте и другите ми публикации

https://medium.com/@jbardon/latest

➥ Реагирайте за начинаещи

  • Кратко ръководство за научаване на реакцията и как работи виртуалният DOM
  • Как да предизвикаме реактивността в реакция с държавите

➥ JavaScript

  • Чести грешки, които трябва да се избягват при работа с Vue.js
  • Спрете болезненото отстраняване на грешки в JavaScript и прегърнете Intellij с Source Map
  • Как да намалим огромни JavaScript пакети без усилие