Deep Linking — част 1

В последните два урока представихме как можем да добавим AJAX презареждане на страници. Показахме и как да кешираме информацията. Естественият ход на развитие на един сайт, а и коментари към уроците, предполагат да добавим и deep linking.

Какво е deep linking?

Отворете страниците от предния път: https://magadanski.com/demo/ajax-requests/. Разцъкайте навигацията. Нещо прави ли ви впечатление? Макар и съдържанието да се променя, адресът на страницата остава все един и същ. Това е проблем когато искаме да дадем link за точно определена страница.

Deep linking е възможността да представяме различни състояния на един и същ URL. Използва се когато дадена страница променя съдържанието си посредством JavaScript. Използвайки JS можем (и дори трябва) да обработим допълнително подадена информация в URL-а на страницата. Така показваме същото това състояние, до което човек е достигнал, кликвайки на бутон или нещо друго.

Deep linking може да се наложи при lightbox-ове, табове, акордеони, цели страници заредени с AJAX (както е в нашия случай) и др. Тъй като за момента при нас е налице единствено зареждане на ново съдържание с AJAX ще се погрижим за този случай. В последствие ще добавим и останалите елементи, за да видим как най-добре можем да ги съчетаем.

Техники за deep linking

Съществуват различни методи за подаване на допълнителна информация към script-овете на страницата през URL. Най-често се срещат стандартни GET аргументи. Те могат лесно да се използват и от сървъра, в случай че страницата ни се генерира от някакъв server-side script. Друг метод е чрез URL hash-ове.

URL GET аргументи

Това са незадължителни двойки ключ-стойност, които се изреждат след основната част на URL-а. След ключа се изписва знак за равенство, а след това е самата стойност. Преди да се подадат към URL-а се добавя “?” за да ги отдели. Двойките ключ-стойност се отделят с амперсанд (&). Пример:

http://example.com/?arg1=val1&arg2=val2

URL hash

