1.引言

????最近確實(shí)體會到了前端找工作的難處，不過大家還是要穩(wěn)住心態(tài)，畢竟有一些前端大神說的有道理，前端發(fā)展了近20年，誕生了很多l(xiāng)eader級別的大神，這些大神可能都沒有合適的坑位，我們新手入坑自然難一些，前端現(xiàn)在對于新手的高要求也能夠理解，只能硬著頭皮完善自我了。而且距離自己3月20找工作底線時間還有兩周，同花順和恒生電子的筆試在還進(jìn)展中，實(shí)在不行真得二戰(zhàn)我倒也不怕。閑來無聊寫一篇“應(yīng)用文”吧（不過最近應(yīng)用文會大幅減少，畢竟講不清楚原理才是真得涼涼）。

2.場景描述

????我們經(jīng)常遇到前端列表，需要進(jìn)行分頁處理，一般前端會說那是后端的任務(wù)，但是其實(shí)前端也是有工作量的，后端的分頁任務(wù)其實(shí)不大，如果會一點(diǎn)sql語句就明白了，一句sql就能夠?qū)崿F(xiàn)（當(dāng)然我這里沒有包括必要參數(shù)檢測和優(yōu)化、錯誤反饋、防注入等內(nèi)容）。
????在實(shí)現(xiàn)上，對于后端而言，主要是怎么告訴前端已經(jīng)沒有數(shù)據(jù)了，對于前端而言怎么確定需要再次請求數(shù)據(jù)了，另外前端還需要對數(shù)據(jù)進(jìn)行緩存，提高性能。

3.后端設(shè)計(jì)與實(shí)現(xiàn)

????后端代碼如下，主要做的是前端傳入?yún)?shù)的檢測和數(shù)據(jù)是否查詢完畢了。說一下思路，參數(shù)檢測可以利用強(qiáng)制轉(zhuǎn)換來判斷傳入的參數(shù)的類型，包括是否傳入、傳入的參數(shù)是否正確、請求的數(shù)據(jù)量是否合理（如果不做限制），想想select *吧。在查詢結(jié)束上，我這里分了兩次查詢，就是額外請求一次數(shù)據(jù)庫查詢當(dāng)前符合要求的被分頁獲取的數(shù)據(jù)的總數(shù)。實(shí)現(xiàn)的代碼如下：

async function getMatchList(ctx) {let { id, page, limit } = ctx.query;//這里對分組id詳細(xì)說明，由于前端頁面有多個分組，所以這里多一個分組idid = Number(id).toString() == "NaN" ? 1 : Number(id);//分組信息，默認(rèn)請求第一組的信息page = Number(page).toString() == "NaN" ? 1 : Number(page);//分頁，默認(rèn)請求第一頁limit = Number(limit).toString() == "NaN" ? 5 : Number(limit);//分頁，默認(rèn)請求5篇let total = await countByGroup(id);//獲取總數(shù)//console.log("輸出請求參數(shù)", id, page, limit);await matchList(id, page, limit).then((data) => {let isTotal = limit * page >= total ? 1 : 0;sendData(ctx, {list: data,isTotal});}).catch((err) => {console.log("輸出錯誤信息：", err);throwError(ctx, -1);});
};

????接下來貼的是與數(shù)據(jù)庫交互的代碼，因?yàn)槲医佑|thinkphp6比較早，對于thinkphp6的MVC設(shè)計(jì)模式影響比較深刻，所以一般寫后端會自覺將與數(shù)據(jù)庫交互的內(nèi)容從controller層抽離，這樣代碼結(jié)構(gòu)也更加清晰，當(dāng)然你如果喜歡使用ORM架構(gòu)的話，nodejs是有一個叫Sequelize的第三方依賴包的，但是這個不是很火哈。

//這里是對數(shù)據(jù)庫的連接，每請求一次連接一次數(shù)據(jù)庫？
//不是的，我這里使用的是單例模式；
//構(gòu)造了一個數(shù)據(jù)庫連接的單例類，如果有連接實(shí)例存在直接使用，否則實(shí)例化一個數(shù)據(jù)交互類
const MysqlConnect = require("../config/connect-mysql");
const mysqlDB = new MysqlConnect();
async function countByGroup(group_id) {return new Promise((resolve, reject) => {const sql = `select count(*) sum from match_list where group_id = ${group_id}`;mysqlDB.query(sql, (err, result) => {if (err) {console.log("數(shù)據(jù)表match查詢數(shù)據(jù)出錯：", err);reject(err);} else {resolve(result[0].sum);}})})
}
async function matchInfo() {return new Promise((resolve, reject) => {const sql = "select id,banner,tag from match_group order by id asc";mysqlDB.query(sql, (err, result) => {if (err) {console.log("數(shù)據(jù)表match查詢數(shù)據(jù)出錯：", err);reject();}resolve(result);})});
}
async function matchList(group_id, page, limit) {return new Promise((resolve, reject) => {const sql = `select id,swiperList,title,detail,goods from match_list where group_id = ${group_id} order by id asc ` +`limit ${(page - 1) * limit},${limit}`;mysqlDB.query(sql, (err, result) => {if (err) {console.log("數(shù)據(jù)表match查詢數(shù)據(jù)出錯：", err);reject();}resolve(result);})});
}
module.exports = { matchInfo, matchList,countByGroup };

