フロントエンドルーティングの実装とその基本原理の紹介 (例付き)

この記事では、フロントエンド ルーティングの実装とその基本原理について説明します (例を示します)。必要な方は参考にしてください。

1. フロントエンド ルーティング

最新のフロントエンド開発で最も人気のあるページ モデルは、SPA シングルページ アプリケーション アーキテクチャです。シングルページ アプリケーションとは、メイン ページが 1 つだけあるアプリケーションを指します。DOM コンテンツを動的に置き換えると同時に URL アドレスを変更することで、マルチページ アプリケーションの効果をシミュレートします。ページの切り替え機能はフロントによって直接実行されます。 -end スクリプト。レンダリング後のバックエンドではなく、フロントエンドは表示のみを担当します。フロントエンド トロイカの Angular、Vue、および React はすべて、このモデルに基づいて実行されます。 SPA は、フロントエンド ルーティング メカニズムのおかげで、マルチページ アプリケーションの効果をシミュレートできます。

フロントエンド ルーティングは、その名前が示すように、バックグラウンドにリクエストを送信せずに、フロントエンド テクノロジを通じて複数のページの効果を直接実現できます。 angularjsのui-router、vueのvue-router、reactのreact-routerはすべて、この関数の具体的な実装です。

フロントエンド ルーティングは非常に優れているため、注意深く研究する必要があります。

2. 2 つの実装方法とその原理

両方の方法がサポートされており、一般的なルーティング プラグインで切り替えることができます。たとえば、angularjs1.x では、次のコードを使用できます。ハッシュ モードから H5 モードに切り替える:

$locationProvider.html5Mode(true);
HTML5 ルーティング モードに切り替えます。これは主に、URL アドレスに含まれる # によって引き起こされる問題を回避するために使用されます。

1.HashChange

1.1 原則

アンカー ポイントの配置原則により、HTML ページを更新せずにリダイレクトできます。トリガー後は、さらに # が表示されます。 URLアドレス。 このようにして、ページ アンカー ハッシュが特定のプリセット値に変更されると、コードと基本的なルーティングを通じて、対応するページ DOM の変更がトリガーされます。アンカー ハッシュに基づくルーティングは比較的直感的であり、一般的なフロントエンド ルーティング プラグインで最も一般的に使用される方法でもあります。

1.2 アプリケーション

angularjs 接続をクリックすると、コンソールに対応する情報が出力されることがわかります。

2.HTML5 HistoryAPI

2.1 原則

HTML5 の History API は、HTML5 のグローバル ヒストリー オブジェクトに追加された拡張メソッドです。ブラウザ。通常、ajax リクエストが戻るボタンからリクエスト前の状態に戻れない問題を解決するために使用されます。

HTML4 では、ページ履歴のジャンプを制御するために window.history オブジェクトがすでにサポートされています。

• history.forward()# などのメソッドが使用されます。 ##; //歴史を 1 つ進める

• ##history.back()

  //歴史を 1 つ戻る

  #history.go(n)
: //履歴の n ステップにジャンプします。n=0 はこのページを更新することを意味し、n=-1 は 1 ページ戻ることを意味します。

• #HTML5 では、

  window.history
オブジェクトが拡張され、新しい API が含まれています:

# #history.pushState(data[,title][,url])

;//履歴レコードにレコードを追加します

• history.replaceState(data[, title][,url])

  ;//履歴レコード内の現在のページの情報を置き換えます。

• history.state

  ;//現在のページの状態情報を取得できる属性です。

• window.onpopstate

  ;//ブラウザの戻るボタンがクリックされたとき、または js が forward()、back()、go を呼び出したときにトリガーされるイベントです。 () 。イベント オブジェクトは listen 関数に渡すことができ、event.state は、pushState() または replaceState() メソッドを通じて渡されるデータ パラメーターです。

• 2.2 アプリケーション

  ブラウザがページにアクセスすると、history.pushState() メソッドによって現在のアドレスのステータス情報が履歴スタックにプッシュされます。が呼び出されると、現在のアドレスのステータス情報が履歴スタックにプッシュされ、新しい状態がプッシュされると、履歴スタックの先頭にあるポインタが新しい状態を指します。その機能は単純に、URL アドレスが変更されてジャンプしたように見せるものとして理解できます。ユーザーがブラウザーの「進む」または「戻る」をクリックするか、HTML4 で履歴スタックを操作するメソッドを明示的に呼び出さない限り、グローバルの Popstate イベントはトリガーされません。 。

次の例では、ナビゲーション ボタンをクリックすると、URL アドレス バーが変更され、コンソールに応答情報が表示されることがわかります。

#3. ハッシュと履歴 API の比較

##比較

ハッシュ ルート

