凯里市网站建设,网站建设 招标书,网站优化外包推荐,网站手机访问跳转代码从需求谈起#xff1a;在 MIP 页中异步加载数据
MIP#xff08;移动网页加速器#xff09; 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外#xff0c;最值得一提的就是组件系统。所有 JS 交互都需要使用 MIP 组件实现#xff0c;保证页面中所有 JS 都是最精简高效的…从需求谈起在 MIP 页中异步加载数据
MIP移动网页加速器 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外最值得一提的就是组件系统。所有 JS 交互都需要使用 MIP 组件实现保证页面中所有 JS 都是最精简高效的避免一个导航效果需要引用 jquery.jsbootstrap.jsbootstrap-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 srchttps:// 后端异步请求地址 preLoad!-- template 标签为 html 模板不会显示。每条数据按照这个模板的格式插入页面 --template typemip-mustachea href{{数据中的链接}}{{数据中的新闻标题}}/a/template/mip-list!-- mip-list 组件执行依赖以下两个 JS --
script srchttps://c.mipcdn.com/static/v1/mip-list/mip-list.js/script
script srchttps://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 srchttps:// 后端异步请求地址 preLoadtemplate typemip-mustachea href{{数据中的链接}}{{数据中的新闻标题}}/a/templatediv classmip-fill-content rolelist!-- 开始根据异步请求返回值渲染出的 HTML --a hrefhttps://a.xx.com/001001_ 这是一个新闻标题 /aa hrefhttps://a.xx.com/002002_ 这是另一个新闻标题 /a!-- 结束根据异步请求返回值渲染出的 HTML --/div
/mip-list
除了上文介绍的用法mip-list列表组件支持渲染同步数据点击加载更多等功能。可以参照 MIP 官网 mip-list 文档 说明来使用。
推荐 2异步数据 MIP 组件–无限下拉
无限下拉 组件名称为mip-infinitescroll当用户滚动到页面底部或距离页面底部有一定距离时自动发送异步请求获取更多数据并插入页面。通常用于正文后的相关文章推荐“你可能感兴趣” 栏目。
用法如下有所简略
mip-infinitescroll data-srchttps:// 后端异步请求地址 templatemyTemplate!-- template 标签为 html 模板不会显示。每条数据按照这个模板的格式插入页面 --template typemip-mustache idmyTemplatea href{{数据中的链接}}{{数据中的新闻标题}}/a/template!-- mip-infinitescroll-results 是拼装完毕结果的插入位置 --div classmip-infinitescroll-results/div/mip-infinitescroll!-- mip-infinitescroll 组件执行依赖以下两个 JS --
script srchttps://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js/script
script srchttps://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-srchttps:// 后端异步请求地址 templatemyTemplatetemplate typemip-mustache idmyTemplatea href{{数据中的链接}}{{数据中的新闻标题}}/a/templatediv classmip-infinitescroll-results!-- 开始根据异步请求返回值渲染出的 HTML --a hrefhttps://a.xx.com/001001_ 这是一个新闻标题 /aa hrefhttps://a.xx.com/002002_ 这是另一个新闻标题 /a!-- 结束根据异步请求返回值渲染出的 HTML --/div
/mip-infinitescroll
mip-infinitescroll 组件的具体使用方法见 MIP 官网-无限下拉除了上述的用法还支持个性化配置以下字段
每次插入到页面的结果条数插入页面的结果总条数异步请求服务器过期时间“加载中……” 文案“没有更多内容了 o” 文案
