您的位置: 首页  >  IT文章  >  新手教程：不写JS，在MIP页中实现异步加载数据

新手教程：不写JS，在MIP页中实现异步加载数据

分类: IT文章 • 2022-12-07 00:30:17

从需求谈起：在 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" >
        <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" >
        <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）等你。

相关推荐