從需求談起:在 MIP 頁中異步加載數據
MIP(移動網頁加速器) 的 加速原理 除了靠譜的 MIP-Cache CDN 加速外,最值得一提的就是組件系統。所有 JS 交互都需要使用 MIP 組件實現,保證頁面中所有 JS 都是最精簡高效的,避免一個導航效果需要引用 jquery.js,bootstrap.js,bootstrap-some-nav.js 等多個 JS 實現。
誠然,“所有交互都要使用組件,或自己封裝組件” 對于大部分開發者朋友來說,是有些不自由的。很多 MIP 開發者會有類似的疑問:
我想從服務器獲取數據,渲染到頁面上。是不是要自己封裝 MIP 組件啦?
又或者:
推薦數據是實時計算的,并且有很多條,要做瀑布流加載效果,我的 JS 要怎么引入到頁面里來?
這些合理合法的異步數據加載需求,MIP 都已經支持了,而且不需要寫一行 JS 代碼!
異步加載數據-通用解決方案
在直接將用法之前,先感性地認識一下異步加載數據的通用方案。雖然每個網站的后端請求地址不同,數據庫操作方式不同。但大家的需求是相同的:
異步加載數據,并呈現在頁面上。
為了實現這個效果,大家也不約而同地選擇了類似方案:
- 發送一個異步請求獲取 JSON 數據
- 根據返回的數據 status 確認請求是否有效
- 解析有效的 JSON 數據,拼接在 HTML 標簽中插入文檔
寫成偽代碼是這個樣子的:
// 第一步:發送異步請求,獲取數據
var data = 異步請求 ('https://m. 域名 .com/ 請求地址 ', ' 體育新聞 ',' 第一頁數據 ');
// 第二步:解析數據,拼裝 DOM
var 實際內容 = [];
if(data.status == ' 請求成功 ') {for(var i in data. 新聞數組) {var 單個新聞 = data. 新聞數組 [i];var 實際內容 [i] = '<a href = 單個新聞 . 鏈接> 單個新聞 . 標題 </a>'}
}
// 第三步:將拼裝好的 DOM 插入到文檔流
document.querySelector(' 新聞 wrapper').innerHTML(實際內容 .join(''));
上述步驟中,異步請求拼裝,for 循環數據處理,最終 DOM 操作都是通用的,真正變化的只有以下三個變量:
- 異步請求鏈接
- 返回數據格式
- 插入位置
MIP 組件非常貼心地將所有通用 JS 封裝起來,露出幾個配置接口,供開發者直接使用。由于應用場景和交互要求區別,共實現了兩個組件:MIP 列表組件和 MIP 無限下拉。
推薦 1:異步數據 MIP 組件–列表組件
列表組件 名稱為<mip-list>
,可用于將頁面中配置的 JSON 數據渲染到頁面中,也可以發送異步請求,并拼裝數據插入到頁面中。通常用于可變化數據的顯示,如天氣信息,閱讀量等。
用法如下(有所簡略):
<mip-list src="https:// 后端異步請求地址 " preLoad><!-- template 標簽為 html 模板,不會顯示。每條數據按照這個模板的格式插入頁面 --><template type="mip-mustache"><a href="{{數據中的鏈接}}">{{數據中的新聞標題}}</a></template></mip-list><!-- mip-list 組件執行依賴以下兩個 JS -->
<script src="https://c.mipcdn.com/static/v1/mip-list/mip-list.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script>
配置服務器返回請求,對應的數據格式為:
{"status": 0,"data":{"items": [{" 數據中的鏈接 ": "https://a.xx.com/001"," 數據中的新聞標題 ": "001_ 這是一個新聞標題 ",},{" 數據中的鏈接 ": "https://a.xx.com/002"," 數據中的新聞標題 ": "002_ 這是另一個新聞標題 ",}}
}
最終,mip-list 組件根據數據,拼裝 DOM 插入頁面,最終效果為:
<mip-list src="https:// 后端異步請求地址 " preLoad><template type="mip-mustache"><a href="{{數據中的鏈接}}">{{數據中的新聞標題}}</a></template><div class="mip-fill-content" role="list"><!-- 開始:根據異步請求返回值,渲染出的 HTML --><a href="https://a.xx.com/001">001_ 這是一個新聞標題 </a><a href="https://a.xx.com/002">002_ 這是另一個新聞標題 </a><!-- 結束:根據異步請求返回值,渲染出的 HTML --></div>
</mip-list>
除了上文介紹的用法,<mip-list>
列表組件支持渲染同步數據,點擊加載更多等功能。可以參照 MIP 官網 mip-list 文檔 說明來使用。
推薦 2:異步數據 MIP 組件–無限下拉
無限下拉 組件名稱為<mip-infinitescroll>
,當用戶滾動到頁面底部,或距離頁面底部有一定距離時,自動發送異步請求獲取更多數據,并插入頁面。通常用于正文后的相關文章推薦,“你可能感興趣” 欄目。
用法如下(有所簡略):
<mip-infinitescroll data-src="https:// 后端異步請求地址 " template="myTemplate"><!-- template 標簽為 html 模板,不會顯示。每條數據按照這個模板的格式插入頁面 --><template type="mip-mustache" id="myTemplate"><a href="{{數據中的鏈接}}">{{數據中的新聞標題}}</a></template><!-- mip-infinitescroll-results 是拼裝完畢結果的插入位置 --><div class="mip-infinitescroll-results"></div></mip-infinitescroll><!-- mip-infinitescroll 組件執行依賴以下兩個 JS -->
<script src="https://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script>
配置服務器返回請求,對應的數據格式為:
{"status": 0,"data":{"items": [{" 數據中的鏈接 ": "https://a.xx.com/001"," 數據中的新聞標題 ": "001_ 這是一個新聞標題 ",},{" 數據中的鏈接 ": "https://a.xx.com/002"," 數據中的新聞標題 ": "002_ 這是另一個新聞標題 ",}}
}
MIP 無限下拉會遍歷 data.items 每條數據(Key-Value),根據 Key 查找槽位,將對應的 Value 渲染到頁面.mip-infinitescroll-results
中。最終的結果如下:
<mip-infinitescroll data-src="https:// 后端異步請求地址 " template="myTemplate"><template type="mip-mustache" id="myTemplate"><a href="{{數據中的鏈接}}">{{數據中的新聞標題}}</a></template><div class="mip-infinitescroll-results"><!-- 開始:根據異步請求返回值,渲染出的 HTML --><a href="https://a.xx.com/001">001_ 這是一個新聞標題 </a><a href="https://a.xx.com/002">002_ 這是另一個新聞標題 </a><!-- 結束:根據異步請求返回值,渲染出的 HTML --></div>
</mip-infinitescroll>
mip-infinitescroll 組件的具體使用方法見 MIP 官網-無限下拉,除了上述的用法,還支持個性化配置以下字段:
- 每次插入到頁面的結果條數
- 插入頁面的結果總條數
- 異步請求服務器過期時間
- “加載中……” 文案
- “沒有更多內容了 >o<” 文案