Внедряване, аналог и адаптиране за "чист" JavaScript и JQuery на функцията JQuery (); и в съседство с
В тази статия ще говоря за най-важната функция на jQuery – jQuery(); .
функция jquery(); се състои от две функции - основна и така наречената покривна. Вие изпълнявате кожата, кожата изпълнява основната функция и връща резултата от нея.
Корицата изглежда така:
Както можете да видите от кода, когато стартираме jQuery(); той изпълнява функцията init със същите параметри от своя прототип. Функцията init е основната.
След това трябва да създадем прототип за нашата функция, в чийто конструктор ще се позоваваме на функцията jQuery.Забележка: В по-старите версии на jQuery параметърът на конструктора не е посочен.
Това е така, защото разработчиците приравниха обекта 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 масив, тъй като в крайна сметка ще получите масив в масив вместо конкатенация.
Но това е доста лесно за коригиране: трябва да преобразувате живия масив в нормален. Това може да стане с помощта на функцията [].slice.call().
Или може да се направи чрез преминаване през всички елементи на живия масив и преместването им вредовен масив.
Втората алтернатива е да преминете през елементите от втория масив и да ги преместите в първия. Същата технология може да се види в стандартната функция jQuery.
Проверете дали контекстният аргумент е обект с параметри. Ако да, тогава записваме всички параметри като аргументи на DOM елементи.
Търсенето на елементи чрез селектор, използвайки тази библиотека, изглежда така:
Преди да изведем елементи от селектора, трябва да проверим контекстния аргумент и да се уверим, че това не е елементът или елементите, в които да търсим елементи от селектора. Няма да описвам всяка стъпка, тъй като обясних всички стъпки в кода.
В jQuery всички тези проверки са заменени от функцията за намиране, .find(); . Така че записът jQuery(селектор, елементи); е съкращение за jQuery(elements).find(селектор);
В момента нашата основна функция изглежда така:
Сега разгледайте второто условие - дали селекторът е DOM елемент. Ако селекторът е DOM елемент, тогава ние просто вмъкваме този елемент в основния масив, който след това извеждаме.
Нека да преминем към третото условие – дали селекторът е масив. Ако е масив, тогава го комбинираме с основния масив, който след това извеждаме. Ще обединим масиви с помощта на горната функция.
Сега относно четвъртото условие - дали селекторът е обект с параметри. Ако селекторът е обект с параметри, тогава, както в случая сDOM елемент, просто добавете обекта към масива и изведете.
Помислете за петото условие - ако селекторът е жив масив. Ако селекторът е жив масив, тогава преместваме елементите от него в основния масив. Действията изглеждат като в случай на масив.
Остава да разгледаме последното условие - дали селекторът е функция. Когато селекторът е функция, тогава jQuery( Function); е съкращение за jQuery(document).ready(функция); .
Когато погледнем източника на jQuery, виждаме, че тази функция е имплементирана там, както следва:
Ако погледнем кода, можем да видим, че той е изграден около две отделни опции за изпълнение на скрипта след зареждане на DOM:
-
Първата опция е да стартирате скрипта през събитието DOMContentLoaded, окачено на документ. Тази опция ще работи, като се започне с IE9+.
Втората опция е чрез използване на събитието readystatechange, окачено на документа и проверка на readyState. Тази опция е по-стара, така че ще работи в IE4+.
Има други начини за стартиране на скрипт, след като DOM е зареден:
-
Един лесен начин е да го преместите в тялото след всички елементи. При тази подредба първо ще се зареди DOM, а след това скриптът.
Тази опция е малко странна. Можете да създадете персонализирана функция и да я извикате чрез скрипт в края на тялото.
Една популярна опция е да настроите тялото на събитие при зареждане.
Ще заменя тази функция с една от алтернативите - събитието readystatechange, за което писах по-горе.
Това е, записахме действия за всички условия и нашата функция е почти готова. Остава да присвоите прототипа на основната функция към параметъра __proto__ на основния масив, така че по-късно да можете да създадете допълнителна функционалностза jQuery обекти. Обектът __proto__ е сравнително нов и започва да работи само с IE11+. Така че ще направим малко запълване наполовина.
Функцията е готова. В крайна сметка ще изглежда така:
Сега можем да използваме функцията както в обикновения jQuery и да пишем нови функции за нейните обекти чрез прототипа.
Hardcore conf в C++. Каним само професионалисти.