- PVSM.RU - https://www.pvsm.ru -
Не так давно я начал разрабатывать библиотеку DuelJS, которая предоставила удобный интерфейс для определения состояния вкладки Master (активная) или Slave (неактивная). Однако позже мне начали поступать предложения для оптимизации соединений по веб-сокетам. Подход DuelJS: если вкладка активна -> держать соединение, если неактивна -> ложить является не продуктивным. На помощь приходит расширение TabNinja.
Понять старую логику легко взглянув на нижеприведенный скриншот:
TabNinja предлагает новую логику поверх старой:
Вкладка с логикой (она же superMaster) всегда одна и всегда есть. Она меняется только лишь в одном случае — при закрытии этой самой вкладки. В этом случае автоматически статус superMaster переходит другой, наиболее старой вкладке из оставшихся вкладок. Проблема избыточных соединений решена.
TabNinja по сути есть одна простая функция:
window.isSuperMaster(); // при использовании вместе с duel не путайте с window.isMaster()
Вы также можете использовать TabNinja без DuelJS, в этом случае вам стоит использовать файл из репозитория с соответствующей пометкой (tabninja.without_duel.min.js)
Алгоритм TabNinja весьма прост и базируется на localStorage + sessionStorage.
1. Если localStorage недоступен — все вкладки будут являться superMaster
2. Текущая вкладка обращается к переменной контроля аварийности в sessionStorage
3. В случае если переменной нет — устанавливается переменная и удаляется стек активных вкладок
4. Текущая вкладка обращается к стеку активных вкладок через localStorage
5. Если в стеке активных вкладок пусто — создать стек и поместить туда себя
6. Если кто-либо уже присутствует в стеке активных вкладок, значит главный тот кто первый в стеке
7. При закрытии вкладки: вытащить её из стека
— Демо DuelJS без TabNinja [1]
— Демо DuelJS с TabNinja [2]
— Демо TabNinja без DuelJS [3]
— Репозиторий TabNinja на GitHub [4]
— Репозиторий DuelJS на GitHub [5]
— Краткий обзор DuelJS на сайте [6]
— Документация DuelJS на readthedocs [7]
— Картинка топика взята с people.howstuffworks.com/ninja.htm [8]
Предлагайте свои идеи по улучшению библиотеки DuelJS сюда или в issues, спасибо.
Чуть не забыл: внимательно смотрите список тестируемых браузеров в README.md
P.S: Сейчас работаю над улучшением работы TabNinja в Internet Explorer 11 — иногда происходит неадекватное поведение, которое рушит работу tabNinja.
Автор: student_ivan
Источник [9]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/83633
Ссылки в тексте:
[1] Демо DuelJS без TabNinja: http://dueljs.studentivan.ru/bower_components/duel/public/
[2] Демо DuelJS с TabNinja: http://dueljs.studentivan.ru/bower_components/tabninja/public/
[3] Демо TabNinja без DuelJS: http://dueljs.studentivan.ru/bower_components/tabninja/public/index.w.html
[4] Репозиторий TabNinja на GitHub: https://github.com/studentIvan/tabninja
[5] Репозиторий DuelJS на GitHub: https://github.com/studentIvan/dueljs
[6] Краткий обзор DuelJS на сайте: http://dueljs.studentivan.ru
[7] Документация DuelJS на readthedocs: https://dueljs.readthedocs.org
[8] people.howstuffworks.com/ninja.htm: http://people.howstuffworks.com/ninja.htm
[9] Источник: http://habrahabr.ru/post/251175/
Нажмите здесь для печати.