#履歴 API ルート #醜い 名前の制限ドキュメント内でのみ変更できますステータス保存パラメータ受け渡し機能## は、URL の全長 直接使用できます#互換性を実現するためのコードIE8 以降IE10 以降

3. シンプルなフロントエンド ルーティング プラグインを自分で構築する

ホイールを構築するということは、車に取り付けることではなく、荒野などを運転するときに追加のホイールを用意することです。ホイールの選択を間違えます。

次に、フロントエンド ルーティング プラグインを自分で実装してみましょう~

3.1 ハッシュベースのフロントエンド ルーティング プラグインmyHashRouter.js

私たちが達成したい機能は次のとおりです:

1. MyHashRouter.js ライブラリを導入します

2. when() メソッドを通じていくつかの異なるルーティング状態を定義します。 3. init() メソッドを通じてルーティング関数を開始します。

4. ナビゲーションをクリックしてフロントエンドのルーティング切り替えを実現します。

最初に、図に示すように、js スケルトンを作成します。

;(function() {
    function Router() {
        //记录路由的跳转历史
        this.historyStack = [];
        //记录已注册的路由信息
        this.registeredRouter = [];
        //路由匹配失败时跳转项
        this.otherwiseRouter = {
            path: '/',
            content: 'home page'
        }
    }

    /*
     * 启动路由功能
     */
    Router.prototype.init = function() {

    }

     /*
     * 绑定window.onhashchange事件的回调函数
     */
    Router.prototype._bindEvents = function() {

    }

    /**
     * 路由注册方法
     */
    Router.prototype.when = function(path, content) {

    }

    /**
     * 判断新添加的路由是否已存在
     */
    Router.prototype._hasThisRouter = function(path) {

    }

    /**
     * 路由不存在时的指定地址
     */
    Router.prototype.otherwise = function(path, content) {

    }

    /**
     * 路由跳转方法，主动调用时可用于跳转路由
     */
    Router.prototype.go = function(topath) {

    }

    /**
     * 用于将对应路由信息渲染至页面,实现路由切换
     */
    Router.prototype.render = function (content) {
     
    }

    var router = new Router();

    //将接口暴露至全局
    window.$router = router;
})();

ルーティング プラグインの作成が完了したら、デモでライブラリを導入し、

when()

メソッドを使用して複数のルーティング アドレスを登録し、

init () ルーティングを開始するメソッド。スクリプト部分のコードは次のとおりです。
Effect:Run

router-demo-hash.html

添付ファイルを選択してナビゲーション ボタンをクリックすると、URL アドレス バーとコンテンツ領域が同期して変化することがわかります。

3.2 History API に基づくフロントエンド ルーティング プラグインmyHistoryRouter.js

History API は IE10 未満のブラウザをサポートしていないため (その他)最近のほとんどのブラウザは基本的にこれをサポートしているため、init() メソッドの開始時に最初に可用性を判断します。基本的なコード フレームワークは、ハッシュ ベースのルーティング プラグインと一致しています。各メソッドの実装は書くのが難しくないので、ここでは詳しく説明しません。作成者独自のコード実装は、添付ファイル myHashRouter.js にあります。レベルは限られており、参照のみを目的としています。

3.3 統合手順

理解を容易にするために、プラグイン ライブラリの開発の場合、この例では 2 つのモードを分けて記述します。

ui-router

html5mode() メソッドを追加すると、 init() メソッドがルーティングを開始すると、さまざまなルーティング プラグの単一インスタンスが生成されます。これは、渡されたパラメーターに基づいて実行されます。これは、これを実現するための ファクトリー パターン と呼ばれるものです。 IV. 追記

ホイールを自分で作るのはとても簡単ですが、非常に重要です。ただし、ツールを理解するためには、基本的な原則が役に立ちます。

• この例では、ルーティング ツールの基本的なスケルトンを記述しているだけです。実際のルーティング ツールにはまだ多くの機能拡張が必要であり、個々の関数の複雑さは非常に高くなります。 ##パス 通常のマッチング

  ,
遅延読み込み
• ,

  複合ビュー,ネスト ビュー,ルート アニメーションなど興味のあるパートナーは、この例で提供されるフレームワークについて学習を進めることができます。

	#URL 文字列	#通常
通常、同じ		#URL アドレスは、次の場合に限り、自分で定義できます。同じドメイン名です ダウンロード可能で自由度が高くなります
URLアドレス変更	変更します変更可能またはnot
組み込みメソッドはありません。ページのステータス情報は別途保存する必要があります	ページ情報が保存されるとき履歴スタックにプッシュされると、カスタマイズされた情報を伴うことができます
## によって制限されます#ページ情報を履歴スタックにプッシュするときに、カスタマイズされた情報を伴うことができます		実用性
通常、サーバーを変更する必要があります

以上がフロントエンドルーティングの実装とその基本原理の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。