フロントエンドルーティングの実装とその基本原理の紹介 (例付き)-jsチュートリアル-php.cn

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

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)
#HTML5 では、
window.history

# #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: &#39;/&#39;,
            content: &#39;home page&#39;
        }
    }

    /*
     * 启动路由功能
     */
    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
組み込みメソッドはありません。ページのステータス情報は別途保存する必要があります	ページ情報が保存されるとき履歴スタックにプッシュされると、カスタマイズされた情報を伴うことができます
## によって制限されます#ページ情報を履歴スタックにプッシュするときに、カスタマイズされた情報を伴うことができます		実用性
通常、サーバーを変更する必要があります