之前使用jQuery的時(shí)候模擬過一個(gè)豆瓣電影移動(dòng)端的頁(yè)面，前兩天翻到發(fā)現(xiàn)已經(jīng)忘記差不多了，重新梳理了一遍，做一下過程中的問題及注意點(diǎn)的總結(jié)。
demo
分析項(xiàng)目結(jié)構(gòu)
其實(shí)結(jié)構(gòu)很簡(jiǎn)單，三個(gè)tab按鈕對(duì)應(yīng)三個(gè)不同頁(yè)面的展示，功能簡(jiǎn)單所以也不需要做分頁(yè)處理，簡(jiǎn)單地切換display即可完成。
頁(yè)面展示
頁(yè)面展示的重點(diǎn)就在于每個(gè)電影項(xiàng)目信息的統(tǒng)一樣式展示，我在這里采用創(chuàng)建template，請(qǐng)求獲取數(shù)據(jù)后加以替換后來予以解決。
下滑加載更多
Top250頁(yè)面的數(shù)據(jù)較多，為了用戶體驗(yàn)對(duì)數(shù)據(jù)獲取進(jìn)行了優(yōu)化，默認(rèn)只獲取前10條數(shù)據(jù)，當(dāng)頁(yè)面滑到最下時(shí)觸發(fā)判定加載數(shù)據(jù)：
isToBottom: function($viewport, $content) {
//判斷頁(yè)面自身高度加上滾動(dòng)距離是否達(dá)到容器高度，預(yù)留30像素預(yù)加載并放置loading動(dòng)畫
return $viewport.height() + $viewport.scrollTop() + 30 > $content.height()
}
項(xiàng)目難點(diǎn)
豆瓣在現(xiàn)在已經(jīng)關(guān)閉了開發(fā)者平臺(tái)并不再提供API供開發(fā)使用，但是測(cè)試時(shí)發(fā)現(xiàn)以前的API請(qǐng)求依然可以使用，但若干次請(qǐng)求后會(huì)出現(xiàn)403 Forbidden，于是查看network請(qǐng)求信息：
image.png
試著直接在地址欄輸入Request URL，可以獲取到圖片，于是分析是不是跨域的問題，雖然使用了Ajax jsonp來獲取數(shù)據(jù)，但是會(huì)不會(huì)在服務(wù)器端進(jìn)行了設(shè)置，判斷訪問來源來拒絕訪問。
解決方案： 設(shè)置<meta name='referrer' content='never'>
