|
Руст Кулматов
|
||||||||
|
Так сложилость исторически. Когда я писал первую версию движка, я думал о книге, как о статической странице без пользовательского ввода, на которой с помощью яваскрипта будут происходить только косметические изменения. Для этих изменений мне достаточно было нативных способов взаимодействия с элементами и управления событиями. Ко второй версии меня начала раздражать многословность стандартных методов, и я решил попробовать Джейквери. Например, выберем все элементы с определённым классом, создадим новый элемент при клике на них и позже удалим обработчик клика: |
||||||||
Яваскрипт
const elements = document.querySelectorAll('.element')
// Нужно запомнить обработчик события,
// иначе мы не сможем отключить его позже
let clickHandler = function(element) {
const shinyButton = document.createElement('button')
shinyButton.classList.add('shiny')
shinyButton.innerText = "Кнопка"
this.appendChild(shinyButton)
}
for (let element of elements) {
element.addEventListener('click', clickHandler)
}
// Позже
for (let element of elements) {
element.removeEventListener('click', clickHandler)
}
Джейквери
const elements = $('.element')
elements.on('click', function() {
$(this).append($('<button class="shiny">Кнопка</div>'))
})
// Позже
elements.off('click')
|
Код на Джейквери получился лаконичней и понятней, поэтому мы стали использовать его в движке. Но, к сожалению, для растущего проекта это оказалось ловушкой. Чтобы решить эту проблему, мы постепенно внедряем Реакт, который позволяет нам отделить логику компонент от их внешнего вида. Тем не менее, Джейквери остаётся удобным инструментом для несложных проектов и прототипов. Несмотря на то, что нативный Яваскрипт сейчас позволяет сделать практически всё, что умеет Джейквери, зачастую это многословнее или менее очевидно. По теме: |
||||||||
|
P. S. Это был совет о
|