Предисловие
Маршрутизация фронта поддерживается во многих библиотечных рамках JS с открытым исходным кодом, таких как AngularJS, BACKBONE, ReactJS и т. Д. Это позволяет всем взаимодействиям и отображает их на одной странице, чтобы запустить для сокращения запросов сервера и улучшения качества обслуживания клиентов. Все больше и больше веб-сайтов, особенно веб-приложений, используют фронтальную маршрутизацию.
HTML
На странице есть меню навигации UL, и для отображения результатов используется результат Div#. Нажав на меню навигации, в #Result будет отображаться различное содержимое результата.
<ul> <li> <a href = "#/"> home </a> </li> <li> <a href = "#/product"> product </a> </li> <li> <a href = "#/server"> Service </a> </li> </ul> <div id = "Результат"> </div>
JavaScript
Давайте поговорим о кратком принципе реализации маршрутизации. В качестве примера принимая форму хэш (также можно обрабатывать с использованием API History), когда хэш изменений URL -адреса запускается, запускается зарегистрированный вызов хэш -оболочки, а в обратном вызове отображаются различные операции, и отображается различное содержимое.
функция router () {this.routes = {}; this.cururl = ''; this.route = function (path, обратный вызов) {this.routes [path] = обратный вызов || function () {}; }; this.refresh = function () {this.cururl = location.hash.slice (1) || '/'; this.routes [this.cururl] (); }; this.init = function () {window.addeventListener ('load', this.refresh.bind (this), false); window.addeventListener ('hashchange', this.refresh.bind (this), false); }}В приведенном выше коде реализация объекта маршрутизации маршрутизации в основном предоставляет три метода:
Init прослушивает событие обновления URL -хэша браузера.
Маршрут хранит обратные вызовы во время обновлений маршрута для маршрутов массива обратного вызова, и функция обратного вызова будет нести ответственность за обновление страницы.
Обновление выполняет функцию обратного вызова, соответствующую текущему URL -адресу, и обновляет страницу.
Метод вызова маршрутизатора выглядит следующим образом:
Нажмите, чтобы запустить хеш -изменение URL -адреса и соответствующим образом обновить контент. После запуска вы обнаружите, что каждый раз, когда вы нажимаете на меню, цвет фона и контент будут изменены в #Result.
var r = new Router (); r.init (); var res = document.getElementById ('result'); R.route ('/', function () {res.style.background = 'blue'; res.innerhtml = 'Это домашняя страница';}); R.route ('/product', function () {res.style.background = 'Orange'; res.innerhtml = 'Это страница продукта';}); R.route ('/server', function () {res.style.background = 'black'; res.innerhtml = 'Это страница службы';});Суммировать
Выше представляет собой простую реализацию фронтальной маршрутизации. В фактических приложениях хэш должен регулярно обрабатывать для удовлетворения применения большого количества URL -адресов, и в то же время добавляются функции асинхронного запроса Ajax Asynchronous Content. Хотя этот пример очень прост, на самом деле, основание многих систем маршрутизации основана на этом, и другие системы маршрутизации в основном обеспечивают вспомогательные и оптимизацию структурных механизмов, которые они используют. Хорошо, содержание этой статьи здесь. Я надеюсь, что это поможет вам учиться или работать. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения.