新手教程:不写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.mzph.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 注意&…