Добавяне на jQuery чрез Google Hosted Libraries 4
Сподели урока
В този урок ще ти покажа втория метод за добавяне на jQuery, а именно, чрез линкване (свързване) с онлайн файл. За да постигнем целта си, по мое лично предпочитание, ще използваме популярната услуга Google Hosted Libraries.
В урока “Въведение в jQuery” споменах, че има 2 начина за добавяне на jQuery към уеб страница:
- чрез локално копие на jQuery, което може да бъде свалено от официалния им сайт; или
- чрез добавяне на линк към една от онлайн версиите на jQuery, които са разположени на различни сървъри намиращи се в близост до посетителя. Това е т.нар. “Мрежа за дистрибутиране на съдържание” или Content Delivery Network (CDN) услуга.
Накратко казано, CDN представлява мрежа от сървъри разположени на различни места по света. Когато посетителя отвори дадена уеб страницата, статичните ресурси (като изображения, jQuery, CSS файлове и т.н.) ще бъдат “свалени” от най-близкият възможен сървър. Най-голямата полза от това е, че страницата ще зарежда по-бързо.
Аз лично използвам този метод в онлайн версията на сайта си. Това ми дава няколко предимства, за които ще спомена по-долу.
В урока “Въведение в jQuery” можеш да прочетеш плюсовете и минусите на първия метод – Добавяне на jQuery чрез локален файл.
Използване на онлайн версия на jQuery доставена чрез Google Hosted Libraries
Google Hosted Libraries служи като “дом” на най-популярните JavaScript библиотеки като jQuery, MooTools и други. Тази услуга е предоставена от Google и според мен е доста сигурна и надеждна. Това е една от главните причини да я използвам (и препоръчвам).
Някои от предимствата на този метод са:
- Кеширане. Това е може би най-голямото предимство. Много други уеб сайтове също използват Google Hosted Libraries, което значи, че браузъра вече разполага с jQuery файла в кеша (паметта) си и няма нужда да го свалят повторно.
- Не изразходваш от месечния си трафик.
- Съкращава времето на зареждане. Тъй като се предполага, че сървъра е в близост до посетителя, зареждането на файла в повечето случаи е по-бързо, отколкото ако същият файл се намира на отдалечен сървър някъде по света.
Някои от недостатъците на този метод са:
- Нямаш контрол върху разположението и управлението на файла. Ако утре Google решат да изтрият файла или да променят пътя до него, ти трябва да се съобразиш с това тяхно “желание”.
- Нужда от постоянна връзка с Интернет. Това се отнася единствено за времето, през което работиш по сайта си. Да речем, че си вкъщи и изведнъж Интернета ти спира. Ако не разполагаш с локален jQuery файл, а разчиташ изцяло на онлайн версията, ще бъдеш доста неприятно изненадан. Първо, защото нямаш Интернет и второ, защото нямаш връзка с jQuery файла. Точно затова е добра идея при разработването на уеб сайта си да използваш локално копие на jQuery.
След като вече знаеш плюсовете и минусите на двата метода, ти реши кой ще избереш. Според мен няма грешен избор. Всичко е въпрос на практика и навик.
Добавяне на jQuery към уеб сайт чрез Google Hosted Libraries
Както казах, аз използвам Google Hosted Libraries за oнлайн достъп до jQuery. В следващите няколко стъпки ще ти покажа как ти също можеш да се възползваш от тази услуга.
Стъпка 1
Влез в страницата на Google Hosted Libraries. Там можеш да прочетеш повече за услугата, в случай че имаш желание.
Стъпка 2
Намери jQuery в списъка с налични JavaScript библиотеки и кликни върху линка. Ще се отвори нова страница, която ще те отведе директно в раздела на jQuery. Копирай зеления текст, който се намира срещу snippet:. В настоящия момент последната версия на jQuery е 1.8.2. Може би по времето, когато четеш този урок версията ще бъде различна. Не се притеснявай, просто копирай текста срещу snippet. Така ще бъдеш сигурен/-а, че разполагаш с най-новото копие на jQuery.
Стъпка 3
След като копираш този ред по-горе, отвори HTML документа, в който ще използваш jQuery и го постави в <head>. Кода изглежда ето така:
<head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head>
Стъпка 4
Тук има един трик, който искам да ти покажа.
Горният код ще работи перфектно, но единствено след като качиш сайта си онлайн. За да работи офлайн (т.е. на компютъра ти), трябва да добавиш вида протокол, който браузъра ще използва, за да се “свърже” с файла. Без да те обърквам допълнително, горният код трябва да стане така:
<head>
Преди
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
След
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
Разликата е в допълнителното http:, което поставих в началото на src стойността. Тази малка добавка ще позволи на браузъра ти да се свърже с файла, дори когато работиш по сайта от компютъра си.
Естествено, когато качиш сайта си онлайн, вече няма да имаш нужда от това и можеш спокойно да го премахнеш.
Стъпка 5
След като вече се “свърза” с jQuery е време да тестваш. За да провериш дали jQuery е добавен успешно, отново в <head>, веднага след кода, който постави по-горе, добави следното:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('jQuery е добавен успешно!');
});
<script>
Кратко обяснение на кода:
- $ - Долара има специално значение в jQuery. По подразбиране jQuery използва “$” като заместител на думата “jQuery” т.е. $(document) е напълно еднакво с jQuery(document). Разликата както виждаш е в размера. Първото е съкратен вариант, който се помни по-лесно и е по-лесен за изписване.
- Стойността в скобите () е селектор т.е. $(document) ще върне jQuery обект представляващ HTML документа. Върху този обект по-късно ще изпълним някакви действия.
- document – е специална (ключова) дума в JavaScript, която представлява HTML документа. Надявам се, че в някой от бъдещите уроци свързани с JavaScript ще успея да ти дам малко повече информация за това.
- .ready() – метод, който се изпълнява, когато HTML документа е заредил напълно и DOM структурата е готова. Този метод приема един параметър, който най-често е анонимна функция.
- function(){ } – анонимна функция, която се извиква от ready() веднага след като страницата зареди.
- Комбинирайки всичко, това значи че:
$(document).ready(function(){ // допълнителен код тук });е специален jQuery израз, който изчаква пълното зареждане на HTML документа, преди да предприеме каквито и да било допълнителни действия. Запомни го добре, защото ще го използваш страшно много.
- alert() - Ако имаш опит с JavaScript, това трябва да ти е познато. Чрез alert() можеш да изпращаш кратки съобщения до посетителя под формата на изкачащи прозорчета. Аз лично ти препоръчвам да избягваш alert() в онлайн версията на сайта ти, защото може да бъде доста дразнещо.
Надявам се, че това кратко обяснение на кода ти е ясно. Ако имаш допълнителни въпроси, задай ги в коментарите след урока.
Стъпка 6
Запази настоящия код и отвори страницата в браузър. Ако всичко до тук е успешно, трябва да видиш прозорец с текст “jQuery е добавен успешно!”
Заключение
В този урок научи как да използваш Google Hosted Libraries за достъп до последната версия на jQuery. Файла е разположен на сървърите на Google, което ще ти спести трафик и място. Освен това, поради множеството други сайтове, които използват тази услуга, може би този файл е вече “кеширан” от браузъра на посетителите на твоя сайт. Това ще намали времето за зареждане на страницата.
Какво мислиш за урока? Помогна ли ти да научиш нещо ново? Би ли използвал/-а този метод за добавяне на jQuery в твоя сайт? Ще се радвам, ако споделиш мнението си в коментарите след урока.
Полезни линкове
Страхотни видео уроци по jQuery за напълно начинаещи от Иван Ванков.
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
http://code.jquery.com/jquery-latest.min.js - Това може да е полезно, но не знам дали се запазват предимствата от google хранилищата.
2
Здравей :) Благодаря за линка. Доста е полезен всъщност, защото по този начин човек винаги ще разполага с последната версия на jQuery.
Доколкото знам, jQuery използват CDN на Media Temple, което общо взето дава същите предимства като Google Hosted Libraries :)
3
Зареждането на jQuery от хранилището на Гугъл или което и да е друго хранилище създава един проблем. Когато сайтът ти е оптимизиран да работи с конкретна версия на jQuery, защото използва например $.browser свойството, и след това от една версия нататък това свойство бъде премахнато - излиза грешка в JavaScript и всичко отива подяволите.
Затова не съветвам никого да зарежда jQuery по този начин. Най-добре си свалете една конкретна версия и си я хоствайте където държите всички файлове на сайта.
4
@TNT: Благодаря ти за съвета! Звучи наистина логично. Това е едно от големите предимства при използването на локален jQuery файл.