Plugin historie MooTools

Jedním z důvodů, proč tak miluji technologii AJAX, je to, že nám umožňuje vyhnout se zbytečnému načítání stránek. Proč stahovat záhlaví, zápatí a další statická data vícekrát, když se tato konkrétní data nikdy nemění? Je to ztráta času, zpracování a šířky pásma. Bohužel v tomto bodě webu jsou neustálé obnovování normou – ale nemusí. Christoph Pojer, hlavní vývojář MooTools, přidal historii do svých PojerTools Knihovna PowerTools. Historie nahrazuje tradiční načítání adresy URL stejného webu tím, že poskytuje metodu pro zachycení kliknutí na odkaz a načtení obsahu stránky prostřednictvím AJAX (Request.HTML od Mootools třídy), upravte objekt umístění dokumentu tak, aby uchovával záznamy „historie“, a přehodnoťte odkazy na obsah, aby vývojáři mohli vytvořit rychlý a efektivní jednostránkový web.

Tradiční metodou správy dynamické historie/tlačítka zpět byla vždy technologie JavaScript založená na hash. Novější technologie, včetně HTML5 window.onpopstate a history.pushState umožňují spolehlivější metody pro správu historie. Zásuvný modul History MooTools podporuje moderní a starší metody pro správu historie. Dovolte mi, abych vám ukázal, jak rychle implementovat plugin MooTools History.

Struktura HTML

Zásuvný modul Historie nevyžaduje žádné úpravy struktury HTML, ale měl by být identifikován alespoň jeden určený obsah; můžete mít samozřejmě tolik oblastí obsahu, kolik chcete, ale s největší pravděpodobností budete k načtení jejich obsahu potřebovat více požadavků AJAX, pokud nepoužijete Request.JSON žádost o načtení obsahu pro více oblastí stránky. Pro toto jednoduché demo definujeme záhlaví, zápatí a nabídku a oblast obsahu:

<div id="body">
	
	<!-- header -->
	<header>
		<a href="/" data-noxhr>David Walsh Blog</a> 
		<div>MooTools History Plugin Demo</div>
		<div>This is a simple example of the MooTools History plugin created by Christoph Pojer</div>
		
	</header>
		
	<!-- menu -->
	<ul id="demoMenu">
		<li><a href="mootools-history.php">Home</a></li>
		<li><a href="mootools-history-david.php">About David Walsh</a></li>
		<li><a href="mootools-history-mootools.php">About MooTools</a></li>
		<li><a href="mootools-history-christoph">About Christoph Pojer</a></li>
	</ul>
	
	<!-- content area -->
	<article id="contentHolder">
		
		<!-- initial page content goes here -->
		
	</article>
	
	
	<!-- footer -->
	<footer>
	
	</footer>
</div>

Oblast obsahu je jediná oblast, u které se změní obsah. Stránka by se měla načíst jako obvykle

JavaScript MooTools

Za předpokladu, že na stránce byl zahrnut plugin MooTools History, existuje několik funkcí, které by měly být vytvořeny po domready . První je metoda, která provede požadavek na obsah po kliknutí na odkaz:

// Content holder (all content placed within this element)
var contentHolder = document.id("contentHolder");

// Create a Request object which will be reused when links are clicked
var request = new Request.HTML({
	onSuccess: function(nodeTree,elements,html) {
		// Set the content into the content holder
		contentHolder.set("html",html);
		// Execute directions that should be executed whenever a page changes
		onPageUpdate();
	}
});

// Create a function that loads the page content
var loadPage = function(url) {
	// Make a HTML request to get the content for this page
	request.send({ url: url });
};

Dalším krokem je vytvoření metody (což je teoreticky možnost, ale po načtení obsahu obvykle budete chtít něco udělat) který se spustí pokaždé, když je přijat obsah:

// Function that will execute whenever a page gets changed
var onPageUpdate = function() {
	
	// Do whatever you'd like here!  
	
	// Possibly manually record a Google Analytics page view?
	
};

Historie nevyžaduje, abyste při přijetí obsahu něco udělali, ale pravděpodobně budete chtít něco udělat. Proč ručně zaznamenávat zobrazení stránky v rámci Google Analytics?

Tento další díl je důležitý pro přeměnu odkazů na statické stránky na spouštěče historie s AJAXem. Pouze jedno velké volání delegování události Element.Delegation udělá práci nejen pro počáteční načtení stránky, ale pro každé načtení Historie AJAX poté:

// The listener that manages all clicks
var listener = function(evt){
	evt.preventDefault(); // Prevent following the URL
	History.push(this.get('href')); // Push the new URL into History
};

// Add event delegation to add clicks.  Both of these work:
//document.body.addEvent("click:relay(a:not([href=#]):not([href^=http://]):not([data-noxhr]))",listener);
document.body.addEvent("click:relay(a:not([href=#],[href^=http://],[data-noxhr]))",listener);

Když se klikne na jakýkoli nehašovaný odkaz na stejný web, metoda posluchače zastaví událost a vloží novou adresu URL do historie, změní adresní řádek a spraví kliknutí na tlačítko zpět/vpřed.

A back funkce je také vytvořena, abychom mohli poskytnout odkaz "zpět" a "vpřed" pro cestování zpět a vpřed v historii stránky, pokud se rozhodneme ji použít:

// Listener for the "Back" link
var back = function(evt){
	evt.preventDefault();
	History.back(); // Go back
};

// Listener for the "Forward" link
var forward = function(evt){
	evt.preventDefault();
	History.forward(); // Go back
};

