Piotr Wittchen | blog

Wzorzec opóźnionego ładowania jest bardzo przydatnym wzorcem, który możemy wykorzystać w sytuacji, gdy chcemy załadować jakieś dane posiadając niepełne informacje lub w sytuacji, gdy chcemy konkretne informacje załadować na żądanie. Ten wzorzec posiada różne wariacje takie, jak chociażby opóźniona inicjalizacja (lazy initialization), wirtualny pośrednik (virtual proxy), uchwyt wartości (value holder), czy widmo (ghost). Zdarzyło mi się wykorzystać ten wzorzec podczas tworzenia aplikacji internetowych.

Autouzupełnianie

Dobrym przykładem wykorzystania tego wzorca jest tzw. autouzupełnianie w formularzach wyszukiwania. Mamy z tym do czynienia na co dzień chociażby w wyszukiwarce Google, gdzie podczas wprowadzania frazy, Google wyświetla nam podpowiedzi. Można tę metodę wykorzystać też w mniejszych projektach, gdzie mamy do dyspozycji sporą bazę danych (tabele w bazie danych), a nie możemy jej załadować w całości w trakcie jednego żądania, gdyż ogranicza nas pamięć operacyjna komputera i prędkość łącza. Poza tym, ten proces trwałby bardzo długo. Autouzupełnianie zostało zaimplementowane w jQuery UI. Przykład jego wykorzystania z użyciem zewnętrznego źródła danych w formacie JSON, można zobaczyć na stronie: http://jqueryui.com/demos/autocomplete/#remote-jsonp . Warto się z nim zapoznać. Wykorzystałem tę metodę podczas podpowiadania nazw portów lotniczych w wyszukiwarce lotów.

Diagram sekwencji opisujący tę operację wygląda następująco:

Opóźnione ładowanie map Google

Napotkałem sytuację, w której musiałem załadować na jednej stronie kilkanaście map Google. Podczas normalnego, synchronicznego ładowania strony, zwykła przeglądarka internetowa w takiej sytuacji po prostu się zawiesi. Warto więc uaktywniać poszczególne mapy w razie potrzeby, tj. na żądanie, aby nie ładować zbyt wielu danych na raz. W praktyce dla każdej z map musimy oddzielnie załadować skrypt API z serwerów Google. Bardzo dobry wpis na ten temat (w języku angielskim) znajduje się na stronie: http://blog.liip.ch/archive/2008/04/22/lazy-load-google-maps.html. Dla własnych potrzeb, stworzyłem modyfikację metody On demand lazy load. W swoim projekcie chciałem załadować listę lotów wygenerowanych przez wyszukiwarkę połączeń lotniczych. Przy każdym locie stworzyłem możliwość wyświetlenia mapy, na której jest zaprezentowany poglądowy plan lotu. Fragment kodu, który stworzyłem w języku JavaScript jest zaprezentowany poniżej (część danych jest generowana w PHP) . Kod jest wyrwany z kontekstu, ale widać w nim ideę, o którą mi chodzi.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	<?php foreach ($loty->route as $travel):?>

		<?php if( ($loty->query->from == $travel->from) && $travel->f_id == 1 ):?>
			function loadMapScript_wylot_<?php echo $travel->id;?>() {
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src = "http://maps.google.com/maps/api/js?sensor=false&async=2&callback=loadMap_wylot_<?php echo $travel->id;?>";
				document.body.appendChild(script);
			}

			function loadMap_wylot_<?php echo $travel->id;?>() {
				var myLatlng = new google.maps.LatLng(30.0, 0.0);
				var myOptions = {
				  zoom: 2,
				  center: myLatlng,
				  mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var map = new google.maps.Map(document.getElementById("Wylot_<?php echo $travel->id;?>"), myOptions);

				<?php if($podrozWylot[$travel->id]):?>
					<?php foreach ($podrozWylot[$travel->id] as $value):?>
						new google.maps.Marker({
						position: new google.maps.LatLng(<?php echo $value->location;?>),
						map: map,
						icon: '<?php echo url::base();?>resources/images/main/google-maps-icon_airport.png',
						title: '<?php echo $value->airport_name.', '.$value->city.', '.$value->country;?>'
						});
					<?php endforeach;?>
				<?php endif;?>

				<?php if($podrozWylot[$travel->id]):?>
					var flightPlanCoordinates = [
												<?php foreach ($podrozWylot[$travel->id] as $value):?>
												 new google.maps.LatLng(<?php echo $value->location;?>),
												 <?php endforeach;?>
												];

					var flightPath = new google.maps.Polyline({
										 path: flightPlanCoordinates,
										 strokeColor: "#f70",
										 strokeOpacity: 1.0,
										 strokeWeight: 2,
										 geodesic: true
									 });

					flightPath.setMap(map);
				<?php endif;?>
			}

			$(document).ready(function() {
				$('#MapClick<?php echo $travel->id;?>_wylot').click(function() {
					if($('#Wylot_<?php echo $travel->id;?>').is(':hidden'))
					{
						$('#Wylot_<?php echo $travel->id;?>').slideDown('fast', function() {
							loadMapScript_wylot_<?php echo $travel->id;?>();
							$('#MapClick<?php echo $travel->id;?>_wylot').text("<?php echo Kohana::lang('includes/body/content/data/wyswietl/loty.schowajmape')?>");
						});
					}
					else
					{
						$('#Wylot_<?php echo $travel->id;?>').slideUp('fast', function() {
							$('#MapClick<?php echo $travel->id;?>_wylot').text("<?php echo Kohana::lang('includes/body/content/data/wyswietl/loty.wyswietlmape')?>");
						});
					}
				});
			});
		<?php endif;?>

	<?php endforeach;?>
</script>

Następnie w kodzie HTML, w pętli mam następujący kod:

<?php
echo '<div id="MapClick'.$travel->id.'_wylot" class="MapClick">wyświetl mapę</div>';
echo '<div id="Wylot_'.$travel->id.'" class="MapArea"></div>';
?>

Po kliknięciu w element z odpowiednim identyfikatorem, we właściwej warstwie, aktywna mapa jest wyświetlana na żądanie.