объяснить предысторию

Через год я был вынужден сменить работу, и я не мог описать их все, поэтому я отправил свое резюме, хотя я пытался его накопить несколько лет назад, это все-таки не было настоящей сменой работы. Так как я не следил за опытом больших парней по смене работы, то во время собеседования я сначала проголосовал за маленькую фабрику, а потом за большую, в результате я встретил P7 от Али, когда пришел на случайный выбор. интервью, и я потерял дар речи, когда спросили. Через полмесяца обзор резюме

Опыт смены работы: для тех, кто работает на небольших фабриках, в дополнение к солидным базовым навыкам, вы должны сначала отправить свое резюме на небольшую фабрику в компании, в которую вы хотите пойти.Сначала выполните простые, а затем сложные, и получите несколько предложений во-первых. Только когда у вас есть уверенность, вы можете быть уверены. Только тогда у вас может быть высокая вероятность пойти в компанию, в которую вы хотите пойти. Хотя я сожалею (и не имею способностей), что не пошел в компанию, в которую вы хотите пойти , я все-таки желаю всем пройти в тот блок, в который хочется попасть (лично я чувствую, что очень важна уверенность во время собеседования, ведь умение писать код и самовыражение на собеседовании - разные вещи)

Глупый опыт

Первое интервью было дано Али, и его итоги таковы:

Прежде всего, пусть здоровяк представится: ......куча чуши

Потом здоровяк попросил его рассказать о своих преимуществах: ...... Очередная чушь

Потом здоровяк попросил рассказать о том, как отражаются эти преимущества, когда они все: .....Опять много чепухи (из-за отсутствия подготовки импровизация совсем плоха)

И тут начинается кошмар... Резюме обзора таково:

• Продолжайте задавать вопросы вокруг точки знаний, пока не потеряете дар речи (отражая, что подготовка к собеседованию должна быть всесторонней, не знаю меха)
• Запрашиваемые очки знаний представляют собой техническое накопление, которое вы упомянули ранее в преимуществах (отражая, что вы должны быть осторожны при представлении себя, а менее глубокие знания не должны быть включены во введение)
• Исследование заданных вопросов по-прежнему основано на основах, но базовые знания копают глубоко (отражая, что фундамент должен быть прочным, прежде чем идти к Али)

Вышеупомянутые три пункта резюмируются как уроки крови и слез.Далее я буду использовать пример темы в качестве примера для имитации вопроса, заданного боссом на собеседовании (при условии, что я могу ответить на него), чтобы помочь позже людям создать интервью, прежде чем они встретятся с компанией, в которую они хотят пойти сцена, увеличьте свои шансы на успех!

Моделирование реального вопроса

Босс: Вы понимаете маршрутизацию?

Я: Я понимаю, это спа-приложение использует внешнюю маршрутизацию, а остальные — внутреннюю маршрутизацию.

Босс: Как вы можете объяснить это отдельно?

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

Для внешней маршрутизации функция сопоставления маршрутизации обычно заключается в отображении и скрытии некоторых операций DOM.

Босс: Так какие у них плюсы и минусы?

я: Преимущества внутренней маршрутизации:Хорошая безопасность, хорошее SEO, слабость это:Увеличить нагрузку на сервер, что не способствует взаимодействию с пользователем, а код является избыточным., интерфейсная маршрутизация является преимуществом:Внешняя маршрутизация изменяет путь только при доступе к новой странице.Без сетевых задержек пользовательский интерфейс будет значительно улучшен.слабость это:При использовании клавиш браузера вперед и назад запрос будет отправлен повторно, а кеш используется нерационально, что также не способствует сео.

Большой парень: Сколько существует решений для внешней маршрутизации?

Я: Есть две основные схемы реализации интерфейсной маршрутизации:

• 1. хэш
• 2. API истории

Босс: Так какая между ними разница?

Я: у хэша есть # в адресной строке, а у истории нет (это мой ответ в то время, который небрежен)

Большой парень: Тогда вы говорите о принципах их реализации

1. хэш

Я: Реализация хэша основана на location.hash. Принцип реализации также очень прост: значением location.hash является содержимое после # в URL. Например, на веб-сайте Baidu установите его location.hash='#abcsdf', тогда его URL будет таким:

https://www.baidu.com/#abcsdf

