ワイズリマインダー

フロントエンドだけでページを推移させる

JSONデータを取得して、一覧ページや登録・編集ページを表示させたい時など
ページを切り替えるたびにデータの再取得をしなくてよい場合に使用するテクニック

【向いている状況】
・限られた人がJSONデータを読み書きする
・JSONデータが比較的大きい

// ページ表示時
window.addEventListener('load', () => pageClosure.load());
// ブラウザバック・フォワード時
window.addEventListener('popstate', () => pageClosure.load());

// ページ内でAを表示させたい時
const clickA = () => pageClosure.jumpA();
// ページ内でBを表示させたい時
const clickB = () => pageClosure.jumpB();

/**
 * ページの切り替え
 */
const pageClosure = (() => {
  return {
    load: function ()  {
      if (location.search.match(/■□■URLで判別■□■/)) {
        this.printA();
      } else {
        this.printB();
      };
    },
    jumpA: function () {
      // 履歴に追加
      const queryObj = { 'a':1, 'b':'page1' }
      const queryParams = new URLSearchParams(queryObj);
      window.history.pushState(queryObj, null, queryParams.toString());
      // Aを表示する
      this.printA();
    },
    jumpB: function () {
      // 履歴に追加
      const queryObj = { 'a':2, 'b':'page2' }
      const queryParams = new URLSearchParams(queryObj);
      window.history.pushState(queryObj, null, queryParams.toString());
      // Bを表示する
      this.printB();
    },
    printA: () => {
      /*** ここにAを表示する処理 ***/
    },
    printB: () => {
      /*** ここにBを表示する処理 ***/
    },
  };
})();

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。