黄聪:Pjax 无刷新开发web,更好用户体验
什么Ajax、Pjax、Njax。。。神马玩意? 有Njax吗? 木有。。。不过真有Pjax!!
其实pjax就是用到了html5的新history api: pushState和replaceState。如果浏览器不支持,会自动降级为普通http访问,跟正常a链接一样
具体啥区别?先视觉通感感受下!!上图:
1、普通的http切换页面的请求方式,闪烁、白屏、卡顿、加载等,就是完整加载一坨页面嘛,又慢又挫的,就像如花姑娘:
2、通过Ajax来开发页面,只加在部分数据,没有切换和闪烁,清新宜人哦,就像街上MM、邻家小妹
如果只是ajax的话,不能保存页面状态!一刷新就没了啊!!转瞬即逝啊!!
街上的MM都走远了,童鞋别看了,找不到了!!
如果要保存的话,结合hash#,其实很坑爹啊!
很多时候引入hash,导致开发复杂不说,关键是影响SEO,百度不认识 #! 啊 只有谷歌认识有毛线用啊被墙了!
3、Pjax来了啊,喜大普奔!既能无切换、高性能加载显示html,又能跟普通url兼容,前后端开发逻辑也简单!
就像下面的女神吉田沙世和摄影模特啊!关键是你还能抱回家,轻松hold住,各种调戏啊!卧槽。。说漏嘴了。。咳说正事!
说完了视觉上的通感感受,我们再看一眼开发的区别,是不是开发很麻烦啊 !!!上代码:
MO.go('.ctn a', '#ttt')
然后呢?
木有了啊!只要后台再根据请求头区分下是否是pjax来返回片段html代码就可以了!
浏览器不支持pjax怎么办? 自动将极为普通http啊!!不用担心的!
艾玛、这么happy!真幸福!
简直就是修炼玉女心经的节奏啊! 耶,操练起来!
玉女心经使用指南:
安装:
- 首先需要jQuery这个基础库~其实可以用纯js写这个pjax类库的,但是,我懒。。。
- 引入编译es5后到dist目录下的 mo.pjax.es5.js 脚本文件到html文件,如果使用es6,请import并配置编译
src="./dist/mo.pjax.es5.js"
可以去github上下载: https://github.com/xunuoi/MO.Pjax
用法:
Api Params Desc 参数注释:
_fetch : 是否请求网络,比如这次pjax的url参数是/about ,如果_fetch为false,那么不发送http 请求或读取缓存,只执行回调。
多用在复杂web/app设计中,比如当前内容已存在于html中,不想更新和获取.
* MO.state默认值是false,因为只是重新定义本页面状态,不需要更新已有数据和HTML
* MO.touch中默认值是true,因为要从http或缓存中 更新数据、html
_fire:是否立刻触发onpopfn ,立刻执行回调函数。false表示popstate 事件触发后才执行
* MO.state中默认值是false, 只有popstate事件触发后才执行
* MO.go中调用了MO.state,并传参_fire值为false.
* MO.define中调用了MO.state,并传参_fire值为true.
配置:
调教一下,再美的女神也不是天生就符合你的口味,来这定制下啊!
MO.config({
'type': 'POST',
// this can be used for you back-end ,to detect if it is a pjax request
'pjaxHeader': {
'X-Http-Pjax': 'Pjax'
}
})
详细配置和注解:
{
'type': 'POST',// post is default http请求方式
// if cache data, 是否缓存
'cache': true,
// 'cacheExpires': 10000, // 0 means always avaliable, default none 缓存时间
// if store data in localStorage , default true
'storage': true, //是否启用localStorage
//如果storageExpires设置为0或false,永不过期
'storageExpires': 43200000, // 12 hours ,default 12
// the res data type, default html
'dataType': 'html', //返回数据类型,默认html
// you can set your own header ,just use `pjaxHeader` opts,
// which you can detect if it is an pjax request in back-end
// 你可以自己定义请求头,方便后端判断是否是pjax请求,如果是pjax, 返回部分html, fragment
'pjaxHeader': {
'Http-Request-Pjax': 'Fragment'
},
// you can set the fn which will triggered before MO.touch and popstate event happened
// 触发pjax操作前和 出现popstate的事件时的事件函数, 参数是state,包含url、title等信息
before (state) { ... } //默认无
// you can set the beforeSend fn , before ajax request send.
// jquery的ajax方法调用,请求前设置请求头,可以覆盖
beforeSend (req){
let ph = this['pjaxHeader']
for (let h in ph ){
let v = ph[h]
req.setRequestHeader(h, v)
}
}
}
Api说明:
看看美女哪里长得最漂亮啊
一、MO.go 最简单!
MO.go(aSelector, ctnSelector, onSuccess)
这个是最简单和常用的api, 只需要go一下,传入2个参数即可,一个是点击后触发pjax的元素选择器,一般是a,第二个是更新返回内容的html 。第三个是回调函数,可选。
MO.go添加处理错误的函数,比如出现网络请求错误,比如404,会在此处捕获
MO.go('.ctn a', '#ttt',
function onSuccess(res, $aEle){
console.log(res, $aEle)
},
function onError(err, $aEle){
console.log(err, $aEle)
})
二、MO.define 不常用
定义当前页面的state状态,不常用
MO.define(ctn, htmlData)
三、MO.state 适合复杂开发
* MO.state和MO.go两者经常配合使用,比较灵活
详细定义当前页面state状态,以及是否请求次url, 和是否立刻触发onpopFn_fire
MO.state(url, title, onpopFn, _data=null, _fetch=false, _fire=false)
四、MO.go 复杂开发,很好用啊!!!
做复杂交互和逻辑时,比较常用
* 更强大和灵活的使用pjax, 可以定义 pjax的操作的url、回调、是否发起此url的网络请求等,同样可以添加fail的错误处理函数
MO.touch(apiUrl, title, onpopFn, _fetch=true)
给touch添加fail处理网络请求错误,添加方式如下
MO.touch(apiUrl, title, onpopFn, _fetch=true)
.fail(function(err) {
console.log('There is an error ', err)
})
服务端处理:
服务端只需要判断是普通请求(完整html)还是pjax请求(fragment html)
可以通过MO.config({'pjaxHeader': {xxx: yyy}})来设置请求头,或者修改type为POST\GET等,只要让服务端能判断即可!
说明:
- 通过MO.touch和MO.state,可以做非常复杂的pjax 应用,自定义事件\UI等
- 如果要简单使用,就是直接 MO.go(), 传入你想要pjax的a元素的selector即可
- 配合启用cache/localStorage(默认都启用), 给用户更好操作体验,减少等待、卡顿
本地存储:store/removeStore
原来还有这么个福利!!!
可以在引入MO.Pjax的任何页面,来store数据,当其他页面pjax到此页面的时候,数据直接从storage获取就可以啦!这个在做多重请求方式的web开发时,经常用到哦!
- 提供本地存储和自动过期机制,
- 过期时间通过MO.config({'storageExpires': xxx})来设定
- 自动创建一个item来跟踪这条数据的时间: { k+'createdAt': (new Date).getTime() },
Store的Api
MO.store(k, v)
MO.removeStore(k, v)
MO.pjax 使用 MO.go 举例
女神跳个舞吧!!
html代码
<div class="ctn">
<h3>Test Mo.pjaxh3>
<p>
<a href="/about.html">Abouta>
<a href="/toxic.html">Toxica>
p>
div>
<div id="ttt" style="margin-top: 30px;">
<p>This is index htmlp>
div>
------------------------------------------------------------------
<div>This is about htmldiv>
------------------------------------------------------------------
<div>This is toxic htmldiv>
JS 代码
MO.go('.ctn a', '#ttt')
So easy! 搞定收工!
就似这么简单!就似这么任性!
我娘再也不用担心我无刷新更新页面内容了!Pjax大法好!
赶紧把pjax女神抱回家!!!
http://karat.cc/article/5655bcdce6fecb6c65eded27
黄聪:Pjax 无刷新开发web,更好用户体验的更多相关文章
- jQuery Pjax – 页面无刷新加载,优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- 黄聪:《跟黄聪学WordPress主题开发》
又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...
- 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- 整合pjax无刷新
一:整合pjax的准备工作: 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 1.新浪CDN提速:<script type="text/javascri ...
- 给网站添加pjax无刷新,换页音乐不中断
自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能 在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax,于是又苦苦寻找并尝试了一番 最后发现网上实现pjax功能基本上是两种方 ...
- 黄聪:chrome扩展开发《AJAX请求》
chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩 ...
- 黄聪:将自己开发的插件发布到WordPress官方插件站(转)
原文作者:我爱水煮鱼 把你的插件发布到 WordPress 官方插件目录是让更多人用到插件的好方法,这样可以让你的插件不仅仅给我们中国人民使用,而且还可以让你的插件给全世界人民使用,想想全世界人民都在 ...
- 黄聪:WordPress 后台发布文章时提示用户选择分类
很多用户在后台发布文章,常常会忘记选择分类,所以很有必要添加一个提醒功能,如果没有选择分类,点击发布时,就显示一个提示信息.要实现这个功能,只要将下面的代码添加到主题的 functions.php 即 ...
随机推荐
- 深度学习环境配置Ubuntu16.04+CUDA8.0+CUDNN5
深度学习从12年开始打响,配置深度学习环境软件一直是一个头疼的问题,如何安装显卡驱动,如何安装CUDA,如何安装CUDNN:Ubuntu官方一直吐槽Nvidia显卡驱动有问题,网上大神也给出了关闭li ...
- Unity3d mesh合并,网格合并具体用法教程
Unity开发Mesh合并网格 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分 ...
- 配置apache-maven-3.6.0时所遇到的坑(一)
在命令行窗口中输入:mvn -v 或 直接 mvn 时报错:“错误: 找不到或无法加载主类 org.codehaus.plexus.classworlds.launcher.Lau ...
- IE8的兼容问题
1: rgba失效的问题: 在添加rgba的类名内加上:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f00000 ...
- 铁三测试题——权限、你是管理员吗?——WP
权限 [题目描述]:你是管理员吗? [解题链接]:http://ctf4.shiyanbar.com/web/root/index.php 首先看题,提到“权限”,“管理员”,这就是说涉及到管理员的账 ...
- JavaEE开发的颠覆者 Spring Boot实战--笔记
1.Spring boot的三种启动模式 Spring 的问题 Spring boot的特点,没有特别的地方 1.Spring 基础 PS:关于spring配置 PS: 现在都已经使用 java配置, ...
- 本地连接服务器的mongodb
首先说中心思想,和连接本地数据库是一样的,不同的是修改数据库的配置项: module.exports = { dbs:'mongodb://账号:密码@服务器ip27017/数据库名称' } 但是总是 ...
- Java各个知识点详解总结
Java基础知识总结 写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java语言代码把思 ...
- VS打包项目详细解析
使用VS打包项目,其实很多简单.微软官方文档很详尽,故不再细述,只列出相关链接 1创建安装项目 如何:创建或添加部署项目 2 添加项目输出 如何:向部署项目中添加项 3添加用户界面 部署中的用户 ...
- vue-cli 3.x 使用
vue-cli 3.x 安装:npm install -g @vue/cli vue-cli 3.x 常用命令 vue-cli 3.x 常用命令 命令含义 vue --help vue-cli 3.x ...