新手教程:不寫JS,在MIP頁中實現異步加載數據

從需求談起:在 MIP 頁中異步加載數據

MIP(移動網頁加速器) 的 加速原理 除了靠譜的 MIP-Cache CDN 加速外,最值得一提的就是組件系統。所有 JS 交互都需要使用 MIP 組件實現,保證頁面中所有 JS 都是最精簡高效的,避免一個導航效果需要引用 jquery.js,bootstrap.js,bootstrap-some-nav.js 等多個 JS 實現。

誠然,“所有交互都要使用組件,或自己封裝組件” 對于大部分開發者朋友來說,是有些不自由的。很多 MIP 開發者會有類似的疑問:

我想從服務器獲取數據,渲染到頁面上。是不是要自己封裝 MIP 組件啦?

又或者:

推薦數據是實時計算的,并且有很多條,要做瀑布流加載效果,我的 JS 要怎么引入到頁面里來?

這些合理合法的異步數據加載需求,MIP 都已經支持了,而且不需要寫一行 JS 代碼!

異步加載數據-通用解決方案

在直接將用法之前,先感性地認識一下異步加載數據的通用方案。雖然每個網站的后端請求地址不同,數據庫操作方式不同。但大家的需求是相同的:

異步加載數據,并呈現在頁面上。

為了實現這個效果,大家也不約而同地選擇了類似方案:

  1. 發送一個異步請求獲取 JSON 數據
  2. 根據返回的數據 status 確認請求是否有效
  3. 解析有效的 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<” 文案

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/535833.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/535833.shtml
英文地址,請注明出處:http://en.pswp.cn/news/535833.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

日常問題———安裝新版zookeeper 出現Starting zookeeper ... FAILED TO START

問題描述 安裝新版zookeeper使用 /apache-zookeeper-3.6.1.tar.gz解壓后運行zoServer.sh文件時出現Starting zookeeper … FAILED TO START錯誤 解決方案&#xff08;過程&#xff09; 實際上應該是下載錯了文件。在官網上有兩個tar.gz文件&#xff0c;從3.5.5版本開始&…

Hadoop的安裝與配置——搭建完全分布式集群

一、搭建集群 1、準備服務器&#xff08;這里以我的3臺Centos7為例&#xff09; 1個主節點&#xff1a;Carlota1(192.168.33.21)&#xff0c;2個子節點&#xff1a;Carlota2(192.168.33.22)&#xff0c;Carlota3(192.168.33.23) 2、配置主節點名 在主節點命令行輸入&#x…

HTTP 視頻怎么在 MIP 頁面中使用?

在 MIP 中&#xff0c;一些資源的使用需要支持 HTTPS&#xff0c;視頻就是其中一種。但目前大部分站點的視頻資源都還是 HTTP 的資源&#xff0c;無法在百度 MIP 搜索結果中直接使用&#xff0c; mip-video 視頻組件針對 HTTP 的視頻資源采用跳到一個 HTTP 的播放頁面進行播放&…

MIP 組件庫升級公告

背景 為了方便廣大開發者們更好地使用組件&#xff0c;現對 MIP 組件庫統一進行升級&#xff0c;升級后將分為通用組件和自定義組件兩類&#xff0c;方便開發。 通用組件&#xff0c;即考慮了組件通用性方便所有開發者參考使用的組件&#xff0c;將存放于 mip-extensions 倉庫…

騰訊云服務器 ubuntu 設置允許root用戶登錄和禁用ubuntu用戶

最近購買了騰訊云服務器&#xff0c;使用了 Ubuntu Server 18.04.1 LTS 64位操作系統&#xff0c;發現默認用戶為ubuntu,而無法用root用戶進行ssh登陸&#xff0c;本篇就記錄一下開通root和禁用ubuntu的過程。 1、設置允許root用戶登錄 使用用戶名ubuntu登錄sudo passwd root…

Ubuntu 修改 hostname

1、vi /etc/cloud/cloud.cfg 2、將preserve_hostname: false修改為preserve_hostname: true 3、hostnamectl set-hostname 主機名 4、reboot重啟系統生效

MIP 技術月報(4月):支持熊掌號登錄;優化頁面懸浮元素

之前由MIP團隊維護的《移動 Web 加速技術月報》從本期開始&#xff0c;正式升級為《MIP 技術月報》&#xff0c;與以往不同的是&#xff0c;《MIP 技術月報》將會與大家分享包含移動加速技術以外的其他移動應用開發的技術&#xff0c;從移動用戶體驗、開發體驗出發來分享 MIP 的…

Ubuntu18.04安裝最新版Docker

卸載舊的docker版本apt-get remove docker docker-engine docker.io containerd runc更新軟件列表apt-get update.允許apt命令可以使用HTTPS訪問Docker repositoryapt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common添加Docker…

