フロントエンドルーティングとは

1347 ワード
面接試験
従来のルーティングとは、ユーザがurlにアクセスすると、対応するサーバがこの要求を受信し、url内のパスを解析して対応する処理ロジックを実行することを意味する.これでルーティングの配布が完了しました.
一方、フロントエンドルーティングはサーバに関与せず、フロントエンドはhashまたはHTML 5のhistory APIを利用して実現され、一般的に異なるコンテンツの表示と切り替えに用いられる.
フロントエンドルーティングは2つです
  • ページをリフレッシュすることなくurlの変化を実現する
    • .
  • urlの変化を捉え、urlに従ってページ内容
    • を変更する
    hash
    hashはurlの#の後ろの部分で、サーバーは自動的にこの部分を無視しますが、フロントエンドはlocationを通過することができます.hashを取得します.hashが変化するとhashchangeイベントがトリガーされ、hashが変化すると異なるコンテンツの表示が可能になるコールバックを指定できます.
    hashを使用するメリットは、低バージョンのブラウザとIEブラウザをサポートすることです.
    history API
    HTML 5の新しいAPIで、ブラウザのセッション履歴を操作できます.
  • pushStateとreplaceState 
    • history.replaceState(dataObj,title,url);
history.pushState(dataObj,title,url);

    どちらの方法もブラウザの履歴スタックを操作するために使用されます.pushStateは現在の履歴スタックのスタックトップにデータを追加し、replaceStateは現在のスタックトップのデータを置き換えます.
    どちらの方法でもurlを置換し、ページをリフレッシュしません.
  • popstateイベントアクティブ履歴エントリが変更されるとpopstateイベントがトリガーされます.

    • 注意すべきはhistoryを呼び出すことです.义齿replaceState()はpopstateイベントをトリガーしません.ユーザーがブラウザのロールバックボタンをクリックしたり(Javascriptコードでhistory.back()を呼び出したり)ブラウザの動作をしている場合にのみ、イベントがトリガーされます.
    つまり、history APIを使用してブラウザのurlを変更する場合、historyを呼び出すなどのpopstateイベントをトリガーする追加のステップが必要です.back()またはhistory.forward()などの方法.
    JavaScriptで大量のデータを処理する方法
    html 5-canvasとjavascriptを利用して3次元星空効果を生み出すコードが素晴らしいです!