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

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 イベントはトリガーされません。 。

##比較

ハッシュ ルート

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

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

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

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

3.3 統合手順

ui-router

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

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

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

  ,
遅延読み込み
• ,

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