jQloader 開源，整合 ajax、history、loading、orderTemplate 的頁面模組化工具

moer發表於2016-07-08

jQloader v0.2.3

一款精簡而豐富的微型框架，非常適合以 jQuery 為核心的專案使用。
它的核心功能為 ajax + pushState 實現非同步載入、路由、瀏覽器歷史。並整合指令模板、進度條、loading效果等功能。

Home

https://moerj.github.io/jQloader

Features

  • 指令模板，html 頁面直接引入其他頁面

  • 動態載入，ajax 動態載入html頁面

  • 歷史記錄，ajax 頁面會存入瀏覽器歷史記錄

  • 路由機制，路由地址以#號連線在瀏覽器位址列

  • 自動載入效果，包括：進度條、蒙層等方式

Install

引入依賴 jQuery 或者 Zepto

<script src="jquery.js"></script>
<script src="jQloader.js"></script>

HTML-Order

jq-include

引入頁面
ajax 方式請求一個頁面，並放入在該容器中

<!-- somePage頁面將會以 ajax 方式加進來 -->
<jq-include src="./somePage.html"></jq-include>

jq-router

路由容器
整個瀏覽器視窗只能有一個jq-router，多餘的將會被忽略。

用途：
呈現ajax頁面的容器，用於顯示位址列#xxx.html部分的資料，如果頁面上沒有路由容器，則首次載入忽略路由地址。

<!-- 把 loadPage 方法請求的資料塞入這裡 -->
<jq-router></jq-router>

提示：
當你需要一個頁面有多個容器呈現其他 ajax 頁面資料時，請使用 jq-include 指令。
jq-router 指令僅僅是用來讀取瀏覽器歷史資料和路由頁面的。

a

可以直接使用 a 標籤來請求一個頁面，當你使用了 load 屬性時，會遮蔽 herf 屬性。
a 標籤的錨點功能依然保留，但點選後標籤不會改變位址列，因為#號已被路由功能佔用。_to be optimized_

私有屬性：

  • load 點選後請求的url地址

  • to 請求到的頁面存放容器，不設定時預設存放在 jq-router 容器

<!-- 將hellow頁面載入到id為container的容器中，頁面名稱顯示為hellow jQloader -->
<a load="./hellow.html" to="#container" title="hellow jQloader"></a>

支援所有 Options 引數，屬性引數可以為空，例如：

<a strict loading></a>
<!--等價於-->
<a strict="true" loading="true"></a>

<a></a>
<!--等價於-->
<a strict="false" loading="false"></a>

Options

history

寫入瀏覽器歷史，預設 true

progress

載入時顯示進度條，預設 true

loading

顯示載入提示，並鎖定介面，預設 false

cache

ajax開啟快取，預設 true

async

ajax請求非同步，預設 true

title

請求資料後，改變瀏覽器tab頁名稱，預設 null

strict

嚴格模式載入 ajxa，預設 false
使用嚴格模式進行 ajxa 請求，此時請求會完全過載整個頁面，防止重複js執行。
雖然支援 ajax 載入頁面的 js 執行，但是由於安全限制以及可能出現的 js 重複執行的問題，建議將所有 js 寫在主頁面，事件以委託方式繫結。
若你還是想在 ajax 頁面中寫 js， 有2種辦法確保安全：

  • 請確保這部分 js 沒有對主頁面和全域性物件有事件繫結，不然很可能再次開啟此頁面時會重複繫結事件。

  • 使用 strict 模式請求頁面，這樣可以保證是完全過載。

API

loadPage

載入頁面
ajax 方式載入頁面到容器中

// 在一個 div 容器中載入頁面
$(`div`).loadPage({
    url: `url string`,  //請求地址，必須
    history: true,      //寫入瀏覽器歷史，預設 true
    progress: true,     //載入時顯示進度條，預設 true
    loading: false,     //顯示載入提示，並鎖定介面，預設 false
    cache: true,        //開啟快取，預設 true
    async: true,        //非同步，預設 true
    title: `string`,    //瀏覽器tab頁名稱，預設 null
    strict: false       //嚴格模式載入 ajxa，預設 false
},function(){
    // callBack
})

loadFinish

載入頁面後的回撥
目標容器使用 loadPage 或者指令方式載入完資料後的回撥

$(`div`).loadFinish(function () {
    // loadPage 完成，執行的程式碼
})

progressBar

載入進度條
loading 狀態時頂部的進度條，頁面載入時會自動執行。(注意：除非你有其他用途，通常進度條並不需要你去手動操作)

$.progressBar
.star()             //進度條開始
.stop()             //暫停
.reset()            //重置進度條 0%
.finish()           //走完進度條 100%
.setColor(`color`)  //設定進度條顏色

loadingMask

手動開啟一個 loading 效果並鎖定介面。
支援 FontAwesome 圖示庫，當引入後會有載入特效。

$.loadingMask
.show()
.hide()

相關文章