Мы можем использовать событие hashchange для прослушивания изменений хэша. И вы можете увидеть общее количество маршрутов через history.length

Большой парень: Можете ли вы использовать хеш-схему для реализации коммутатора маршрутизации?

//首先我们要有个html
  <ul>
      <li><a href="#luyou1">路由1</a></li>
      <li><a href="#luyou2">路由2</a></li>
      <li><a href="#luyou3">路由3</a></li>
    </ul>
    <div id="luyouid"></div>

//ts逻辑
      class router {
        //存贮当前路由
        hashStr: String;
        constructor(hash: String) {
          //初始化赋值
          this.hashStr = hash;
          //初始化
          this.watchHash();
          //绑定监听改变事件,由于this被换了，必须用bind绑定
          this.watch = this.watchHash.bind(this);
          window.addEventListener("hashchange", this.watch);
        }
        //监听方法
        watchHash() {
          console.log();
          let hash: String = window.location.hash.slice(1);
          this.hashStr = hash;
          console.log(hashStr);
          if (hashStr) {
            if (hashStr == "luyou1") {
              document.querySelector("#luyouid").innerHTML = "好好学习天天向上";
            } else if (hashStr == "luyou2") {
              document.querySelector("#luyouid").innerHTML = "天天向上好好学习";
            } else {
              document.querySelector("#luyouid").innerHTML = "学习向上";
            }
          }
        }
      }

Большой парень: А как насчет принципа истории Апи?

history

Я: Объект истории добавляет два новых API в html.history.pushState() и history.repalceState()Эти два API могут манипулировать историей браузера без обновления. Единственное отличие состоит в том, что в первом случае добавляется новая запись истории, а во втором — прямая замена текущей записи истории.

Большой парень: Как использовать эти два API?

window.history.pushState(state,title,url)
//state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
//title：标题，基本没用，一般传null
//url：设定新的历史纪录的url。新的url与当前url的origin必须是一样的，否则会抛出错误。url可以时绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

window.history.replaceState(state,title,url)
//与pushState 基本相同，但她是修改当前历史纪录，而 pushState 是创建新的历史纪录

Большой парень: Помимо этих двух историй API, какие еще существуют API?

window.history.back()//后退
window.history.forward()//前进
window.history.go(1)//前进一部，-2回退两不，window.history.length可以查看当前历史堆栈中页面的数量

Большой парень: Как контролировать эти операции?

Я: всякий раз, когда история просмотра (то есть история) одного и того же документа изменяется, событие popState будет запускаться, пока мы слушаем событие

window.addEventListener('popstate', function(event) {
});

Большой Брат: За всем можно следить, ты уверен?

Я: Простой вызов метода pushState или метода replaceState не приведет к этому событию. Оно будет вызвано только тогда, когда пользователь нажимает кнопки браузера «назад» и «вперед» или при использовании js для вызова методов «назад», «вперед» и «перейти».

Большой парень: Так как же отслеживать изменения pushState и replaceState?

Я: Мы можем создать 2 совершенно новых события с именами pushState и replaceState, и мы можем прослушивать их глобально.

//创建全局事件
var _wr = function(type) {
   var orig = history[type];
   return function() {
       var rv = orig.apply(this, arguments);
      var e = new Event(type);
       e.arguments = arguments;
       window.dispatchEvent(e);
       return rv;
   };
};
//重写方法
 history.pushState = _wr('pushState');
 history.replaceState = _wr('replaceState');
//实现监听
window.addEventListener('replaceState', function(e) {
  console.log('THEY DID IT AGAIN! replaceState 111111');
});
window.addEventListener('pushState', function(e) {
  console.log('THEY DID IT AGAIN! pushState 2222222');
});

Наконец

На этом задача успешно решена. На самом деле, я ответил на него только в настоящем интервью, спросив меня, какие API существуют в истории, а потом я действительно не могу. Али, интервьюеры, поэтому, пожалуйста, помните: если вы пишете что-то в своем резюме, убедитесь, что вы это очень хорошо понимаете, в противном случае не пишите этого, иначе вы рано или поздно обнаружите тот факт, что вы не очень хорошо знаете Что ж.

Тогда я желаю вам всем перейти на удовлетворительное устройство!

Ссылаться на:Как прослушивать изменения URL