Плагин для Матрешки: реактивный роутинг

Демо
Репозиторий
Плагин включает синхронизацию свойств объекта и куска урла.

this.initRouter('/a/b/c/');
this.a = 'foo';
this.b = 'bar';
this.c = 'baz'

// location.hash теперь #!/foo/bar/baz/

Для использования History API вместо location.hash, нужно передать строку "history" вторым аргументом.

this.initRouter('/a/b/c/', 'history');

Справедливо предположить, что то, что называется фронт-енд фреймворком должно включать в себя возможность роутинга. Вопрос “есть ли в Матрешке роутер” звучит достаточно часто, на что всегда был один ответ: есть много замечательных библиотек, которые имплементируют роутинг и они будут работать луше, чем непопулярная реализация “местячкового” роутера. Этот вопрос пришлось добавить в скромный FAQ со ссылкой на одну из самых популярных библиотек для роутинга Director. Но время пришло.

Как работает “традиционный” роутинг? Разработчик указывает правило (роут) и описывает то, как будет себя вести приложение при соответствии урла с указанным правилом.

route('books/:id', id => {
    // делать что-то
});

Matreshka Router работает совсем по-другому. Он следует традициям Матрешки, синхронизируя часть пути со свойством объекта.

Дисклеймер: такой способ роутинга совершенно нов и беспрецедентен. Он может не покрывать все те задачи, которые обычно ставят перед обычным роутером. Поэтому, воспользуйтесь альтернативным решением, если в этом есть необходимость.

Принцип работы плагина в следующем: вы указываете какая часть урла (поддерживается и hash, и HTML5 History) синхронизируется со свойством.

Скажем, вы хотите синхронизировать свойство "x" с первой частью location.hash, свойство "y" — со второй.

this.initRouter("/x/y/");

Теперь когда вы пишете..

this.x = 'foo';
this.y = 'bar';

… Хеш автоматически изменится на #!/foo/bar/

И наоборот, если вы вручную, программно или с помощью стрелок “вперед” и “назад“ меняете адрес, свойства изменятся автоматически.

location.hash = '#!/baz/qux/';

console.log(this.x, this.y); // ‘bar’, ‘qux’

Как и всегда, свойства можно прослушивать с помощью метода on.

this.on('change:x', handler);

В метод initRouter можно передать строку со “звездочками”, если нет необходимости в синхронизации какой-нибудь части урла.

this.initRouter('/x/*/y');

Если хеш выглядит, как #!/foo/bar/baz/, то this.x становится равным "foo", this.y — "baz".

Такая возможность полезна тогда, когда один класс контролирует одну часть адреса, другой — другую.

class1.js

this.initRouter('/x/*/');

class2.js

this.initRouter('/*/y/');

Важно помнить две вещи:

1. Если при инициализации роутера свойство имеет правдивое значение, адрес изменится сразу после вызова initRouter. Иначе — наоборот, свойство получит значение части пути.

this.x = 'foo';

this.initRouter('/x/y/');

2. Если свойство, указанное в роуте получит лживое значение, все последующие свойства, указанные в роуте, получат значение null.

this.initRouter('/x/y/z/u/');

this.y = null; // уствновит this.z и this.u тоже в null

Пускай вас не пугает такое решение. Идея в том, чтоб поддерживать состояния урла и свойств актуалными. Было бы странно иметь свойство "z" со значением "foo" при условии отсутствующей части адреса, связанной с этим свойством.

HTML5 History API

Кроме хеш роутинга, плагин поддерживает возможность работы с HTML5 History. Для инициализации нужно передать в метод initRoute дополнительный параметр type равный "history" (по умолчанию, type = "hash").

this.initRouter('/x/y/z/', 'history');

Поддержка произвольных объектов

Напомню, что почти все методы Матрешки (для связывания, реактивности, событий и пр.) имеют свой статичный аналог, в качестве примера приведу метод on.

// если this - инстанс Матрешки
this.on('something', handler);

// для любого другого объекта
var obj = {};
MK.on(obj, 'something', handler);

Подобные статичные методы скрыты под флажком “продвинутый режим” в документации.

Такое разделение не обошло стороной и этот плагин: кроме метода прототипа, в наличии есть и статичный аналог метода initRouter, который принимает произвольный объект в качестве первого аргумента и позволяет синхронизировать части адреса со свойствами обычного объекта.

var obj = {};
MK.initRouter(obj, '/a/b/c/');

obj.a = 'foo';
obj.b = 'bar';
obj.c = 'baz';

Дополнительная информация

Ядро роутера реализовано в виде класса Matreshka.Router. Его конструктор принимает один аргумент: тип роутера ("hash", "history" или произвольную строку).

При подключении модуля создаётся два экземпляра класса Matreshka.Router с типами hash и history, которые хранятся, соответственно, в Matreshka.Router.hash и Matreshka.Router.history (используется ленивая инициализация, поэтому подключение модуля без его использования ничего не делает). Для этих двух экземпляров реализуется паттерн синглтон, т. е, при создании роутера с типом hash возвращается Matreshka.Router.hash вместо создания нового экземпляра. Такая логика централизует обработку урла, положительно влияя на производительность и не вызывает коллизии. Объекты, в свою очередь, просто подписываются на изменения и не занимаются парсингом.

"Кастомные" экземпляры Matreshka.Router могут быть созданы вручную, на случай, если есть наобходимость работать вне браузерного окружения, или нужно сгенерировать ссылку для дальнейшего произвольного использования. В этом случае, изменение свойств не повлияет ни на hash и не вызовет pushState.

Экземпляры класса Router имеют три свойства.

path — свойство, которое содержит актуальный урл, например, /foo/bar/baz/.

hashPath — свойство, которое сожеджит path, с дописанным к ней hashbang, например #!/foo/bar/baz/

parts — свойство, представленное в виде массива, содержащее актуальные кусочки пути, например, [‘foo’, ‘bar’, ‘baz’].

Все три свойства объявлены с помощью метода linkProps, так что при изменении одного свойства, меняются и другие:

Matreshka.Router.hash.path = '/yo/man/';

… И два метода

subscribe(object, route) — подписывает объект на изменения в свойствах.

init() — используется для ленивой инициализации при вызове subscribe (вызывать вручную нет нужды).

var customRouter = new Matreshka.Router(),
    object = {
        a: 'foo',
        b: 'bar'
    };

customRouter.subscribe(object, '/a/b/');

console.log(customRouter.path); // /foo/bar/

Всем добра.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.