目次
- はじめに
- defunktを使ってみよう！
- まとめ
1. はじめに
お久しぶりです。なちです。前回はPjaxの簡単な説明と「falsandtru版pjax」の導入方法についての記事を書きましたが、覚えていらっしゃいますか。（前回の記事はこちら）今回はjQueryベースののプラグイン「defunkt版jquery-pjax」の導入をふわっと学んでいきましょう。
2. defunktを使ってみよう！
プラグインバージョン
jquery-pjax 2.0.1
対応環境
- jQuery必須（v1.8以上）
- ブラウザ指定なし
インストール
$ npm install jquery-pjax
「/node_modules/jquery-pjax/」のなかに「jquery.pjax.js」が入っていることを確認します。
プラグイン読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/js/jquery.pjax.js"></script>
インストールした「jquery.pjax.js」を任意のディレクトリに配置しhtmlファイル内で読み込みます。jQueryは1.8以上のバージョンを読み込みましょう。
JS基本形
$(document).on('click', 'a.pjax', function(e){ // 後からリンク要素が足されるかもしれないので、$(document)にしてお葱、イベント対象になる要素のクラスを指定します。
e.preventDefault();
var href = $(this).attr('href');
$.pjax({
url: href,
container: '#pjax-wrapper', // 現在のページの入れ替える対象の要素のid（class）
fragment: '#pjax-wrapper'// 次のページの入れ替える対象の要素のid（class）
});
});
取得可能イベント
対象のリンクボタンを押した場合の処理
| イベント名 | メモ |
|---|---|
| click | アクティブなリンクから起動 |
| beforeSend | XHRヘッダーの設定が可能 |
| start | |
| send | |
| clicked | pjaxが開始された後に起動 |
| beforeReplace | HTMLをサーバーからロードされたコンテンツに置き換える前 |
| success | サーバーからロードされたHTMLコンテンツを置き換えた後 |
| timeout | オプションで設定したタイムアウトの後。キャンセルしない限りハードリフレッシュする |
| error | ajaxエラーの場合。キャンセルしない限りハードリフレッシュする |
| complete | 結果にかかわらず、ajaxの後に起動 |
| end |
ブラウザの戻る・進むボタンを押した場合の処理
| イベント名 | メモ |
|---|---|
| popstate | ブラウザの戻る進むなどを行った時に発生 |
| start | コンテンツを置き換える前 |
| beforeReplace | HTMLをキャッシュからのコンテンツに置き換える直前 |
| end | コンテンツ交換後 |
詳しくはこちら。
イベント追加方法
$(document).on('pjax:popstate', function);
発火したいタイミングを設定して、関数を作成してください。
オプション
設定できるオプションについて説明しているページはこちらです。「jquery.pjax.js」の中の166行目あたりから「options.XXXXX」で記載されている箇所が該当箇所です。
オプション設定方法
$.pjax({
url: href,
container: '.contents',
fragment: '.contents',
scrollTo: false,
timeout: 2000
});
3. まとめ
「defunkt版pjax」の開発をGitHubで確認すると、一番最近で2017年となっていました。重要なバグが発生しない限り修正は行わないようなので、その時々のブラウザで問題がないかを使用の時に確認し、何か問題があれば連絡をするのが良いようです。
前回導入した「falsandtru版pjax」に比べて「defunkt版pjax」はイベントもオプションも豊富です。使いこなせるかは置いときまして、ブラウザバックのイベントも用意されているのは嬉しいです。他のプラグインではaタグに対してPjaxのイベントを紐づけるのですが、「defunkt版pjax」はaタグでなくてもクリックイベント毎にPjaxの処理を割り当てることができます。jQueryに依存していますが、そのおかげでコードをシンプルに書くことができ、普段jQueryで開発をしている人にとっては導入しやすいプラグインだと思いました。「falsandtru版pjax」はシンプルな遷移でしたが、「defunkt版pjax」は複雑なアニメーションを挟んだ遷移やクリック要素ごとに別の動作を付与する場合に向いていると思いました。
前回冒頭で、それぞれの特徴を比較しているページを紹介した時に、「falsandtru版pjax」の方が色々できそうだと感じましたが、取得イベントの多さや、イベントの割り当てられる要素の違いから汎用性が高いのは「defunkt版pjax」なのではないかと感じました。
次回は「Barba.js」の導入に挑戦します！そして、3つの方法を挑戦したことで分かったことについてまとめたいと思います！
