Автор оригинала: Jérémy Bardon.
Вы когда-нибудь спрашивали себя, как работает каркас?
Когда я обнаружил Angularjs после изучения jquery Много лет назад Angularjs казался мне темной магией.
Тогда вышли Vue.js, и при анализе, как он работает под капотом, мне поощрялось попробовать писать своими Двусторонняя система привязки .
В этой статье я покажу вам, как написать современную структуру JavaScript с пользовательскими атрибутами HTML-элемента, реакционной способности и двойной связывающей.
Как работает реактивность?
Было бы хорошо начать с понимания того, как работает реактивность. Хорошая новость в том, что это просто. На самом деле, когда вы объявляете новый компонент в Vue.js, рамки будут проксифицировать каждое свойство (getbers и citelers), используя Шаблон дизайна прокси Отказ
Таким образом, он сможет обнаружить значение свойства изменений как из кода, так и пользовательских входов.
Как выглядит шаблон дизайна прокси
Идея по образцу прокси – просто перегружать доступ к объекту. Аналогия в реальной жизни может быть доступ к вашему банковскому счету.
Например, вы не можете напрямую получить доступ к балансу вашего банковского счета и изменить значение в соответствии с вашими потребностями. Вам необходимо спросить кого-то, у кого есть это разрешение, в этом случае, ваш банк.
var account = {
balance: 5000
}
// A bank acts like a proxy between your bank account and you
var bank = new Proxy(account, {
get: function (target, prop) {
return 9000000;
}
});
console.log(account.balance); // 5,000 (your real balance)
console.log(bank.balance); // 9,000,000 (the bank is lying)
console.log(bank.currency); // 9,000,000 (the bank is doing anything)В приведенном выше примере при использовании Банк объект для доступа к учетная запись Баланс, функция getter перегружен, и она всегда возвращает 9 000 000 Вместо значения свойства, даже если имущество не существует.
// Overload setter default function
var bank = new Proxy(account, {
set: function (target, prop, value) {
// Always set property value to 0
return Reflect.set(target, prop, 0);
}
});
account.balance = 5800;
console.log(account.balance); // 5,800
bank.balance = 5400;
console.log(account.balance); // 0 (the bank is doing anything)Перегружая Установить Функция, можно манипулировать своим поведением. Вы можете изменить значение, чтобы установить, обновить другое свойство вместо этого или даже ничего не делать вообще.
Пример реактивности
Теперь, когда вы уверены в том, как работает рисунок проекта прокси, давайте начнем написать JavaScript Framework.
Чтобы сохранить это просто, мы имитируем синтаксис Angularjs, чтобы сделать это. Объявление элементов шаблона контроллера и связывания к свойствам контроллера довольно просты.
Сначала определите контроллер со свойствами. Затем используйте этот контроллер в шаблоне. Наконец, используйте NG-Bind атрибут, чтобы включить двойное связывание с значением элемента.
Шаблон анализа и экземпляр контроллера
Чтобы привязать свойства, мы должны получить место (контроллер AKA), чтобы объявить эти свойства. Таким образом, необходимо определить контроллер и представить его в нашу структуру.
Во время декларации контроллера структура будет искать элементы, которые имеют NG-контроллер атрибуты.
Если он подходит с одним из объявленных контроллеров, он создаст новый экземпляр этого контроллера. Этот экземпляр контроллера отвечает только за этот конкретный кусок шаблона.
var controllers = {};
var addController = function (name, constructor) {
// Store controller constructor
controllers[name] = {
factory: constructor,
instances: []
};
// Look for elements using the controller
var element = document.querySelector('[ng-controller=' + name + ']');
if (!element){
return; // No element uses this controller
}
// Create a new instance and save it
var ctrl = new controllers[name].factory;
controllers[name].instances.push(ctrl);
// Look for bindings.....
};
addController('InputController', InputController);Вот что ручной работы Контроллеры Переменная декларация выглядит как. Контроллеры Объект содержит все контроллеры, объявленные в рамках, позвонив AddController Отказ
Для каждого контроллера A фабрика Функция сохраняется для создания нового контроллера при необходимости. В рамках также хранятся каждый из новых экземпляров того же контроллера, используемого в шаблоне.
Ищете привязки
На данный момент у нас есть экземпляр контроллера и кусок шаблона, используя этот экземпляр.
Следующим шагом является поиск элементов с привязками, использующими свойства контроллера.
var bindings = {};
// Note: element is the dom element using the controller
Array.prototype.slice.call(element.querySelectorAll('[ng-bind]'))
.map(function (element) {
var boundValue = element.getAttribute('ng-bind');
if(!bindings[boundValue]) {
bindings[boundValue] = {
boundValue: boundValue,
elements: []
}
}
bindings[boundValue].elements.push(element);
});Довольно просто, он хранит все привязки объекта (используется как хеш-карта ). Эта переменная содержит все свойства для связывания с текущим значением и всеми элементами DOM, которые связывают это свойство.
Двойные свойства контроллера связывания
После того, как предварительную работу было сделано рамками, теперь приходит интересная часть: Двухстороннее Отказ
Он включает в себя связывание свойства контроллера к элементам DOM для обновления DOM всякий раз, когда код обновляет значение свойства.
Кроме того, не забудьте связать элементы DOM к свойству контроллера. Таким образом, когда пользователь меняет входное значение, он обновит свойство контроллера. Тогда он также обновит все остальные элементы, связанные с этим свойством.
Обнаружить обновления из кода с прокси
Как объяснено выше, Vue включает компоненты в прокси, чтобы реагировать на изменения свойства. Давайте сделаем то же самое, просыпая улавливание только для контроллера, связанных с свойствами.
// Note: ctrl is the controller instance
var proxy = new Proxy(ctrl, {
set: function (target, prop, value) {
var bind = bindings[prop];
if(bind) {
// Update each DOM element bound to the property
bind.elements.forEach(function (element) {
element.value = value;
element.setAttribute('value', value);
});
}
return Reflect.set(target, prop, value);
}
});Всякий раз, когда установлено связанное свойство, прокси проверит все элементы, связанные с этим свойством. Тогда он будет обновлять их с новым значением.
В этом примере мы поддерживаем только вход Элементы связывания, потому что только ценность атрибут установлен.
Реагировать на элементы событий
Последнее, что нужно сделать, это реагировать на взаимодействие пользователей. DOM элементы запускают события, когда они обнаруживают изменение значения.
Послушайте эти события и обновите связанное свойство с новым значением из события. Все остальные элементы, связанные с тем же свойством, автоматически обновляются благодаря прокси.
Object.keys(bindings).forEach(function (boundValue) {
var bind = bindings[boundValue];
// Listen elements event and update proxy property
bind.elements.forEach(function (element) {
element.addEventListener('input', function (event) {
proxy[bind.boundValue] = event.target.value; // Also triggers the proxy setter
});
})
});Как только вы поставите все вместе, вы получите двойные входы ручной работы. Вот работающая демо, включая весь код.
Спасибо за чтение. Я надеюсь, что это помогло вам demyStify, как работают JavaScript Frameworks.
Поздравляю! Вы разработали популярные функции, такие как пользовательские атрибуты HTML-элемента, реакционная способность и двойное связывание!
Если вы нашли эту статью полезную, пожалуйста, нажмите на ? Кнопка несколько раз, чтобы сделать других найти статью и показать вашу поддержку! ?
Не забудьте следовать за мной, чтобы получить уведомление о моих предстоящих статьях ?
Проверьте мои другие сообщения
https://www.freecodecamp.org/news/author/jbardon/
➥ Реагировать для начинающих
- Быстрая руководство для изучения реагирования и как работает его виртуальный DOM
- Как привести реактивность в реагирование с состояниями
➥ JavaScript
- Общие ошибки, чтобы избежать во время работы с Vue.js
- Остановите болезненный JavaScript Debug и обнимаются Intellij с исходной картой
- Как уменьшить огромные пакеты JavaScript без усилий
Оригинал: “https://www.freecodecamp.org/news/how-to-improve-your-javascript-skills-by-writing-your-own-web-development-framework-eed2226f190/”