jQloader 開源，集成 ajax、history、loading、orderTemplate

JohnLui 發布于2019-08-19 18:44 / 447人閱讀

摘要：一款精簡而豐富的微型框架，非常適合以為核心的項目使用。并集成指令模板進度條效果等功能。雖然支持載入頁面的運行，但是由于安全限制以及可能出現的重復運行的問題，建議將所有寫在主頁面，事件以委托方式綁定。使用模式請求頁面，這樣可以保證是完全重載。

jQloader v0.2.3

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

Home

https://moerj.github.io/jQloader

Features

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

動態加載，ajax 動態加載html頁面

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

路由機制，路由地址以#號連接在瀏覽器地址欄

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

Install

引入依賴 jQuery 或者 Zepto

HTML-Order jq-include

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

jq-router

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

用途：
呈現ajax頁面的容器，用于顯示地址欄#xxx.html部分的數據，如果頁面上沒有路由容器，則首次加載忽略路由地址。

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

可以直接使用 a 標簽來請求一個頁面，當你使用了 load 屬性時，會屏蔽 herf 屬性。
a 標簽的錨點功能依然保留，但點擊后標簽不會改變地址欄，因為#號已被路由功能占用。_to be optimized_

私有屬性：

load 點擊后請求的url地址

to 請求到的頁面存放容器，不設置時默認存放在 jq-router 容器

支持所有 Options 參數，屬性參數可以為空，例如：

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()

GPU云服務器云服務器 ajax_history jquery_ajax_load orderTemplate jQloader

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79937.html

Ajax局部頁面刷新和History API結合的陷阱

摘要：對于那些老網站或者老項目來說全盤改造成并不現實，于是就有了局部頁面刷新這個解決方案。如果不知道局部頁面刷新是何物請看這里，這里和這里。但實際上，第一次后退無法還原的內容陷阱，第二次后退頁面刷新了一切恢復最初的樣子。 ajax在現代網站已經得到非常普遍地應用，主要的好處大家都知道（異步加載數據，不用刷新整個瀏覽器，更小的數據傳輸尺寸）。對于那些老網站或者老項目來說全盤改造成ajax并不現...

JasinYip 2019-08-20 10:14 評論0 收藏0
vue 模仿今日頭條demo

vue 頭條 demo 寫在前面總結一下寫 demo 過程中遇到的一些問題，方便自己的學習總結！如有錯誤，還請指正！一直想學習使用 vue ，并準備以后在實際項目使用，之前跟著慕課網黃軼老師敲了一下餓了么商品購買頁的demoele效果預覽該 demo 借鑒自 hcy1996-github 這個項目，但內部內容，布局風格，完全不同，只為共同學習，共同交流數據接口直接打開今日...

simpleapples 2019-08-21 12:03 評論0 收藏0
PJAX是什么鬼【轉載】

摘要：實際的效果見沒有勾選的時候，點擊鏈接是跳轉的。為了支持，一個是在加載的時候判斷瀏覽器是否支持另一個是當發現請求一段時間沒有回復的時候可以設置參數，直接做頁面跳轉。背景目前看到的很多的pc端頁面點擊頁面某塊鏈接的時候，原本應該是頁面的某個部分更新的，但是卻整個頁面刷新，整個頁面都閃了一下。特別是看某些圖集的頁面，一個頁面本來就幾十張圖看，看完眼睛都閃瞎了。用ajax加載數據可以解決這...

jindong 2019-08-20 13:58 評論0 收藏0