互聯網開(kāi)發&品牌全案設計(jì)
12年(nián) 實戰經驗,品質服務
最近(jìn)有(yǒu)個(gè)項目涉及到(dào)了(le)這(zhè)個(gè)問(wèn)題,以前不(bù)管是±(shì)數(shù)據量多(duō)或者量少(shǎo)一(yī)直用(yòng)的(de)是(shì)後端π的(de)分(fēn)頁方式,從(cóng)來(lái)沒想過直接前端分(fēn)頁。偶然有(yǒu)這(zhè)樣的(de)要(yào)求λ。就(jiù)在網上(shàng)翻閱了(le)一(yī)些(xiē)資料。下(xià)面是(shì)蘇州網站(zhàn)制(zhì≤)作(zuò)小(xiǎo)編搜集的(de)一(yī)些(xiē)信息,與大(dà)家(jiā)分(fēn)享$之。
前端分(fēn)頁一(yī)般用(yòng)于數(shù)據量較小(xiǎo)的(de)情況,一(yī)→次請(qǐng)求把數(shù)據全部從(cóng)後端請(qǐng)求回來(lái)。後端分(fēn)頁适用(yòng)于數(shù)據量偏大(dà)時(shí)的(de®)情況,減小(xiǎo)請(qǐng)求傳輸壓力。前端需要(yào)将每頁條數(shù)和(hé)當前頁傳給後端,後端根據條件(jiàn)查詢出數(shù)據再傳給前端,包括總條數(shù)、當前頁、每頁多(duō)少(shǎo)條數(shù)據等。
前端分(fēn)頁減少(shǎo)了(le)後台的(de)代碼量。但(dàn)卻要(yào)犧牲讀(dú)數(shù)據的(de)速度。比如π(rú)10萬條記錄,後台讀(dú)出發給前台。前台再分(fēn)析後分(fēn)頁,當然翻頁可(kě)以直接使用(yòng)而不(bù)需再δ訪問(wèn)後台。但(dàn)是(shì)現(xiàn)在都(dōu)講究速度。如(rú)果5秒(miǎo)還(hái)出不(bù)來(lái)數(shù)據,也(yě)會(huì)讓用(yòng→)戶等不(bù)及。後台分(fēn)頁,雖然需要(yào)每次都(dōu)訪問(wèn)數(shù)據。但(dàn)一(yī )般,後端速度都(dōu)比較不(bù)錯(cuò),如(rú)果每頁數(shù)據量都(dōu)不(bù)大(dà)的(de)情況下(xià),速度就(jiù)好(hǎo)多(duō)了(le)。而且後端程序語言分(fēn)頁的(de)功能(néng)相(xiàng)對(duì)于前端而言要(yào)更加的(de)強大(dà)。
但(dàn)是(shì)對(duì)于局部刷新的(de)數(shù)據采用(yòng)前端分(fēn)頁用(yòng)戶δ體(tǐ)驗較好(hǎo),比如(rú)評論列表,贊用(yòng)戶列表。當然也(yě)有(yǒu)2種模式結合的★(de),比如(rú)微(wēi)博列表加載數(shù)據,前10頁是(shì)ajax獲取分(fēn)頁數(shù)據,後10頁是(shì)後端分(fēn)頁,在前10頁上(shàng)的(de)a标簽上(shàng)也(yě)加上(shàng)src地(dì)址利于蜘₩蛛抓取,但(dàn)是(shì)禁用(yòng)錨點鏈接功能(néng)改用(yòng)click通(tōng)過ajax獲取數(shù)據。兩個(gè)方案的(de)應用(yòng)場(chǎng)景不(bù)同,按你(nǐ)們的(de)需求來(lái)實現(xiàn)吧(ba)。
推薦幾個(gè)實用(yòng)的(de)前端分(fēn)頁插件(jiàn)
1、Layui 是(shì)一(yī)款采用(yòng)自(zì)身(shēn)模塊規範編寫的(de)國(guó)産前端UI框架,遵循原生(shēng)HTML/CSS/JS的(de)書(shūα)寫與組織形式。
2、jQuery Pagination分(fēn)頁插件(jiàn)
此jQuery插件(jiàn)為(wèi)Ajax分(fēn)頁插件(jiàn),一(yī)次性加載,故分(fēn)頁切換時(shí)無刷新與延遲,•如(rú)果數(shù)據量較大(dà)不(bù)建議(yì)用(yòng)此方法,因為(wèi)加載會(huì)比較慢(màn)。
3、jQuery 分(fēn)頁插件(jiàn) : jqPaginator
jqPaginator簡潔、高(gāo)度自(zì)定義的(de)jQuery分(fēn)頁組件(jiàn),适用(yòng)于多(duō)種應用(yòng)場(♥chǎng)景。關鍵的(de)一(yī)點就(jiù)是(shì)高(gāo)度自(zì)定義的(de)Html結構。所以jqPagin★ator努力做(zuò)到(dào)合理(lǐ)範圍內(nèi)的(de)自(zì)定義,使其靈活的(de)使用(yòng)了(le)各種不(bù)同的(de)場(chǎng)景∞。
對(duì)于一(yī)個(gè)前端而言,無論是(shì)新手還(hái)是(shì)老(lǎo)手,有(yǒu)一(yī)種東(dōng≈)西(xī)從(cóng)來(lái)都(dōu)是(shì)實用(yòng)的(de),那(nà)就(jiù)是(shì)插件(jiàn)。上(shàn g)面幾個(gè)web前端的(de)分(fēn)業(yè)插件(jiàn)是(shì)蘇州網站(zhàn)制(zhì)作(zuò)認為(w"èi)不(bù)錯(cuò)的(de),僅供參考!