Demo
Репозиторий Плагин включает синхронизацию свойств объекта и куска урла. Для использования History API вместо location.hash, нужно передать строку "history" вторым аргументом. Импорт CJS модуля: Как работает “традиционный” роутинг? Разработчик указывает правило (роут) и описывает то, как будет себя вести приложение при соответствии урла с указанным правилом. Matreshka Router работает по-другому. Библиотека синхронизирует часть пути со свойством объекта.  Дисклеймер: такой способ роутинга может не покрывать все те задачи, которые обычно ставятся перед обычным роутером. Воспользуйтесь альтернативным решением, если в этом есть необходимость. Принцип работы плагина в следующем: вы указываете какая часть урла (поддерживается и hash, и HTML5 History) синхронизируется со свойством. Скажем, вы хотите синхронизировать свойство "x" с первой частью location.hash, свойство "y" — со второй. Теперь когда вы пишете.. … Хеш автоматически изменится на #!/foo/bar/ И наоборот, если вы вручную, программно или с помощью стрелок “вперед” и “назад“ меняете адрес, свойства изменятся автоматически. Как и всегда, свойства можно прослушивать с помощью метода on. В функцию initRouter можно передать строку со “звездочками”, для игнорирования части урла. Если хеш выглядит, как #!/foo/bar/baz/, то object.x становится равным "foo", object.y — "baz". Такая возможность полезна тогда, когда один класс контролирует одну часть адреса, другой — другую. class1.js class2.js Важно помнить две вещи: 1. Если при инициализации роутера свойство имеет правдивое значение, адрес изменится сразу после вызова initRouter. Иначе — наоборот, свойство получит значение части пути. 2. Если свойство, указанное в роуте получит лживое значение, все последующие свойства, указанные в роуте, получат значение null. Идея в том, чтоб поддерживать состояния урла и свойств актуалными. Было бы странно иметь свойство "z" со значением "foo" при условии отсутствующей части адреса, связанной с этим свойством. Кроме хеш роутинга, плагин поддерживает возможность работы с HTML5 History. Для инициализации нужно передать в метод initRoute дополнительный параметр type равный "history" (по умолчанию, type = "hash"). Ядро роутера реализовано в виде класса 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 — свойство, представленное в виде массива, содержащее актуальные кусочки пути, например, . Все три свойства объявлены с помощью метода calc, так что при изменении одного свойства, меняются и другие: … И два метода subscribe(object, route) — подписывает объект на изменения в свойствах. init() — используется для ленивой инициализации при вызове subscribe (вызывать вручную нет нужды). Всё описанное выше касается немодульного окружения. Если приложение находится в окружении CommonJS (NodeJS, Webpack, Rollup...) подключение модуля matreshka-router не добавляет новых статичных свойств классу Matreshka. Вместо этого, initRouter импортируется традиционным способом. Импортировать класс Router можно так: Всем добра. Веб разработчик