Ruby on Rails
Turboliny
Szukaj…
Wprowadzenie
Turbolinks to biblioteka javascript, która przyspiesza nawigację po aplikacji internetowej. Gdy podążysz za linkiem, Turbolinks automatycznie pobiera stronę, zamienia ją w <body> i scala jej <head>, wszystko bez ponoszenia kosztów pełnego ładowania strony.
Uwagi
Jako programista szyn prawdopodobnie będziesz minimalnie wchodził w interakcje z turbolinkami podczas projektowania. Jest to jednak ważna biblioteka, z którą należy się zapoznać, ponieważ może być przyczyną trudnych do znalezienia błędów.
Najważniejsze dania na wynos:
-
turbolinks:loadzturbolinks:loadzdarzenie zamiast zdarzeniadocument.ready - Użyj atrybutu
data-turbolinks-falseaby wyłączyć funkcję turbolink dla poszczególnych łączy. - Użyj atrybutu
data-turbolinks-permanentabydata-turbolinks-permanentelementy podczas ładowania strony i uniknąć błędów związanych z pamięcią podręczną.
Aby uzyskać bardziej dogłębne leczenie turbolink, odwiedź oficjalne repozytorium github .
Podziękowania dla dużej części tej dokumentacji należą się ludziom, którzy opracowali dokumentację turbolinks w repozytorium github.
Powiązanie z turbolinkową koncepcją ładowania strony
W turbolinkach tradycyjne podejście do używania:
$(document).ready(function() {
// awesome code
});
nie zadziała. Podczas korzystania z turbolinków zdarzenie $(document).ready() zostanie uruchomione tylko raz: podczas ładowania strony początkowej. Od tego momentu, za każdym razem, gdy użytkownik kliknie link w Twojej witrynie, turbolinki przechwytują zdarzenie kliknięcia linku i wysyłają żądanie ajax w celu zastąpienia tagu <body> i scalenia tagów <head>. Cały proces wywołuje pojęcie „wizyty” w turbolinkach. Dlatego zamiast używać tradycyjnej składni document.ready() powyżej, będziesz musiał powiązać zdarzenie wizyty turbolinka w następujący sposób:
// pure js
document.addEventListener("turbolinks:load", function() {
// awesome code
});
// jQuery
$(document).on('turbolinks:load', function() {
// your code
});
Wyłącz turbolinki na określonych linkach
Bardzo łatwo można wyłączyć turbolinki na określonych linkach. Według oficjalnej dokumentacji turbolink :
Turbolinki można wyłączyć dla poszczególnych linków, dodając adnotacje do linku lub dowolnego z jego przodków, używając turbolink danych = „false”.
Przykłady:
// disables turbolinks for this one link
<a href="/" data-turbolinks="false">Disabled</a>
// disables turbolinks for all links nested within the div tag
<div data-turbolinks="false">
<a href="/">I'm disabled</a>
<a href="/">I'm also disabled</a>
</div>
// re-enable specific link when ancestor has disabled turbolinks
<div data-turbolinks="false">
<a href="/">I'm disabled</a>
<a href="/" data-turbolinks="true">I'm re-enabled</a>
</div>
Zrozumienie wizyt aplikacji
Wizyty aplikacji są inicjowane przez kliknięcie łącza obsługującego Turbolinks lub programowo przez telefon
Turbolinks.visit(location)
Domyślnie funkcja wizyty korzysta z akcji „z wyprzedzeniem”. Co bardziej zrozumiałe, domyślnym zachowaniem funkcji wizyty jest przejście do strony wskazanej przez parametr „lokalizacja”. Za każdym razem, gdy strona jest odwiedzana, turbolinks wypycha nowy wpis do historii przeglądarki za pomocą history.pushState . Historia jest ważna, ponieważ turbolinki spróbują użyć historii do załadowania stron z pamięci podręcznej, gdy tylko jest to możliwe. Pozwala to na bardzo szybkie renderowanie stron często odwiedzanych stron.
Jeśli jednak chcesz odwiedzić lokalizację bez zapisywania historii na stosie, możesz użyć akcji „zamień” w funkcji wizyty w następujący sposób:
// using links
<a href="/edit" data-turbolinks-action="replace">Edit</a>
// programatically
Turbolinks.visit("/edit", { action: "replace" })
Spowoduje to zastąpienie górnej części stosu historii nową stroną, dzięki czemu całkowita liczba elementów na stosie pozostanie niezmieniona.
Istnieje również akcja „przywracania”, która pomaga w przywracaniu widoków , odwiedzin, które następują w wyniku kliknięcia przez użytkownika przycisku przewijania w przód lub wstecz w przeglądarce. Turbolinks obsługuje te typy zdarzeń wewnętrznie i odradza użytkownikom ręczne modyfikowanie domyślnego zachowania.
Anulowanie wizyt przed ich rozpoczęciem
Turbolinks zapewnia detektor zdarzeń, którego można użyć do zatrzymania odwiedzin. Słuchaj turbolinks:before-visit zdarzenie turbolinks:before-visit zostanie powiadomione, gdy wizyta ma się rozpocząć.
W module obsługi zdarzeń możesz użyć:
// pure javascript
event.data.url
lub
// jQuery
$event.originalEvent.data.url
aby pobrać lokalizację wizyty. Wizyta może być następnie anulowana przez telefon:
event.preventDefault()
UWAGA:
Według oficjalnych dokumentów turbolinks :
Wizyty restauracyjne nie mogą być anulowane i nie odpalają turbolink: przed wizytą.
Trwałe elementy podczas ładowania strony
Rozważ następującą sytuację: Wyobraź sobie, że jesteś twórcą serwisu społecznościowego, który pozwala użytkownikom zaprzyjaźniać się z innymi użytkownikami i który wykorzystuje turbolinki, aby przyspieszyć ładowanie strony. W prawym górnym rogu każdej strony w witrynie znajduje się liczba wskazująca całkowitą liczbę znajomych aktualnie posiadanych przez użytkownika. Wyobraź sobie, że korzystasz z witryny i że masz 3 znajomych. Za każdym razem, gdy dodawany jest nowy przyjaciel, masz uruchomiony skrypt javascript, który aktualizuje licznik znajomych. Wyobraź sobie, że właśnie dodałeś nowego przyjaciela i że javascript działa poprawnie i zaktualizował liczbę znajomych w prawym górnym rogu strony, aby teraz renderować 4. Teraz wyobraź sobie, że kliknąłeś przycisk Wstecz przeglądarki. Gdy strona się ładuje, zauważasz, że licznik znajomych mówi 3, mimo że masz czterech przyjaciół.
Jest to stosunkowo częsty problem, dla którego turbolinki dostarczyły rozwiązanie. Przyczyną tego problemu jest to, że turbolinki automatycznie ładują strony z pamięci podręcznej, gdy użytkownik kliknie przycisk Wstecz. Strona w pamięci podręcznej nie zawsze będzie aktualizowana w bazie danych.
Aby rozwiązać ten problem, wyobraź sobie, że renderujesz liczbę znajomych wewnątrz tagu <div> z identyfikatorem „liczba znajomych”:
<div id="friend-count" data-turbolinks-permanent>3 friends</div>
Dodając atrybut data-turbolinks-permanent , nakazujesz turbolinkom, aby zachowywały określone elementy podczas ładowania stron. Oficjalne dokumenty mówią :
Wyznacz elementy stałe, nadając im identyfikator HTML i opatrząc je adnotacjami za pomocą danych turbolinks-permanent. Przed każdym renderowaniem Turbolinks dopasowuje wszystkie stałe elementy według identyfikatora i przenosi je ze strony oryginalnej na nową, zachowując ich dane i detektory zdarzeń.