negl機能一覧 / Exports / Page

Interface: Page

Page モジュールはページ毎の処理を実行する際に使用します。 data-page に設定された値によって Page モジュールのデフォルトエクスポートした関数が実行されます。基本的な使い方はこちらをご覧ください。

Page モジュール使用時の注意点

初回ローディングの際は引数は渡りません。

画面の初回ローディングの際は export default 関数には引数は渡りません。そのため、import 文によって必要なモジュールをインポートして利用してください。

// import 文で negl の機能を取得
import { world } from "negl";
 
// 画面の初回ローディングの際は引数は渡ってこない。
export default async function() {
  const someEffect = world.getObByEl(".some-effect");
}

Page モジュールでエクスポートした関数はページトランジション時にアクセス可能です。

negl にはリロードなしで画面遷移を行うページトランジション機能が存在します。
このページトランジション内ではPageモジュールでエクスポートされた関数にアクセスすることができます。

他のページから index.html ページへトランジションする時

index.html

<!-- .page-container で home を指定-->
<div class="page-container" data-page="home"></div>

page/home.js

// トランジション 次のページのOBインスタンス挿入後
hook.on(hook.T_BOTH_OB_EXIST, runPageDefault, { priority: 1000 });
async function runPageDefault(state) {
 await state.next.page?.default?.(state);
}

index.js

// 次のページのOBインスタンス挿入後
hook.on(hook.T_BOTH_OB_EXIST, runPageDefault, { priority: 1000 });
async function runPageDefault(state) {
 await state.next.page?.default?.(state);
}

また、Page モジュールでエクスポート（export）しているメソッドはページトランジション時に T_*フック から実行できます。
*current.page と next.page に現在ページと次のページの Page モジュールが渡ってきますので、このプロパティからアクセスしてください。

Table of contents

Properties

• default

Properties

default

• default: (args?: TransitionState) => void | Promise<void>

Type declaration

▸ (args?): void | Promise<void>

デフォルトエクスポートした関数は画面の初回ロード時に実行されます。

Parameters

Returns

void | Promise<void>