ode pattern -ルートオブジェクトによってpopstateを処理する

Craftkitアプリケーションでは、ルーティングはRootViewController、ビューコントローラの特別なタイプによって管理されます.
この関数はpopstateイベントを扱うためのインターフェースを定義するresolveRoutingRequest(route) メソッド.
独自のRootViewControllerを実装する場合は、このメソッドを実装する必要があります.
ルーティング要求はルートオブジェクトによってカプセル化され、メソッドに渡されます.

ルートオブジェクト

パーム
DESC
ランチ
RootViewControllerから呼び出された場合にTRUE
パス
パースパス
イベント
これがブラウザによって呼び出された場合に
解析と正規化Route.path RootViewController実装の責任です.(これはlocation.pathname )
履歴を正しく制御するには、popstateイベントをチェックし、次のようにして起動します.

let event  = route ? route.event  : null;
let launch = route ? route.launch : false;

if( launch ){
    // your are in launching sequence, and you should update history
    window.history.replaceState({},title,path);
}else{
    if( !event ){
        // called by browser back/forward with popstate event
        window.history.pushState({},title,path);
    }
}

これは熟語です.
アプリケーションのrootViewControllerを実装するたびに、この種のブロックを作成します.

例

class Apple extends Craft.UI.View {
    template(componentId){
        return `
            <div class="root">🍎</div>
        `;
    }
}
class Orange extends Craft.UI.View {
    template(componentId){
        return `
            <div class="root">🍊</div>
        `;
    }
}
class PageController extends Craft.UI.DefaultRootViewController {
    constructor(options){
        super(options);
        this.data = {
            map: {
                apple: new Apple(),
                orange: new Orange()
            }
        };
    }
    resolveRoutingRequest(route){
        let path = route.path || 'apple'
        let view = this.data.map[path];
        this.replaceView(view);
        if( route.launch ){
            // launching the app
            window.history.replaceState({},'','#/'+path);
        }else{
            if( !route.event ){
                // in app navigation
                window.history.pushState({},'','#/'+path);
            }
        }
    }
}

次のように、この例のコードを遊び場で実行できます.

var rootViewController = new PageController();
Craft.Core.Context.setRootViewController(rootViewController);

rootViewController.bringup();

bringup メソッドは、popstateからルートオブジェクトを解決し始めます.
この場合、デフォルトビュー🍎 を示します.
次に、フォーカスURLバー(コマンドL)を変更し、'オレンジ'に'リンゴ'を変更します.
🍊 を示します.
プッシュバックボタン🍎 再び表示されます.

ノート

パスの正規化はクラフトでサポートされています.コア.ハッシュルータとクラフト.コア.パフォーターこれはGOF戦略パターンです.
HashRouterはデフォルトです.アプリケーションのブート時に設定できます.

// in your bootloader

Craft.Core.Bootstrap.boot({
    router : Craft.Core.HashRouter,
    didBootApplication : function(){
        Craft.Core.Defaults.ALLOW_COMPONENT_SHORTCUT = true;
        let rootViewController = new PageController();
        Craft.Core.Context.setRootViewController(rootViewController);
        rootViewController.bringup();
    }
})

// in your RootViewController 

let normalized_path = Craft.Core.Context.getRouter().normalize(path);

if( route.launch ){
    window.history.replaceState({},'',path);
}else{
    if( !route.event ){
        window.history.replaceState({},'',path);
    }
}

ブート設定の詳細についてはgithubを見てください.
https://github.com/craftkit/craft-uikit