Доброго времени суток :)
В функции используется: 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>