Показать сообщение отдельно
  #1 (permalink)  
Старый 11.01.2014, 23:41
Geo Geo вне форума
Новичок на форуме
Отправить личное сообщение для Geo Посмотреть профиль Найти все сообщения от Geo
 
Регистрация: 11.01.2014
Сообщений: 2

Посоветуйте как улучшить код для работы с history api [ jquery + js + history api ]
Доброго времени суток :)
В функции используется: jQuery и History API JavaScript Library v4.0.9

JavaScript только начинаю изучать, и вот написал функцию для страничной навигации с использованием ajax и History API.

Писал её три дня, где-то 8-10 часов.

Посоветуйте пожалуйста, можно ли все это сделать как-то проще, понятнее для других, логичнее, умнее?
И скажите пожалуйста, за сколько подобную функцию напишет опытный JavaScript-ер?
Заранее спасибо:)
По поводу работы функции, она отправляет простой GET запрос, а в ответ получает готовый html.
Функция:
<script>

$(function () { //выполняется после загрузки всего документа
	
var historyController = function($teasers,$pageLinks) {
	this.type 		= "cat"; 								//alias
	this.on_page	= <?php echo $page->url('per_page'); ?>;//кол-во возвращаемых записей
	this.$teasers	= $teasers;		//$("#main-teaser-collection"); 		//id обновляемого по Ajax контейнера
	this.$pageLinks	= $pageLinks;  //$(".page-links"); 					//id страничной навигации
	this.current_href = '';

	this.historyPush = function( url ){ 					//добавляем в историю url и ajaxUrl
		var ajaxUrl = this.generateAjaxUrl(url);

		history.pushState({url: ajaxUrl}, 'Some_title', url); //с тайтлом ещё не разобрался
	};
	
	this.refreshContainer = function( ajaxUrl ){ //очищает контейнер, записывает новое содержимое
		this.$teasers.empty();
		this.$teasers.addClass("spinner"); //показывает прогресбар
		this.current_href = ajaxUrl;
		
		$.get(ajaxUrl, function ( response ) { 
			if(this.current_href === ajaxUrl) //защита от 2+ кликов сразу вперед (или назад), т.к. без IF-a выведуться сразу 2+ страницы
				this.$teasers.removeClass("spinner").append(response);
		}.bind(this));
	};
	
	this.generateAjaxUrl = function( url ){ //генерирует AjaxUrl для посылки Ajax запроса
	
		var reg = /\/([0-9]+)$/;  //парсит из конца переданного url номер страницы
		var arr = reg.exec(url);
		if(arr === null || arr < 0) arr = [,0]; 

		var offset =  (this.on_page * (arr[1] - 1)); //получает смещение для базы данных

		return "/widgets/mainteasercollection/"+ this.type +"/"+ this.on_page +"/"+ offset +"/<?php echo $page->url('cur_alias'); ?>";
	};//делает ссылку вида /widgets/mainteasercollection/cat/2/8/sport
	
	//то, что выполняется при создании объекта методом "new"
	this.$pageLinks.on("click", "a", { param:this }, function( e ){ //подменяем обработчик click для $(".page-links") 
		e.preventDefault();
		var url 	= $(this).attr('href'); //получаем href ссылки, по которой произошел клик
		var ajaxUrl = e.data.param.generateAjaxUrl( url );

		e.data.param.historyPush( url ); //передаем в историю url
		e.data.param.refreshContainer( ajaxUrl ); //обновляем контейнер тем, что вернется на запрос ajaxUrl
	});
	
	this.historyPush( window.location.href ); //добавляем в историю текущую страницу и ajax запрос для текущей страницы		
}

var hController = new historyController($("#main-teaser-collection"),$(".page-links")); //создаем екземпляр объекта, устанавливаем обработчик и текущую страницу в историю, передаем контейнер с ajax-обновляемым содержимым и контейнер с ссылками страничной навигации

window.addEventListener( "onpopstate", function(e){  //при клике вперед или назад в браузере, из истории береться ajax url и выполняется get запрос
	hController.refreshContainer( history.state.url );
	e.preventDefault(); 	
													   },  true ); // если true, то осущ capture, если false - bubling
						   	
});
</script>
Ответить с цитированием