Углубленный анализ: принцип внешней маршрутизации

внешний фреймворк

предисловие

Три интерфейсных фреймворкаAngular,React,Vue, их решение для маршрутизацииangular/router,react-router,vue-routerВсе они инкапсулированы и реализованы по принципу front-end роутинга, поэтому необходимо понять и освоить принцип front-end роутинга, потому что мы неизбежно столкнемся с некоторыми ямами в процессе его повторного использования. его принцип реализации, тогда вы можете легче использовать маршрутизацию в разработке.

1. Что такое маршрутизация?

Концепция маршрутизации возникла на сервере, когда интерфейс и сервер не разделены, сервер управляет маршрутом.HTTPзапрос, соответствующийURL, чтобы найти соответствующую функцию сопоставления, выполнить функцию и отправить возвращаемое значение функции клиенту. Для простейшего сервера статических ресурсов можно считать, что всеURLФункция карты — это операция чтения файла. Для динамических ресурсов функцией сопоставления может быть операция чтения базы данных или некоторая обработка данных и т.д. Затем, согласно прочитанным данным, на стороне сервера используется соответствующий шаблон для отрисовки страницы, после чего отрендеренная страница возвращается. Его преимущества и недостатки очень очевидны:

  • Достоинства: хорошая безопасность,SEOхорошо;
  • Недостатки: повышенная нагрузка на сервер, что не способствует пользовательскому опыту, а код избыточен и сложен в обслуживании;

Именно потому, что внутренняя маршрутизация все еще имеет свои недостатки, у внешней маршрутизации есть собственное пространство для развития. Для внешней маршрутизации функция сопоставления маршрутизации обычно выполняет некоторыеDOMпоказать и скрыть операции. Таким образом, при доступе к разным путям будут отображаться разные компоненты страницы. Существует две основные схемы реализации интерфейсной маршрутизации:

  • Hash
  • History

Конечно, у front-end роутинга есть и недостатки: при использовании клавиш браузера вперед и назад запрос будет повторно отправлен для получения данных, а кеш используется нерационально. Но в целом интерфейсная маршрутизация сейчас является основным способом реализации маршрутизации.Angular,React,Vue, их решение для маршрутизацииangular/router,react-router,vue-routerВсе они разработаны на основе внешней маршрутизации, поэтому внешняя маршрутизация понятна и Необходимо освоить, давайте рассмотрим два распространенных режима маршрутизации переднего плана.HashиHistoryОбъяснять.

Две, две реализации интерфейсной маршрутизации

2.1 Режим хеширования

2.1.1 Принцип

Ранняя реализация внешней маршрутизации была основана наlocation.hashбыть реализованным. Принцип его реализации также очень прост,location.hashЗначениеURLСодержимое после # в нем. Например, следующий веб-сайт, егоlocation.hashзначение'#search':

https://www.word.com#search

также,hashЕсть также следующие особенности:

  • URLсерединаhashЗначение — это просто состояние клиентской стороны, то есть когда делается запрос к серверной стороне,hashЗапчасти не отправляются.
  • hashИзменение значения добавит запись в историю доступа браузера. Таким образом, мы можем управлять им с помощью кнопок браузера «назад» и «вперед».hashвыключатель.
  • мы можем использоватьhashchangeсобытие для мониторингаhashПеремена.

Мы можем запустить двумя способамиhashизменение, один черезaметка и установкаhrefатрибут, когда пользователь нажимает на эту метку,URLизменится, это сработаетhashchangeСобытие вверх:

<a href="#search">search</a>

Другой способ заключается в непосредственном использованииJavaScriptиди прямоloaction.hashназначение, тем самым изменяяURL,курокhashchangeсобытие:

location.hash="#search"

В следующей реализации мы используем второй метод для достижения.

2.1.2. Реализация

Сначала мы определяем родительский классBaseRouter, реализоватьHashмаршрутизация иHistoryНекоторые распространенные методы маршрутизации;

export class BaseRouter {
  // list 表示路由表
  constructor(list) {
    this.list = list;
  }
  // 页面渲染函数
  render(state) {
    let ele = this.list.find(ele => ele.path === state);
    ele = ele ? ele : this.list.find(ele => ele.path === '*');
    ELEMENT.innerText = ele.component;
  }
}

Мы просто достиглиpushвставная функция,goДля функции «вперед/назад» отмечены соответствующие комментарии к коду, которые легко понять и не будут вводиться один за другим. См. следующее:

