從需求談起：在 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<” 文案

總結

以上是生活随笔為你收集整理的新手教程：不写JS，在MIP页中实现异步加载数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。