シングルページアプリケーション
シングルページアプリケーションは、o-appコンポーネントをブラウザのアドレスバーにバインディングし、WebページのURLとアプリ内のページパスを同期させます。シングルページアプリケーションを有効にすると：
- ウェブページを更新しても現在のルーティング状態が維持される
- アドレスバーのURLをコピーして別のブラウザやタブで開いても、アプリケーションの状態を復元できる
- ブラウザの進む/戻るボタンが正常に動作する
基本的な使い方
公式の o-router コンポーネントで o-app コンポーネントを囲むだけで、シングルページアプリケーションが実現できます。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>router test</title>
<script src="https://cdn.jsdelivr.net/gh/ofajs/ofa.js/dist/ofa.mjs" type="module"></script>
</head>
<body>
<l-m src="https://cdn.jsdelivr.net/gh/ofajs/ofa.js/libs/router/dist/router.min.mjs"></l-m>
<o-router>
<o-app src="./app-config.js"></o-app>
</o-router>
</body>
</html>fix-body 属性
fix-body 属性を追加すると、o-router は自動的に html と body のスタイルをリセットし、デフォルトの margin と padding を削除します。
<o-router fix-body>
<o-app src="./app-config.js"></o-app>
</o-router>これは以下のシナリオで特に便利です：- o-appがビューポートを完全に埋める必要がある
- アプリケーションがページの唯一のコンテンツである場合
例
// アプリケーションのホームページアドレス
export const home = "./home.html";
// ページ切り替えアニメーション設定
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
export const loading = () => {
const loadingEl = $({
tag: "div",
css: {
width: "100%",
height: "100%",
position: "absolute",
zIndex: 1000,
},
html: `
`,
});
setTimeout(() => (loadingEl[0].style.width = "98%"));
loadingEl.remove = () => {
loadingEl[0].style["transition-duration"] = "0.1s";
loadingEl[0].style.width = "100%";
setTimeout(() => {
\$.fn.remove.call(loadingEl);
}, 200);
};
return loadingEl;
};
{{val}}
Go to About
About ofa.js
動作原理
シングルページアプリケーションはブラウザのハッシュモードに基づいて実装：
- アプリ内でページが切り替わると、
o-routerは自動的にアドレスバーのハッシュ値を更新します（例：#/about.html） - ユーザーがページを更新したり URL でアクセスしたりすると、
o-routerはハッシュ値を読み取り、対応するページを読み込みます - ブラウザの進む／戻るボタンはハッシュの変化をトリガーし、アプリのページナビゲーションを制御します
URL 変化の例
アプリケーションに home.html と about.html という2つのページがあると仮定します：
| ユーザー操作 | アドレスバーの変化 |
|---|---|
| アプリを開く | index.html → index.html#/home.html |
| Aboutページに移動 | index.html#/home.html → index.html#/about.html |
| 戻るをクリック | index.html#/about.html → index.html#/home.html |
| ページを更新 | 現在のhashを維持 |
- シングルページアプリケーションは、1つの
o-appコンポーネントとのみ連携して使用できます