export class HashRouter extends BaseRouter {
  constructor(list) {
    super(list);
    this.handler();
    // 监听 hashchange 事件
    window.addEventListener('hashchange', e => {
      this.handler();
    });
  }
  // hash 改变时，重新渲染页面
  handler() {
    this.render(this.getState());
  }
  // 获取 hash 值
  getState() {
    const hash = window.location.hash;
    return hash ? hash.slice(1) : '/';
  }
  // push 新的页面
  push(path) {
    window.location.hash = path;
  }
  // 获取 默认页 url
  getUrl(path) {
    const href = window.location.href;
    const i = href.indexOf('#');
    const base = i >= 0 ? href.slice(0, i) : href;
    return base +'#'+ path;
  }
  // 替换页面
  replace(path) {
    window.location.replace(this.getUrl(path));
  }
  // 前进 or 后退浏览历史
  go(n) {
    window.history.go(n);
  }
}

2.1.3, визуализация

HashРендеринг примера реализации маршрутизации шаблона выглядит следующим образом:

1.png

2.2, Режим истории

2.2.1 Принцип

фронтhashХотя это тоже очень хорошо, но при использовании нужно добавлять #, что не очень красиво. так вотHTML5, что также обеспечиваетHistory APIреализоватьURLПеремена. самый важный из которыхAPIЕсть следующие два:history.pushState()иhistory.repalceState(). эти двоеAPIИсторией браузера можно управлять без обновления. Единственное отличие состоит в том, что в первом случае добавляется новая запись истории, а во втором — прямая замена текущей записи истории, как показано ниже:

window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

также,historyСуществуют следующие функции:

  • pushStateиrepalceStateзаглавие(title): обычно игнорируется браузерами, лучше пройтиnull;
  • мы можем использоватьpopstateсобытие для мониторингаurlПеремена;
  • history.pushState()илиhistory.replaceState()не сработаетpopstateсобытие, то нам нужно вручную запустить рендеринг страницы;

2.2.2. Реализация

Мы также просто достиглиpushвставная функция,goДля функции «вперед/назад» отмечены соответствующие комментарии к коду, которые легко понять и не будут вводиться один за другим. См. следующее:

export class HistoryRouter extends BaseRouter {
  constructor(list) {
    super(list);
    this.handler();
    // 监听 popstate 事件
    window.addEventListener('popstate', e => {
      console.log('触发 popstate。。。');
      this.handler();
    });
  }
  // 渲染页面
  handler() {
    this.render(this.getState());
  }
  // 获取 url 
  getState() {
    const path = window.location.pathname;
    return path ? path : '/';
  }
  // push 页面
  push(path) {
    history.pushState(null, null, path);
    this.handler();
  }
  // replace 页面
  replace(path) {
    history.replaceState(null, null, path);
    this.handler();
  }
   // 前进 or 后退浏览历史
  go(n) {
    window.history.go(n);
  }
}

2.2.3, визуализация

HistoryРендеринг примера реализации маршрутизации шаблона выглядит следующим образом:

1.png

2.3 Сравнение двух режимов маршрутизации

Контрастная точка Хэш-режим Режим истории
эстетика С символом # это уродливее Просто и красиво
совместимость >= т.е. 8, другие основные браузеры >= т.е. 10, другие основные браузеры
практичность Никаких изменений сервера не требуется Сервер должен соответствующим образом координировать настройки маршрутизации.

3. Резюме

В этой статье мы кратко расскажем, что такое маршрутизация, происхождение интерфейсной маршрутизации и проанализируем две интерфейсные маршрутизации:Hashузор иHistoryПринцип работы мода и реализация простых функций, код реализации примера в этой статье выложен на гитхаб:GitHub.com/ревматизм123/…. Благодаря овладению принципом внешней маршрутизации в этой статье вы сможете прочитать основные принципы.vue-routerиreact-routerИсходный код реализован.

Адрес гитхаба:GitHub.com/ревматизм123/… , который обобщает все статьи в блоге автора, если вам нравится или вдохновляет, пожалуйста, помогите дать звезду ~, что также является поощрением для автора.

использованная литература

1. Говоря о внешней маршрутизации:Краткое описание.com/afraid/'s 2 ah 8 удобный 95…

2. Внешняя маршрутизация:сегмент fault.com/ah/119000001…

Категории