從需求談起：在 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<” 文案
建議，討論，參與開發
MIP 是開源的項目，歡迎各位開發者參與組件維護，共同優化千萬站點使用的組件。
mip-list 的組件源碼在 github/mip-list, mip-infinitescroll 的組件源碼在 github/mip-infinitescroll, 可以通過 提交 PR 的方式直接參與開發，也可以 新建 Issue 提出建議。
MIP 組件哥，立正，鞠躬，在 MIP 前端技術 QQ 群（580967494）等你。