Посоветуйте как улучшить код для работы с 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> |
Часовой пояс GMT +3, время: 22:03. |