Routing w JavaScript – Sammy.js

Nie sądziłem, że to jest aż tak proste – do dzieła.

sammy-logo-header-large

Routing będzie manipulował naszym adresem (pasek adresu będzie te zmiany odzwierciedlał), będzie zmieniał naszą historię przeglądania. Dzięki temu przecisk „back” będzie działał bez przeładowywania strony. Zmiana adres będzie tylko po stronie clienta, czyli po znaku ‚#’. Oznacza to że takie zmiany adresu nie będą wysyłane do servera. Nie będzie full reload. Gdy w przeglądarce wpiszemy

http://www.domain.com/#message/1

to server odpowie tylko na żadanie

http://www.domain.com

Więc po stronie clienta musi oprogramować co się stanie gdy po hashu dostaniemy „message/1”.

Dlaczego routing jest ważny

A po co mi to? Gdy masz taką bardzo client-side aplikację (powiedzmy sklep) w której wszystko robisz javascriptem (bez przeładowań, super płynnie) i jest tam produkt który chcesz wysłać jako linka znajomemu, to musi istnieć właśnie routing. Dzięki temu kopiujesz i wysyłasz superSklep.com.pl/#/products/klawiaturaCODE, a znajomy widzi klawiaturę. Bez tego wysłałbyś superSklep.com.pl i znajomy znalazłby się na głównej i nigdy nie znajdzie klawiatury.

Last but not least, ta technika jest konieczna dla Single Page Applications (dzięki @nilp za komentarz).

Przykładowy kod w Sammy.js

Plik /scripts/app.js:

(function ($) {
    var app = $.sammy(function () {

        this.get('#welcome', function () { // definicja routingu
            alert('You are on "Welcome" page');
        });

    });

    $(function () {
        app.run('#welcome'); // wystartuje i przejdź do adresu #welcome
    });
})(jQuery);

Przykładowy routing. get(…) oznacza, że chodzi o request HTTP GET (są też pozostałe POST, PUT, DELETE). Jako pierwszy parametr dopasowujemy routing (pod spodem są wyrażenia regularne), w tym przypadku dopasuje się tylko #welcome. Drugi parametr to callback, który wykona się po wejściu na taki adres.

Parametry

// routing z parametrami rozdzielonymi przez slashe
this.get('#:name/:age', function () { 
    // zmienne dostępne w "params"
    alert(this.params.name + ' is now ' + this.params.age + ' years old); 
});

Routing który zostanie dopasowany do powyższego przykładu to na przykład „#marcin/14” lub „#paulina/4”. Zostanie też dopasowane „#24/bartek” – nie definiujemy typów. „#/ala/ma/kota” już nie zostanie dopasowane – ilość segmentów musi się zgadzać.

Redirect

this.get('#/by_name/:name', function () {
    // do some work, maybe in Knockout. Angular has its own routing system.
    this.redirect('#', this.params.name, this.params.name);
});

Można też z kodu przekierowywać na wybrane adresy, za pomocą redirect. Redirect przyjmuje parametry, z których stworzy kolejne segmenty. Gdy wejdziemy na adres „#/by_name/marian”, zostaniemy przekierowani na „#/marian/marian”.

Kolejność routingów

(function ($) {
    var app = $.sammy(function () {

        this.get('#:name/:age', function () {
            // to zobaczymy na ekranie
            alert('#:name/:age'); 
        });
        
        this.get('#hardcoded/:age', function () {
            // mimo, że kolejny bardziej pasuje
            alert('#hardcoded/:age'); 
        });
    });

    $(function () {
        app.run('#hardcoded/22');
    });
})(jQuery);

Jak staram się pokazać na powyższym przykładzie – kolejność definiowania routingów ma znaczenie.

Dopasuj cokolwiek

(function ($) {
    var app = $.sammy(function () {
        
        // po prostu wyrażenie regularne
        this.get(/\#\/by_name\/(.*)/, function () { 
            alert(this.params['splat']);
        });
    });

    $(function () {
        app.run('#/by_name/params=can,be|anything&age=100');
    });
})(jQuery);

Jeśli potrzebujemy większej kontroli nad tym co się znajduje w adresie możemy skorzystać ze zmiennej splat . Powyższe wyrażenie regularne dopaje do splat cokolwiek (.*) znalezione to „#/by_name/”. Możemy wtedy z kodu parsować taki adres.

Definiowanie routingów przypomina mechanizm znany z ASP.NET MVC. To pewnie oznacza, że wszystkie routingi działają podobnie, niezależnie od biblioteki.

Na tych postawach zbudowane są ciekawsze rzeczy jak ładowanie widoków i ich automatyczna podmiana. Tutaj ograniczam się do prostego proof of concept.

Kod i przykład do poklikania

Przykład jest prymitywny, operuje na ukrywaniu i pokazywaniu divów, ale działa!

Sammy.j routing example

Sammy.j routing example – app.js

Reklamy
Ten wpis został opublikowany w kategorii Programowanie i oznaczony tagami , , , . Dodaj zakładkę do bezpośredniego odnośnika.

6 odpowiedzi na „Routing w JavaScript – Sammy.js

  1. Pingback: dotnetomaniak.pl

  2. nilp pisze:

    super płynnie bez przeładowań -> SPA 😉 [Single Page Application]

  3. Pingback: Hostuj aplikację na GitHubie (gh-pages) | Show me the code

Możliwość komentowania jest wyłączona.