Реалізація, аналог та адаптація для «чистого» JavaScript а JQuery функції JQuery(); та прилеглі до

У цій статті я розповім про найголовнішу функцію jQuery - jQuery (); .

функція JQuery(); складається з двох функцій - основної та так званої обкладинки. Ви запускаєте обкладинку, обкладинка запускає основну функцію та повертає з неї результат.

Обкладинка виглядає так:

Як видно з коду, коли ми запускаємо функцію jQuery(); вона запускає функцію init з тими самими параметрами зі свого прототипу. Саме функція init є основною.

Далі нам слід створити прототип для нашої функції, у конструкторі якої ми посилатимемося на функцію jQuery.Нотатка: у старих версіях jQuery параметр constructor не вказується.

Справа в тому, що розробники прирівняли об'єкт jQuery.prototype і jQuery.fn , тим самим задавши для двох параметрів один об'єкт, щоб мати можливість коротше додавати нові функції для об'єктів.

Тепер почнемо створювати основну функцію. Я не розписуватиму повну структуру функції, т.к. це займе у мене щонайменше тиждень, а напишу як реалізується більш короткий варіант за прикладом jQuery.

У jQuery вся функція складається з умов, які перебирають дані, отримані функцією, і масиву, в який скидаються потрібні елементи.

Початковий вигляд функції виглядає так:

Розглянемо першу умову - якщо селектор є рядком. Якщо це рядок, нам слід перевірити: це селектор чи HTML код (адже jQuery в такий спосіб може парсить HTML код).

У jQuery для перевірки, чи є перший аргумент HTML кодом, використовується регулярне вираз перевірка першого, останнього символів та загальна кількість символів, яка має бути більшою або дорівнює трьом.

Якщо перший аргумент є HTML кодом, то відбуваються такі дії:

    За допомогоюСпеціальних функцій, що псується HTML код і живий масив, який повернула функція парсингу, поєднується з основним масивом.

На жаль, не розповім про те, як реалізована ця функція, т.к. у неї дуже багато відгалужень, про які можна писати окрему статтю. Але ви не турбуйтеся, про те, як працює ця функція, вже написали. Ви можете прочитати цю статтю, перейшовши за наступним посиланням: habrahabr.ru/post/164533

Я розповім вам про альтернативні функції, за допомогою яких можна реалізувати даний функціонал.

    Перша альтернатива - створимо елемент, в який за допомогою innerHTML внесемо наш рядок з кодом і заберемо готові DOM елементи.

Друга альтернатива - розпарити за допомогою функції DOMParser(); та її додаткової функції parseFromString(); .

Третя альтернатива - розпарити за допомогою функції document.implementation.createHTMLDocument(); .

Але нам потрібна функція, яка повторить весь функціонал jQuery функції. Тому ми створимо одну функцію, яка включає всі три перелічені варіанти:

Якщо ми заглянемо у вихідні дані jQuery, то побачимо, що у них дана функція реалізується таким чином:

Альтернатив функції jQuery.merge() має декілька:

    Першою альтернативою є функція Array.concat(); яка об'єднує масиви.

Але ця функція не підійде, якщо ви хочете приєднати до масиву HTML колекцію або список Node, тому що у вас виведеться масив у масиві замість об'єднання.

Але це досить легко виправити: потрібно перетворити живий масив на звичайний. Це можна зробити за допомогою функції [] slice.call() .

Або це можна зробити перебравши всі елементи живого масиву і перемістивши їх вТрадиційний масив.

Друга альтернатива — перебрати елементи другого масиву та перенести їх у перший. Цю ж технологію можна спостерігати у стандартній функції jQuery.

Перевіряємо, чи є аргумент context об'єктом із параметрами. Якщо так, записуємо всі параметри аргументами в DOM елементи.

  • Виводимо готовий масив із елементами
    • Якщо перший аргумент не є HTML код, значить він є селектором. У jQuery елементи по селектору шукаються за допомогою іншої бібліотеки, що називається Sizzle. Перевага цієї бібліотеки в тому, що її пошук по селектору починає працювати з IE7+.

    Пошук елементів по селектору за допомогою цієї бібліотеки виглядає наступним чином:

    Перш ніж виводити елементи по селектору, нам потрібно перевірити аргумент context і переконатись, що він не є елементом або елементами, в яких потрібно шукати елементи по селектору. Я не розписуватиму кожен крок, тому що в коді пояснив усі кроки.

    У jQuery всі ці перевірки замінені функцією пошуку - .find(); . Тому запис jQuery (selector, elements); є скороченою функцією jQuery (elements). find (selector);

    Зараз наша основна функція виглядає так:

    Тепер розглянемо другу умову - якщо селектор є елементом DOM. Якщо селектор є DOM елементом, ми просто вставляємо цей елемент основний масив, який потім виводимо.

    Перейдемо до третьої умови - якщо селектор є масивом. Якщо це масив, ми об'єднуємо його з основним масивом, який потім виводимо. Об'єднувати масиви ми за допомогою вищенаписаної функції.

    Тепер про четверту умову - якщо селектор є об'єктом з параметрами. Якщо селектор є об'єктом із параметрами, то як і у варіанті зDOM елементом просто вносимо об'єкт у масив і виводимо.

    Розглянемо п'яте умови - якщо селектор є живим масивом. Якщо селектор є живим масивом, ми переносимо елементи з нього в основний масив. Дії виглядають, як і у випадку з масивом.

    Залишилося розглянути останню умову - якщо селектор є функцією. Коли селектор – функцією, то функція jQuery (Function); є скороченою функцією jQuery (document). ready (Function); .

    Коли ми подивимося на вихідні jQuery, то побачимо, що там ця функція реалізується так:

    Якщо ми розглянемо код, побачимо, що він побудований на двох окремих варіантах запуску скрипта після завантаження DOM:

      Перший варіант - запуск скрипта через подію DOMContentLoaded повішеного на document. Цей варіант буде працювати з IE9+.

    Другий варіант - за допомогою події readystatechange повішеного на документі і перевіркою readyState . Цей варіант більш старий, тому він буде працювати з IE4+.

    Є інші способи запуску скрипта після завантаження DOM:

      Один із простих способів ― перенести до body після всіх елементів. За такого розташування спочатку завантажиться DOM, а потім скрипт.

    Цей варіант трохи дивний. Можна створити особливу функцію та викликати її через скрипт у кінці body.

    Один з найпопулярніших варіантів - встановити для body подію onload.

    Цю функцію я заміню однією з альтернатив - подією readystatechange, про яку писав вище.

    Все, ми записали дії всім умов і наша функція практично готова. Залишилося до параметра __proto__ основного масиву присвоїти прототип головної функції, щоб потім можна було створювати додатковий функціоналдля jQuery об'єктів. Об'єкт __proto__ є досить новим і починає працювати тільки з IE11+. Тому ми зробимо якийсь півфіл.

    Функція готова. Зрештою вона виглядатиме так:

    Тепер ми можемо використовувати функцію як у звичайному jQuery і писати для його об'єктів нові функції через прототип.

    Хардкорна конфа за С++. Ми запрошуємо лише профі.