// Add to links
document.id("backLink").addEvent("click",back);
document.id("forwardLink").addEvent("click",forward);

Dalším krokem je přidání change událost do samotné historie, aby se spustil náš loadPage funkce při změně adresy URL stránky:

// When the history changes, update the content 
History.addEvent('change',loadPage);

Pokud klient nepodporuje history.pushState způsob, plugin History vyhodnotí hash a načte stránku podle potřeby:

// Handle the initial load of the page if the browser does not support pushState, check if the hash is set
if(!History.hasPushState()) {
	// Check if there is a hash
	var hash = document.location.hash.substr(1);
	if (!hash) return;

	// If the hash equals the current page, don't do anything
	var path = document.location.pathname.split('/');
	path = path[path.length - 1];
	if (hash == path) return;

	// Load the page specified in the hash
	loadPage(hash);
}

Nakonec spusťte onPageUpdate na domready zatížení nebolí, protože události jsou v rámci onPageUpdate přidány pouze jednou :

// Update the page
onPageUpdate();

Nyní je stránka připravena podporovat výměnu obsahu na základě historie a AJAX. Díky onPageUpdate Přidávají se odkazy k událostem, jakmile přicházejí, takže i obsah získaný pomocí AJAX lze spravovat pomocí Historie.

Tipy a strategie pro weby spravované pomocí hash/historie

Pluginy jako mistrovské dílo Christoph's History jsou velmi užitečné při obohacení uživatelského zážitku, ale vyžadují trochu vývojářské logiky:

• Použijte delegování událostí - Pamatujte, že u systému ve stylu historie nemusí být přímé přiřazení událostí k prvkům tím nejlepším řešením, protože tyto prvky mohou být při dalším kliknutí na odkaz pryč. Použití delegování událostí namísto tradičních přiřazení událostí vám může ušetřit spoustu problémů. Pokud nejste obeznámeni s delegováním událostí, přečtěte si můj příspěvek MooTools Element.Delegation.
• Nepředpokládejte podporu JavaScriptu – Mějte na paměti, že klient nemusí podporovat JavaScript. Vyhledávače přidaly podporu JavaScriptu, ale je důležité používat adresy URL, které budou fungovat jak na webu spravovaném historií, tak na webu bez JavaScriptu.
• Použijte detekci AJAX – MooTools poskytuje hlavičku specifickou pro AJAX v rámci třídy Request s názvem HTTP_X_REQUESTED_WITH . Kliknutím sem se dozvíte, jak jej použít k detekci požadavků AJAX. Budete chtít být schopni detekovat AJAX, aby tyto požadavky jednoduše vrátily obsah a ne záhlaví a zápatí (atd.) s ním. Mohli byste napsat skript/regulární výraz na straně klienta k analýze obsahu, ale to je do značné míry neefektivní. Moje ukázka používá PHP k ukládání obsahu stránky do proměnných následovně:
  
  

  // Load pages based on querystring
  $qstring = $_SERVER['QUERY_STRING'];
  if($qstring == 'home' || $qstring == '') {
  	$content.= '<h1>Welcome Home!</h1>';
  	$content.= '<p>History Management via popstate or hashchange. Replaces the URL of the page without a reload and falls back to Hashchange on older browsers.</p><p>This demo page aims to teach you how you can use Christoph Pojer\'s outstanding History widget to load only the content you need, dynamically and reliably.</p>';
  }
  elseif($qstring == 'about-david') {
  	$content.= '<h1>About David Walsh</h1>';
  	$content.= '<p>My name is David Walsh. I\'m a 27 year old Web Developer from Madison, Wisconsin. In the web world, I am:</p>
  	<ul>
  	<li>Founder and Lead Developer for Wynq Web Labs.</li>
  	<li>Software Engineer for SitePen.</li>
  	<li>Core Developer for the MooTools JavaScript framework.</li>
  	<li>Co-Founder of Script & Style, a website aimed at making web developers and designers better.</li>
  	</ul>
  	<p>I don\'t design the websites - I make them work.</p>
  	<p>I am also an admirer of the great <a href="?about-christoph">Christoph Pojer!</a>.</p>';
  }
  // and more....
  // Page not found
  else {
  	$content.= '<h1>Page Not Found</h1>';
  	$content.= '<p>The page you were attempting to find could not be found.</p>';
  }
  
  // If request was via AJAX, push it out.
  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  	echo $content;
  	exit();
  }
  

  Je zřejmé, že váš systém správy obsahu by stahoval obsah z databáze nebo jiných statických souborů, ale rozumíte tomu – načtěte obsah před výstupem jakékoli stránky, vyhledejte AJAX a podle toho obsah vytlačte. Pokud se nejedná o požadavek AJAX, vložte tento obsah do HTML oblasti obsahu pomocí tradičních metod.

Tyto tipy by vás měly dobře připravit na používání systému založeného na historii. Pamatujte, že JavaScript je určen k vylepšení – mějte na paměti, že váš uživatel (nebo robot vyhledávače) nemusí podporovat JavaScript, takže svůj web důkladně otestujte!

Uveďte příklad sakra. Klikněte ze stránky na stránku, použijte tlačítko Zpět, obnovte stránku atd.  Historie je pevná!

Děkujeme Christophu Pojerovi za jeho vynikající plugin historie MooTools. Existuje mnoho pluginů ve stylu historie, ale prohlížeče nebyly tak bohaté na funkce jako nyní. Máte-li nějaké návrhy, tipy nebo zkušenosti, o které se chcete podělit o vytváření webových stránek založených na hash, podělte se o ně.