Управление состоянием: URL + json 'stringify' / 'parse'
Доброго времени суток!
1. Есть spa/модуль/страница/что_угодно 2. Состоянием управляем через URL, например: site.com/page#section01&&state={param01:0001, ... , paramN:1000}
3. Всё, что после 'state=' результат, например: encodeURIComponent( JSON.stringify( stateMap ) ) ( где stateMap обычный объект - карта состояния ). Восстановление состояния происходит с использованием в т.ч. JSON.parse( stateStr ) ( где stateStr - часть URL после 'state=' из п.2) 1. Какие могут быть недостатки у такого подхода? 2. Есть ли подход, который считается лучше? Почему? |
1. Не работает в Opera Mini:)
2. Не стоит хранить в URI личные данные. Если туда впихнуть в JSON объект, ссылка может получиться длинной. В таком случае можно исползват массив с только значениями объекта. Например есть объект: Код:
{У вас получится #state={"page":"planner","start":"@20","end":"@35","lang":"ru"}
МАССИВ Но можно решить что у вас ключи идут в таком порядке: "page" "start" "end" "lang" Тогда получится (исползуя в качестве разделителей "/") #state=planner/@20/@35/ru В hash можно запихнуть только массив #planner/@20/@35/ru У вас было site.com/page#section01&&state={param01:0001, ... , paramN:1000}
Можно переделать например в site.com/page#section01/0001/ ... /1000 P. S. Я сам часто использую такой подход (используя событие hashchange или history.pushState/history.replaceState), поскольку именно нравится то, что 1) работает навигация 2) возможно добавить ссылку в закладки или скопировать и отправить кому-то и увидят тоже самое 3) если ссылки на странице сформулированы в виде <a href="#something">(в случае със hashchange) то при переходе по ней не происходит перезагрузки |
Спасибо за мнение.
Дополняю: Хотелось бы, чтобы набор ключей - параметров и их порядок в карте состояния могли быть произвольными. Есть, к примеру, дефолтные состояние параметров, которые не сохраняются, а пишутся только в случае их изменения ( мне показалось, это какая-никакая экономия ) Есть пример: http://www.gwd.ru/projects/ Мне показалось в этом случае излишним добавлять в URI 'area' и 'cost', даже тогда, когда они не меняются. Возможно, чего-то не понимаю. Ссылка действительно нередко получается длинной, я кроме как пользоваться сторонним сервисом сокращения ссылок пока не нашел решения ( не нравится, что становимся зависимым от него ). |
Цитата:
Например #product/17/ после парсинга ["product", "17"] 17-ый продукт #search/115,300/6000,15000/ после парсинга например ["search", [115, 300], [6000, 15000]] ищем стоимость 115...300 площадь 6000...15000 И соответственно в зависимости от первого значения знаем как разбирать остальные данные Например в реальных проектах такой подход используетя 1. Google переводчик https://translate.google.ee/?hl=bg&t...n/ru/my%20word обратите внимание когда печатаете состояние сразу меняетя и в URI 2.Google mail https://mail.google.com/mail/u/0/?ta...5083682d92e3b0 https://mail.google.com/mail/u/0/?ta...58ce1e9ff5c684 обратите внимание у них первый показывает какая папка и так далее 3. Расписания общественного транспорта г. Таллинна Здесь таким образом зависит, какой вид показывать: - если расписание, то какой вид транспорта, направление, показывать ли карту, - если поиск маршрута, то начальная и конечная остановка - и т.д и т.д https://transport.tallinn.ee/#bus/2/a-b/13604-1/map/ru https://transport.tallinn.ee/#plan/2...4-1,13705-1/ru И заметьте ссылки не такие и длинные в общем получаются... |
Ок. Спасибо, сподвигли на мысль кодировать/декодировать части карты состояния.
|
| Часовой пояс GMT +3, время: 12:01. |