След GET аргументите в един URL идва ред на (отново незадължителен) URL hash. Отделя се чрез диез (#). Стойността на hash-а се третира като една цяла стойност. Може да се достъпи в JavaScript използвайки window.location.hash. Най-често се очаква, че това е просто една единствена стойност, която трябва да се обработи по определен начин. Можем да добавим знаци, по които да отделим параметри от hash-а. Така когато ги обработим по правилен начин можем да представим по-богата информация.

Трябва да се отбележи, че в IE 7/8 съществува бъг, който в някои случаи би довел до презареждане на страницата при задаване на нова стойност за hash-а на URL-а.

history.pushState

HTML5 hostory API-то на JavaScript дава възможност изцяло да променим адреса, който браузъра показва без да презареждаме страницата. Още по-хубавата част е, че новият адрес просто се добавя в историята на браузъра. Така лесно можем да цъкнем на back (а после и на forward) бутона на браузъра и ще идем до правилния URL. В нашия случай това е най-доброто решение, защото можем просто да зададем новия адрес.

Най-големият минус тук е, че по този начин губим поддръжка за стари браузъри (IE 7/8/9).

jQuery Address

За наш огромен късмет, не сме първите, които биха искали да добавят deep linking в сайта си. Даже мнозинстото искат тази функционалност. Благодарение на това съществуват различни JS библиотеки, които да ни улеснят като се грижат за проблеми в различните браузъри. jQuery Adress ни дава и възможност да използваме history.pushState като основен метод за работа. С минимални усилия можем да добавим и поддръжка за IE 7/8 чрез hash-ове.

Защо точно jQuery Address

Поради няколко причини:

1. Защото това е jQuery plugin, а ние работим с jQuery
2. Защото е разработен от същия човек, който на времето е направил SWF Address.

Какво е SWF Address?

Това е най-старата (известна на мене) JavaScript библиотека, която се използваше за подобна функционалност. Датира доста преди HTML5 и HTML web приложенията. Името може би ви подсказва, че тази библиотека даваше възможност за комуникация със SWF файлове (flash). Така че SWF Address беше единственият начин Flash web приложенията да дават връзки към различните си състояния.

Да отдадем почит на човека разработил SWF Address и jQuery Address — Ростислав Христов (да — българин е)!

Добавяне на deep linking функционалност

Ще работим с файловете от урока AJAX заявки (без кеширането). Защо без кеширане? Защото кеширането не е задължителен елемент. Макар и да е опростено допринася някаква слъжност към кода. В случая се опитваме да поддържаме всичко максимално просто. Така ще имате възможност да се упражните и самички и да добавите deep linking към версията с кеширане.

Ето и архив на файловете, с които ще започнем работа.

Като за начало, нека изтеглим jQuery Address JS plugin-а. Можете да направите това от официалната страница: http://www.asual.com/jquery/address/.

Можете да работите и с dev версията. Това е най-новата версия. Толкова нова, че е още в процес на разработка и е възможно да се окаже, че има bug-ове. Даже докато писах урока опитах и с нея, но резултатът не беше толкова добър, колкото със стабилната версия 1.5.

Dev версията може да се вземе от GitHub (папка src).

След като вече сме изтеглили jQuery Address (аз го записах в js/jquery-address) трябва да го добавим в страниците си:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>AJAX Requests</title>
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic-ext,cyrillic" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery-address/jquery.address-1.5.js"></script>
	<script type="text/javascript" src="js/func.js"></script>
</head>

Не забравяйте, че това трябва да е налице във всички страници (index.html, slider.html, accordion.html, tabs.html).

Интегриране на jQuery Address

Сега вече можем да започнем работа и по същинската интеграция на jQuery Address.

Като за начало нека инициализираме jQuery Address за линковете от основната навигация. Нека закоментираме останалия ни код, тъй като ще трябва да бъде модифициран леко.

jQuery(function ($) {
	$.address.init(function () {
		$('nav a').address();
	})
	
	// $(document).on('click', 'nav a', function (e) {
	// 	e.preventDefault();
	// 	
	// 	$.get($(this).attr('href'), function (data, status, XHR) {
	// 		if (status == 'success') {
	// 			$('section[role="e;main"e;]').html($(data).find('section[role="e;main"e;]').html());
	// 			$('title').html($(data).filter('title').html());
	// 			$('header').html($(data).find('header').html());
	// 		} else {
	// 			// tell the user we could not connect to the server
	// 		}
	// 	});
	// });
});

Ако тестваме резултата сега, ще видим, че jQuery Address използва hash-ове, за да обозначи на коя страница сме. За момента съдържанието от новите страници, обаче не се зарежда. Ще стигнем и до там.

$.address.change

jQuery(function ($) {
	$.address.init(function () {
		$('nav a').address();
	});
	
	$.address.change(function (e) {
	});
});

Добавяме address.change event handler, който ще зарежда информацията, когато адресът на браузъра се промени.

jQuery(function ($) {
	var root = '/tutorials/deep-linking';
	
	$.address.init(function () {
		$('nav a').address();
	});
	
	$.address.change(function (e) {
		$.get(root + $.address.value(), function (data, status) {
			if (status == 'success') {
				// handle loaded data
			} else {
				// tell the user we could not connect to the server
			}
		});
	});
});

Добавили сме променливата root, в която ще съхраняваме root URL-а на сайта. В случай, че сайтът ни се намира в основата на домейна — тогава няма да имаме нужда от тази променлива. Но тъй като аз работя в папка “tutorials/deep-linking” е нужно да използвам такава променлива. Тя ми помага при правилното построяване на адресите, от които да зареждам съдържание.

Остава само да обработим по правилен начин заредената информация:

$.address.change(function (e) {
	$.get(root + $.address.value(), function (data, status, XHR) {
		if (status == 'success') {
			$('section[role="main"]').html($(data).find('section[role="main"]').html());
			
			$('title').html($(data).filter('title').html());
			$('header').html($(data).find('header').html());
		} else {
			// tell the user we could not connect to the server
		}
	});
});

До тук всичко върви на Chrome, Firefox, Safari, Opera, Internet Explorer 10, 9 и 8. Ами IE7? Оказа се, че начина, по който jQuery Address добавя hash за IE7 е като включва пълен адрес, а не само на компонента от връзката, която сме добавили. Този проблем има 4 решения:

1. Да променим връзките, така че да са абсолютни, а не релативни
2. Да променим връзките, така че да са релативни, но според site root
3. Да добавим няколко реда JS, в който да правим проверка за IE7 и в такъв случай да прескочим конкатенирането с променливата root
4. Да drop-им support за IE7

Аз лично предпочитам последния вариант. Пазарният дял на IE7 е под 2%. Освен това IE7 е четвъртата версия на IE от най-новата назад. Google официално поддържат само последните 2 major версии на всички браузъри. Значи официално не поддържат дори IE8.

Какво стана с history.pushState()?

Този урок стана вече твърде дълъг, така че това ще го оставим за следващия път. Тогава ще добавя и demo на целия урок.

Ако съм в добро настроение даже може да оправим и IE7.