MIP 問題解決方案大全(2018-06更新)

在 MIP 推出后&#xff0c;我們收到了一些站長的疑問。現將常見問題整理出來&#xff0c;幫助大家了解 MIP 的知識。 一、MIP 認知類問題二、改造前準備三、前端改造&#xff0c;組件使用四、提交生效五、MIPCache六、更多學習資源 一、MIP 認知類問題 1.1 MIP 化的收益是什…

Ubuntu18使用docker快速安裝oracle 11g

1、安裝docker環境&#xff0c;參照Ubuntu18.04安裝最新版Docker 2、下載oracle鏡像docker pull deadok22/docker-oracle-xe-11g 3、下載完成后&#xff0c;啟動oracle鏡像作為容器&#xff1a;docker run -h "oracle" --name "oracle" -d -p 49160:22 -p …

ubuntu新建用戶后,終端下方向鍵和tab鍵不可用的解決方法

問題描述&#xff1a; 用adduser命令新增了用戶之后&#xff0c;發現在該新建用戶下的命令終端&#xff0c;使用方向鍵無法調出歷史命令&#xff0c;同時tab鍵也無法補全輸入命令。 問題解決&#xff1a; 在/etc/passwd中發現&#xff0c;該新建用戶使用的shell為/bin/sh&…

移動Web體驗月報(6月):MIP 核心代碼升級,增加基于 Vue 開發能力

原創&#xff1a; BrilliantOpenWeb OpenWeb開發者 7月6日 作者 | Brilliant Open Web 團隊 編輯 | Daisy 升級與重要進展 歷時2個月&#xff0c;MIP團隊完成了核心代碼重構與核心功能升級&#xff0c;MIP新版本核心代碼&#xff08;V2&#xff09;在實現向下完全兼容當前代…

騰訊云ubuntu18安裝圖形化界面

0、apt-get update 1、sudo apt-get install xinit 2、sudo apt-get install gdm3 3、apt-get install ubuntu-desktop

2017 到 2018,PWA 技術到底經歷了什么

高磊 OpenWeb開發者 1周前 在 GMTC 2018 全球大前端會議舉辦期間&#xff0c;高磊擔任主題演講嘉賓&#xff0c;并擔任 PWA 專場出品人。作為有近 10 年 Web 前端技術開發、管理經驗的開發者&#xff0c;高磊一直關注著 PWA 技術的發展。 2017年 6月10日&#xff0c;GMTC 201…

CentrOS7靜默安裝oracle11g

最近要做一個用ogg實現oracle到kafka的增量數據實時同步&#xff0c;但是Oracle就讓我裝了好久&#xff0c;這里來記錄一下安裝oracle過程。 1.建立swap分區 創建充當swap分區的文件&#xff0c;文件大小就是要增加的swap大小&#xff0c;of是文件位置&#xff0c;bs為單位&a…

MIP 擴展組件開發手冊

本手冊將向你展示&#xff0c;完成一個 MIP 擴展組件的開發需要做哪些事情。在此之前&#xff0c;我們假定你&#xff1a; 有一定的 HTML、CSS 和 JavaScript 基礎 了解 AMD 的模塊管理方式 熟悉版本管理工具 Git 有自己的 GitHub 賬號 懂得使用 npm 步驟 通常情況下&am…

Zookeeper分布式安裝部署

本篇博客將主要介紹如何進行Zookeeper的分布式安裝部署 集群規劃 在Carlota1、Carlota2、Carlota3三臺機器上進行部署。 安裝部署 1、解壓安裝 上傳壓縮文件apache-zookeeper-3.6.1-bin.tar.gz到三臺機器上解壓文件tar -zxvf apache-zookeeper-3.6.1-bin.tar.gz改個名&…

MIP 網站中熊掌號登錄

標題內容類型通用支持布局responsive,fixed-height,fill,container,fixed所需腳本https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js 注意&#xff1a;使用該組件必須在引用本組件鏈接前引用 <…

日常問題——hadoop 任務運行到running job就卡住了 INFO mapreduce.Job: Running job: job_1595222530661_0003

執行mapreduce沒報錯&#xff0c;可是任務運行到running job就卡住在 INFO mapreduce.Job: Running job: job_1595222530661_0003 解決方法 mapred-site.xml下將 <property><name>mapreduce.framework.name</name><value>yarn</value> </pr…

MIP 支付組件,支付流程:

MIP 支付組件&#xff0c;支付流程&#xff1a; 標題內容類型通用支持布局responsive,fixed-height,fill,container,fixed所需腳本https://c.mipcdn.com/static/v1/mip-simple-pay/mip-simple-pay.js,https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js 注意&…