欢迎来到seoerlife,属于SEO工作者的SEOer之家

网站收藏seoerlifeSEO之家

当前位置:首页 > SEO实用教程 > 百度mip新手如何操作,不写JS,在MIP页中实现异步加载数据

百度mip新手如何操作,不写JS,在MIP页中实现异步加载数据

  从需求谈起:在 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/ 请求地址 ', ' 体育新闻 ',' 第一页数据 ');// 第二步:解析数据,拼装 DOMvar 实际内容 = [];if(data.status == ' 请求成功 ') {    for(var i in data. 新闻数组) {        var 单个新闻 = data. 新闻数组 [i];        var 实际内容 [i] = ' 单个新闻 . 标题 '    }   }// 第三步:将拼装好的 DOM 插入到文档流document.querySelector(' 新闻 wrapper').innerHTML(实际内容 .join(''));

image.png

  上述步骤中,异步请求拼装,for 循环数据处理,最终 DOM 操作都是通用的,真正变化的只有以下三个变量:

  异步请求链接

  返回数据格式

  插入位置

  MIP 组件非常贴心地将所有通用 JS 封装起来,露出几个配置接口,供开发者直接使用。由于应用场景和交互要求区别,共实现了两个组件:MIP列表组件和MIP无限下拉。

  推荐1:异步数据 MIP 组件--列表组件

  列表组件名称为,可用于将页面中配置的JSON数据渲染到页面中,也可以发送异步请求,并拼装数据插入到页面中。通常用于可变化数据的显示,如天气信息,阅读量等。

  用法如下(有所简略):

  {{数据中的新闻标题}}

  配置服务器返回请求,对应的数据格式为:

{  "status": 0,  "data":  

{      "items": [      {          " 数据中的链接 ": "https://a.xx.com/001",          " 数据中的新闻标题 ": "001_ 这是一个新闻标题 ",      },      {          " 数据中的链接 ": "https://a.xx.com/002",          " 数据中的新闻标题 ": "002_ 这是另一个新闻标题 ",      }   }}


  最终,mip-list组件根据数据,拼装DOM插入页面,最终效果为:

  {{数据中的新闻标题}}

  001_ 这是一个新闻标题       002_ 这是另一个新闻标题image.png

  除了上文介绍的用法,列表组件支持渲染同步数据,点击加载更多等功能。可以参照MIP官网 mip-list文档 说明来使用。

  推荐2:异步数据 MIP 组件--无限下拉

  无限下拉组件名称为,当用户滚动到页面底部,或距离页面底部有一定距离时,自动发送异步请求获取更多数据,并插入页面。通常用于正文后的相关文章推荐,“你可能感兴趣” 栏目。

  用法如下(有所简略):

  {{数据中的新闻标题}}

  配置服务器返回请求,对应的数据格式为:

  {  "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中。最终的结果如下:

  {{数据中的新闻标题}}

  001_ 这是一个新闻标题       002_ 这是另一个新闻标题

image.png

  mip-infinitescroll 组件的具体使用方法见 MIP 官网-无限下拉,除了上述的用法,还支持个性化配置以下字段:

  每次插入到页面的结果条数

  插入页面的结果总条数

  异步请求服务器过期时间

  “加载中……” 文案

  “没有更多内容了 >o<” 文案


除特别注明外,本站所有文章均为SEO优化技术教程分享,深圳,上海,北京,广州seoer之家原创,转载请注明出处来自http://seoerlife.com/?id=37

发表评论

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

搜索
导航栏
最近发表
标签列表