フロントエンドルーティングの概要

1742 ワード

ルート

*フロントエンドルーティングの実装は、本質的にurlの変化を検出し、urlアドレスをキャプチャし、解析してルーティングルールをマッチングする.
フロントエンドルーティングは、「ページの更新を要求しない」ことを実現し、ルーティングの実現方法は以下の2つあります.
1、URLのhash("#")を利用する2、History interfaceを利用してHTML 5に新たに追加する方法:history.どうやって?replaceState
一、hash 1、hashすなわちURL中の"#"文字の後ろの部分.

①          ，    URL   hash，       id（ name） hash         ；

 ②hash       ，              ；

 ③hash                  ；

 ④  window.location.hash       hash 。

window.location.hash値の変化はブラウザのアドレスバー(#後ろの部分が変化する)に直接反応するとともに、ブラウザのアドレスバーhash値の変化もwindowをトリガーする.location.hash値の変化によりonhashchangeイベントがトリガーされます.
2.hashchangeイベント(IE 8はこのイベントをサポートしている)

① URL         ，   hashchange  （  #     URL  ，  #  ）

②hashchange     ，      hash    URL（oldURL） hash    URL（newURL）    ：

window.addEventListener('hashchange',function(e) { 
      console.log(e.oldURL); 
      console.log(e.newURL);
  },false);

js単一ページルーティング実装リファレンスリンク:(http://blog.csdn.net/qq_27965129/article/details/53270256)二、history 1、history.pushState(stateObj, title, url);
この方法では、現在のセッションの履歴スタックにレコードが挿入され、stateObjはユーザーがカスタマイズしたオブジェクトであり、いくつかの有用なデータを記録するために使用されます.titleはタイトル情報であり、3番目のパラメータはurl情報です.例えば個人情報を保存してhistoryを実行することができます.pushState({id: 1}, ‘name: ff’, ‘?info=person’);
2、history.replaceState(stateObj, title, url);
この方法はpushStateと同様で、唯一異なるのは、この操作を実行すると、ブラウザが追加ではなくセッション履歴スタック内のレコードを置換し、特定のシーンで適用されることです.
単純な関数をカプセル化できます

function preview(id, isSwitch) {      
    var stateObj = {id: id};  
    var operation = isSwitch ? 'replaceState' : 'pushState';  
//                       
    window.history[operation](stateObj, 'name: ' + id, '?preview=' + id);  
}

画像の平均色をCanvasで取得

WeChatウィジェットのイベントの共有と転送