There is code that uses jq. I would not like to load the library, just because of a few lines of code. Help convert the code to pure js.

$('document').ready(function(){ $('.historyAPI').on('click', function(e){ // отменяем стандартное действие при клике e.preventDefault(); // Получаем адрес страницы var href = $(this).attr('href'); // Передаем адрес страницы в функцию getContent(href, true); }); }); // Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед в браузере window.addEventListener("popstate", function(e) { // Передаем текущий URL getContent(location.pathname, false); }); // Функция загрузки контента function getContent(url, addEntry) { $.get(url).done(function(data) { // Обновление только текстового содержимого в блоке $('#content').html($(data).find("#content").html()); $('#content2').html($(data).find("#content2").html()); // Если был выполнен клик в меню - добавляем запись в стек истории сеанса // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо if(addEntry == true) { // Добавляем запись в историю, используя pushState history.pushState(null, null, url); } }); }

So far it turned out like this:

 document.addEventListener('DOMContentLoaded',function(){ [].forEach.call( document.getElementsByClassName('historyAPI'), function(e) { // отменяем стандартное действие при клике e.preventDefault(); // Получаем адрес страницы var href = $(this).attr('href'); // Передаем адрес страницы в функцию getContent(href, true); }); // Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед в браузере window.addEventListener("popstate", function(e) { // Передаем текущий URL getContent(location.pathname, false); }); // Функция загрузки контента function getContent(url, addEntry) { $.get(url).done(function(data) { // Обновление только текстового содержимого в сером блоке $('#content').html($(data).find("#content").html()); $('#content2').html($(data).find("#content2").html()); // Если был выполнен клик в меню - добавляем запись в стек истории сеанса // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо if(addEntry == true) { // Добавляем запись в историю, используя pushState history.pushState(null, null, url); } }); }
  • on native js even more code can come out than with the library. + jQ helps in development (it's easier to write with). I do not advise him to change. jQ does not occupy much space, considering that it is itself written in native js. What you write yourself is already compactly written for you. - Tsyklop
  • I understand it. Just in this particular case, I would like to look at the speed of loading and drawing. Removing the library, reduce the time by 100ms, This is 25% of the full page load. Without a library - 300, with it - 400ms. - Rinat Audi
  • in this case, the library will be loaded once and stored in the browser's cache and loaded and, accordingly, the load will not be as such. - Tsyklop
  • Here about the first loading also there is a speech. - Rinat Audi
  • You can try to build your version of the library, including in it only you need modules. I already had fun : a chore, but it works. All you need is a browserify or webpack of some kind to collect the files you selected into one. - Pavel Mayorov

2 answers 2

 $('.historyAPI').on('click', function(e){

It’s better to replace all this with a click ascent processing:

 document.addEventListener('click', function (e) { var a = e.target.closest("a.historyAPI"); a && getContent(a.href, true); }); 
 $.get(url).done(function(data) { // Обновление только текстового содержимого в сером блоке $('#content').html($(data).find("#content").html()); $('#content2').html($(data).find("#content2").html());

Something like this:

 fetch("url").then(function (resp) { return resp.text(); }).then(function (data) { var doc = (new DOMParser).parseFromString(data, "text/html"); for (var id of ["content", "content2"]) { var dest = document.getElementById(id); var elem = doc.getElementById(id); if (elem) { dest.parentElement.replaceChild(elem, dest); } else { dest.textContent = ""; } }
  • Thank. Something with these lines does not work code. [] .forEach.call (document.querySelectorAll ('. historyAPI'), function (e) {and fetch ("url") ... - Rinat Audi
  • @ RinatAudi, where does not work? Does chrome work? Rewrite ES5 and plug in polifila for arrays, as well as pormis and fetch. - Qwertiy ♦
  • In chrome just does not work. - Rinat Audi
  • Or do not bother and leave as is? Just a whole library is loaded in just two lines of code. More it on the site does not appear anywhere. - Rinat Audi
  • Strange, it should work. What specifically does not work? - Qwertiy ♦
  1. $() - in the context of receiving an array of elements and .find() can be replaced by querySelectorAll() ;
  2. attr() - changes to attributes ;
  3. $.get - on fetch() (link in English);

Naturally it will only work if you are targeting relatively new browsers.

  • $(data) - here parsing html markup - Qwertiy ♦
  • @Qwertiy Did not see this context - tutankhamun