4.前端的實(shí)現(xiàn)與緩存

????可能大家更關(guān)心前端怎么實(shí)現(xiàn)的吧，前端的實(shí)現(xiàn)有一個關(guān)鍵點(diǎn)，就是監(jiān)聽滑動事件，實(shí)現(xiàn)上使用的是 @scroll="pageScroll"，然后監(jiān)聽event對象里面的3個重要的屬性：scrollTop、clientHeight 和scrollHeight。解釋這三個參數(shù)的含義：舉例大盒子頂部的舉例、用戶視口可視區(qū)、具備滑動能力的盒子的總高度（在dom渲染之后這個屬性可以自動更新）。

pageScroll(e) {if (e.target.scrollTop + e.target.clientHeight + 20 > e.target.scrollHeight) {//重新發(fā)送請求，獲取新一批文章this.currentPage++;console.log("輸出數(shù)據(jù)：", this.isTotal);if (!this.isTotal) {showLoadingToast({message: '加載中...',forbidClick: true,loadingType: 'spinner',});this.getMatchList(this.currentTabId, this.currentPage, this.limit);} else {showToast({message: '再怎么找也沒有啦~',wordBreak: 'break-word'});}}}

????注意為了能夠有效監(jiān)聽到這些參數(shù)，需要對css稍微設(shè)置一下：

.share-container {background-color: #181818;padding: 0px 10px;padding-bottom: 60px;height: calc(100vh - 90px);//底部留白設(shè)計(jì)，避免不方便閱讀最下面的內(nèi)容，//同時也能夠增加一個沒有更多的友好提示overflow: scroll;
}.share-container::-webkit-scrollbar {//這個是為了防止默認(rèn)滾動條的出現(xiàn)影響了flex布局，直接給隱藏掉display: none;/*Safari and Chrome*/
}

????如今的前端會這些可不夠，我這里展示一下期望有的功能：

????我這里的目標(biāo)平臺是h5（vantUI組件庫）,如果是uniapp或者小程序的話直接提供了用戶滑動觸底函數(shù)，更簡單了，都不用自己監(jiān)聽。上面的效果也有一個是前端的比較常用的——吸頂式布局（position:stikcy，不細(xì)說了），在切換tab的時候可以采用緩存，每次切換之后存到localstorage里面，存儲方式推薦用JSON.stringify來存，讀完之后JSON.parse()轉(zhuǎn)回來，你可能想說要是小程序呢，在uniapp和微信小程序都是提供了緩存讀寫的，可以查看對應(yīng)的用法。需要注意的是，為了保證數(shù)據(jù)安全可以使用一個簡單的加密解密比如crypto-js依賴（不夠的話再撒點(diǎn)“鹽”），能夠防止用戶直接查看你存儲的信息。

5.代碼優(yōu)化方案

????因?yàn)槲疫@里寫的是畢設(shè)的一部分代碼，可能在企業(yè)應(yīng)用上看不夠嚴(yán)謹(jǐn)，還有很多可以優(yōu)化的，這里補(bǔ)充一些方案：
（1）在數(shù)據(jù)加載的時候可以使用骨架屏，因?yàn)槿绻巧婕暗綀D片等加載比較慢容易出現(xiàn)比較嚴(yán)重的閃頻，特別是圖片內(nèi)存比較大的時候；
（2）因?yàn)檫@里使用的是分頁可滑動，“懶加載”請求出戰(zhàn)，因?yàn)檫@里有滑動，“虛擬列表”請求出戰(zhàn)；
（3）因?yàn)檫@里有緩存，需要考慮到緩存的有效期問題，如何刷新緩存？當(dāng)然上面我使用的是切換tab的時候?qū)懢彺婧妥x切換目標(biāo)的緩存，在單純數(shù)據(jù)追加上還是說的過去，但是如果信息被修改了就會出現(xiàn)不及時的情況，這里有一個不是很好的方案，全局配置，多加一個網(wǎng)站配置請求，決定是否使用系統(tǒng)緩存的變量，系統(tǒng)資源更新時修改提示放棄使用緩存；
（4）一般列表的圖片等可以考慮CDN部署，提均衡多地區(qū)的用戶體驗(yàn)，也就是讓遠(yuǎn)離服務(wù)器的用戶能夠更快獲得響應(yīng)；
（5）這里的localstorage有些情況下不能使用，可能需要使用redis再來緩存數(shù)據(jù)，當(dāng)然這是后端的任務(wù)，同時可以利用redis來對請求滿足要求的列表數(shù)量總數(shù)緩存一下，減少額外查庫，其實(shí)查的是同一個數(shù)據(jù)。
????最后祝各位找工作的好兄弟們加油，堅(jiān)持就是順利！