Статьи

JavaScript маршрутизация: Сэмми против Флэтайрон

Август 14, 2018

Имея мало знаний о клиентской маршрутизации в JavaScript, я решил сравнить две среды:
Sammy.js и
Flatiron Director .

Сфера

Я сделаю сравнение на очень простом приложении (на основе примера из Flatiron). Функции, которые я хотел бы использовать:

  • Маршрутизация : Маршрутизация на основе хэш — адресов , как app#/author.
  • Маршрутизация с параметрами : получение параметров из URL-адресов, например, «15» из app#/books/15.
  • Несколько привязок : выполнение более одного действия для маршрута (в реальном приложении это может быть маршрутизация и загрузка некоторых данных).
  • Маршруты по умолчанию : подключение маршрута по умолчанию для всех несопоставленных путей.
  • Прослушиватели : подключение прослушивателя — специальное действие, выполняемое в дополнение к маршрутизации по всем путям.

Код

Флэтайрон Директор

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flatiron Director Sample</title>
    <script src="https://raw.github.com/flatiron/director/master/build/director-1.1.6.min.js"></script>
    <script>
    var author = function () { console.log("author"); };
    var books = function () { console.log("books"); };
    var viewBook = function(bookId) {
      console.log("viewBook: bookId is populated: " + bookId);
    };
    var wildcard = function(route) {
      console.log("Wildcard at: " + route);
    };
    var listener = function() {
      console.log("Listener at: " + window.location);
    };
 
    var routes = {
      '/author': author,
      '/books': [books, function() { console.log("An inline route handler."); }],
      '/books/view/:bookId': viewBook,
      '/:def': wildcard
    };
 
    var router = Router(routes);
    router.configure({ on: listener });
    router.init();
    </script>
  </head>
  <body>
    <ul>
      <li><a href="#/author">#/author</a></li>
      <li><a href="#/books">#/books</a></li>
      <li><a href="#/books/view/1">#/books/view/1</a></li>
      <li><a href="#/other">#/other</a></li>
    </ul>
  </body>
</html>

Sammy.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sammy Sample</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="https://raw.github.com/quirkey/sammy/master/lib/min/sammy-latest.min.js"></script>
    <script>
    $(function() {
      var author = function () { console.log("author"); };
      var books = function () { console.log("books"); };
      var viewBook = function(bookId) {
        console.log("viewBook: bookId is populated: " + bookId);
      };
      var wildcard = function() {
        console.log("Wildcard at: " + this.params['route']);
      };
      var listener = function() {
        console.log("Listener at: " + this.params['path']);
      };
 
      $.sammy("#main", function() {
        this.get('#author', author);
        this.get('#books', books);
        this.get('#books/view/:id', function() {
          viewBook(this.params['id']);
          console.log("An inline route handler.");
        });
        this.get('#:route', wildcard);
        this.bind('run-route', listener);
      }).run('#');
    });
    </script>
  </head>
  <body id="main">
    <ul>
      <li><a href="#author">#author</a></li>
      <li><a href="#books">#books</a></li>
      <li><a href="#books/view/1">#books/view/1</a></li>
      <li><a href="#other">#other</a></li>
    </ul>
  </body>
</html>

Заметки

Так что я думаю о них?

Директор кажется довольно легким и простым. Он не имеет зависимостей и весит 3,7 кБ. Это почти функциональное программирование (за исключением момента, когда вы его включаете) — вы можете сразу увидеть, что происходит и какие есть варианты.

По сравнению с этим Sammy.js намного тяжелее. Это зависит от jQuery (32,7 кБ) и весит 6,5 кБ. Это делает больше предположений: ваш код должен запускаться после загрузки страницы (вот почему он включен $.readyздесь). Это заставляет вас писать OO-код — у функций нет аргументов, но вы получаете больше информации this.

Директор поддерживает подключение нескольких обработчиков к маршруту из коробки (вы можете передать массив функций). В Сэмми, видимо, вам нужно обернуть их в другую функцию.

По какой-то причине директор, похоже, требует, чтобы URL-адреса имели косую черту, например app#/books— никогда app#books. Сэмми все равно.

Остальное вы можете увидеть сами в коде выше.

решение суда

Сэмми заставляет меня загружать больше кода, и все время мне нужно читать документацию («Итак, какие параметры здесь доступны?», «Что скрывает этот объект?»), И в конце концов он даже заставляет меня писать больше кода. Посмотрите на параметризованный viewBookобработчик: с помощью Director я могу добавить параметр в функцию обработчика, и он просто работает. С Сэмми мне нужно получить это this.

На данный момент я сильно предпочитаю директора. Это меньше и намного проще в использовании. Мне это нравится еще больше, потому что я могу напрямую использовать его из ClojureScript с минимальным трением. Потребовалось бы немало усилий, чтобы интегрировать Сэмми.

38
Share: