在Laravel應用程式中如何使用pjax進行頁面加速

說明：PHPHub 使用pjax 來加速網頁的載入, 這篇文章是在開發完此功能後做的筆記.

相關推薦：《laravel教學》

什麼是Pjax

        .--.
       /    \
      ## a  a
      (   '._)
       |'-- |
     _.\___/_   ___pjax___
   ."\> \Y/|<&#39;.  &#39;._.-&#39;
  /  \ \_\/ /  &#39;-&#39; /
  | --&#39;\_/|/ |   _/
  |___.-&#39; |  |`&#39;`
    |     |  |
    |    / &#39;./
   /__./` | |
      \   | |
       \  | |
       ;  | |
       /  | |
 jgs  |___\_.\_
      `-"--&#39;---&#39;

專案地址見 這裡, 官方的介紹:

pushState ajax = pjax

詳細的解釋請看 知乎上的這個問題, 或自己去查閱資料.

簡單點描述, 就是利用 ajax 技術去伺服器取得文件, 在不刷新瀏覽器頁面的情況下, 更新目前頁面, 並確保頁面的js 和 css 等 assets 檔案不會重複載入, 然後利用瀏覽器提供的 pushState 功能, 對URL 進行更新, 並能保證用戶透過點擊back 按鈕回溯到歷史頁面.

注意: 並不是所有瀏覽器都支援pushState, 關於瀏覽器的相容請見這裡, 當瀏覽器不相容的時候, 會自動使用原始的瀏覽方式進行訪問.

#為什麼要使用Pjax

因為不需要整個頁面刷新, 並且 assets 檔案都不需要重新載入, 很大程度提高了頁面的載入速度.

服務端安裝 rcrowe/Turbo

使用package rcrowe/Turbo .

安裝 rcrowe/Turbo

#在 composer.json 裡的 require 屬性下新增:

"rcrowe/turbo": "0.2.*"

然後 composer update 或 composer install

##設定 

Providers

## app/config/app.php

 檔, 在選項 providers 陣列裡面加入:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&quot;Turbo\Provider\Laravel\TurboServiceProvider&quot;,</pre><div class="contentsignin">登入後複製</div></div>下載pjax.js

##在 

public\js

 資料夾下

wget https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js

然後在模版裡面載入此檔案

<script src="{{ cdn(&#39;js/jquery.pjax.js&#39;) }}"></script>

最後頁面裡呼叫:

$(document).ready(function(){    $(document).pjax('a', 'body');});

上面的程式碼解釋是, 把所有的 

a

 標籤的點擊事件截取, 如果目前瀏覽器支援 

pjax 的話, 傳送一個ajax 請求, 並把參數_pjax=body 帶過去.#如果一起順利的話, 在Chrome 的debuger 裡能看到類似於這樣的請求:

至此, 已經順利配置完畢.##添加載入動畫

#接下來要來新增一個頁面載入的動畫, 效果如下:

#新增 

nprogress

################使用 rstacruz/nprogress 來實現.######新增的方法是 下載 檔案, 然後把 ###nprogress.js### 和 ####nprogress.css### 加入頁面中:###

    <script src=&#39;nprogress.js&#39;></script>    <link rel=&#39;stylesheet&#39; href=&#39;nprogress.css&#39;/>

:####

$(document).ready(function(){    $(document).pjax('a', 'body');    $(document).on('pjax:start', function() {
      NProgress.start();  });  $(document).on('pjax:end', function() {
      NProgress.done();
      self.siteBootUp();  });});

###呼叫#######修改上面的程式碼, 修改後的程式碼如以下:###rrreee###這樣的話, 每一次點擊頁面的時候就會有很酷炫的效果了## #

以上是在Laravel應用程式中如何使用pjax進行頁面加速的詳細內容。更多資訊請關注PHP中文網其他相關文章！