Благодаря jquery для того, чтобы сделать наш пропуск намного проще, Но Возможно, вам не понадобится jQuery на данный момент больше не устарено Но это было полностью устарело.
Я помню время, когда jquery Стал очень популярным WhavaScript Where Where Wherve Assoveryscript, я почти всегда основал учебное пособие JavaScript, покрытый jQuery, это хорошо в то время, но не в наше время.
В чем проблема?
Вы должны перестать использовать jQuery , но почему? Это действительно полезно для меня? Я думал, что вы даже знаете, что устарели и просто используя нативную API JavaScript, это можно сделать.
Но как, если бы я был написан сложное приложение с ним? Или я хочу снова работать с моим старым проектом? Должен ли я переписать с нуля? Если это так, то что вам нужно, просто напишите свой собственный jQuery. К счастью, это может быть действительно простым 😁
Я покажу вам, насколько просто это было, как пример, мы можем сделать jQuery $
Селектор с родным JavaScript API, как это:
const $ = (q) => document.querySelector(q)
Затем попробуйте найти элемент, используя селектор CSS, как то, что мы делаем в jQuery, как $ ('. коробка')
И это отлично работает.
Но если вы можете понять, мы не можем получить все все элементы, если есть более одного .коробка
Класс Div, чтобы исправить это изменить Queryselector
к Queryselectorall
Возврат даст вам список основанных узлов в качестве объекта.
const $ = (q) => document.querySelectorAll(q)
Как насчет функции?
В JQuery у нас много «помощника» функции для манипулирования Дом, мы также можем этого сделать.
Чтобы расширить наш собственный простой код JQuery, нам нужно обернуть его в классе и определить селектор, создавая экземпляр класса с помощью функции.
Давайте перейдем к реальной части Делать свой собственный jquery :
class ownJQ { constructor(q) { const el = document.querySelectorAll(q) el.forEach((node, index) => this[index] = node) this.length = el.length } toggle(className) { for (let i = 0; i < this.length; i ++) { this[i].classList.toggle(className) } return this } }
Затем давайте определим функцию селектора, вы можете свободно выбирать переменную селектора, но для целей сходства, которую я использую $
подписать:
const $ = (q) => new ownJQ(q) // Return result: // ownJQ {0: div.box, 1: div.box, 2: div.box, length: 3}
Теперь наша собственная jQuery готова к использованию, чтобы доказать эту работу, как ожидалось, давайте тестируем наше переключать
Функция, что эта функция делает, это разключить основанный элементы с данным именем класса.
$('.box').toggle('bg-red') // Return result: // ownJQ {0: div.box.bg-red, 1: div.box.bg-red, 2: div.box.bg-red, length: 3}
Это круто, но как это работает?
Я проектирующую API класса как одинаково, поскольку jQuery делает, сначала после того, как мы определили SOTYJQ
Класс, который нам нужно найти весь целевой элемент внутри Конструктор
функция.
constructor(q) { // Find element by query const el = document.querySelectorAll(q) // Push founded node element to class itself // with their index number as key el.forEach((node, index) => this[index] = node) // All elements total this.length = el.length }
Конструктор это встроенная функция класса, которая выполняется при создании экземпляра класса
toggle(className) { // Iterate all element for (let i = 0; i < this.length; i ++) { // Do toggle class to each node this[i].classList.toggle(className) } // Return the class itself, // make it work with chaining function return this }
Надеюсь, это на самом деле так просто, как я уже сказал, и это для бонуса:
// You can try this at home text(v) { let texts = [] for (let i = 0; i < this.length; i++) { v ? this[i].innerText = v : texts.push(this[i].innerText) } return v ? this : texts }
Я думаю, что лучше переписать весь ваш проект, особенно если вы ленивы, как я, как я, но я настоятельно рекомендую вам, переписав ваш старый проект с новыми технологиями, вы можете узнать из нее новых вещей.
Вот пример и исходный код:
Источник: https://repl.it/@bramaMaudi/yurownjquery Демонстрация: https://yourownjquery–bramaudi.repl.co/
Оригинал: “https://dev.to/bramaudi/still-using-jquery-even-if-you-can-create-your-own-if-you-want-5cbg”