大家把 H5 的 Pjax 用起来吧！用户体验好、速度快、省流量！分享一个前端 pjax 类库: MO. Pjax

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3286 天前的主题，其中的信息可能已经有所发展或是发生改变。

Pjax 就是对 ajax + H5 的 pushState 的结合使用，让你可以很方便的使用 H5 的 pushState 技术。

详细使用教程戳： http://karat.cc/article/5655bcdce6fecb6c65eded27
文档和下载 github ： https://github.com/xunuoi/MO.Pjax

MO.Pjax 同时支持了缓存和本地存储，第二次访问无需网路请求，直接显示内容，节省流量，提高浏览体验！
跟 hash 比，对 SEO 友好，开发逻辑简单，同时对不支持的浏览器自动降级为普通 http 请求！简单又性感~~~

那开发是不是很麻烦？

简单感受下 MO.Pjax ： MO.go('.ctn a', '#ttt')
然后呢？没然后了，搞定收工了！

前端童鞋们一起用起来吧！！

pjax

pushstate

需网路

类库

19 条回复 • 2017-07-11 12:38:04 +08:00

loading

2015-11-26 21:58:28 +08:00 via iPhone

先顶后看

levon

2015-11-26 21:59:45 +08:00

拿来用用，感谢

xunuoi

2015-11-26 22:15:10 +08:00 via iPhone

@levon 嗯，用起来感受下，这种方式用户体验好， google 的一些应用普遍采用。习惯后以后再用普通的页面请求方式就觉着很难受了

breeswish

2015-11-26 22:17:25 +08:00

模块比较复杂的话加载模块和释放内存是个问题

jinzhe

2015-11-26 22:21:04 +08:00

用 vuejs 路过 QQ 群： 240319632

xunuoi

2015-11-26 22:23:37 +08:00

@breeswish 嗯得自己管理 dom 和事件绑定～不过还好这些还比较清晰、容易控制

xunuoi

2015-11-27 09:37:18 +08:00 via iPhone

@jinzhe vue.js 比较纯粹好用，最近也在学习

xunuoi

2015-11-27 19:12:19 +08:00

@levon 求使用反馈哈哈😍

Bluecoda

2015-11-27 22:55:04 +08:00

pjax 我记得 2011 年左右就开始用了吧？不是什么新货啊

xunuoi

2015-11-28 09:22:31 +08:00 via iPhone

@Bluecoda 没推起来，用的人不多，但是真应该推荐都用起来这种开发方式，特别是偏阅读和新闻类的 web ，结合缓存，体验和性能会很好

Bluecoda

2015-11-28 15:16:13 +08:00

@xunuoi 不是没推起来，现在的 js 框架的 route 都是基于 pushstate 的。没用 js 框架的，有时候也没必要用这个，毕竟是 html5 的。用了 js 框架的，那就更没必要用这个，因为本来就有。

xunuoi

2015-11-28 15:32:30 +08:00

@Bluecoda 呵呵，现在大部分用的是 hash+ajax 好么，是完全前后端分离的，后端就是纯接口，不用判断是否是 pjax 请求，不用判断是返回片段 html 还是完整 html 。

看下一大波 angular 和单页 app 就知道了， url 一般都是带 hash 的，这些并不是 Pjax （虽然 angular 也支持非 hash 的 url 形式，但很少有人用，大部分都用 angular 默认的方式开发，另外 Pjax 还要配合服务端多做些东西，分完整 html+片段 html ，不算是纯前后分离了，所以采用的人并不多）， hash+pushState+hashchange 来完成~~

现在的 js 框架都基于 pushstate ，但是开发者采用 pjax 方案的少。跟框架和用不用框架没关系。

Pjax 不仅仅是指用到 pushState 就行了，还包括 url 跟直接访问服务器直输模板的 url 保持一致。看 url 就行了，带#的都不算 pjax ，因为这种都不支持服务器端直输模板，仍然是 ajax 接口获取数据，爬虫找不到。

带#的 hash 形式，在国内 SEO 不好，百度虫子不认识，需要单独 out 出一套给爬虫的 html 页面， pjax 不需要~因为直接访问就是服务器直输 html ，虫子能爬到~~

典型的应用国内你可以看下 tower.im,建一个项目操作一下，刷新下，观察下 url~

Bluecoda

2015-11-28 18:48:42 +08:00

@xunuoi
你所谓的大部分，是否包括国外的网站？我不认为现在主流的网站（主 js ），还在用 hashbang 。
使用 hashbang 的网站，是用来支持低版本浏览器的，至少 ie8 是不支持 history.pushState()的，所以才退而求其次使用 hashbang 。

我很明白 pjax 是什么，因为三四年前我就开使用了，而到现在，作为一个 rails 开发者，框架中附带的 turbolink 也实现了类似的东西。

这个东西的现状就是这样，处于一个尴尬的位置， js 框架直接使用 history.pushState()，无需 pjax 。也就是给不使用 js 框架时直接服务器渲染页面的时候使用，但是这时候，又要求浏览器支持 history.pushState()。食之无味，弃之可惜。也是当 DHH 说 turbolink 3 要来的时候，一片嘘声的缘故。

xunuoi

2015-11-28 19:35:19 +08:00

@Bluecoda 我们讨论的其实不是一个点，你强调的是 Pjax 是早就有的东西和他的缺点，一直强调你开发多久多早接触了 Pjax ，我说的其实是分享他的用法和优点，并没有强调它是多新～～其实就算讨论新旧这个事， Ajax 这个东西早在 js 诞生之初几乎就有了，但是它流行起来却是 N 年之后

Pjax 并不适合全站 js 框架，就像你说的，对复杂 web 应用，比较尴尬。但比较适合阅读性、内容行的轻网站，比较简单～因为这种通常不需要一套 MVVM 的框架，太复杂太重～同时 Pjax 对 SEO 的友好也很不错，随着老代 IE 浏览器推出历史舞台，这些技术会慢慢伸开来的

每个技术点都有自己的用途吧，找好舞台的位置就不会成为鸡肋～

Bluecoda

2015-11-28 23:25:32 +08:00

@xunuoi 其实，我的意思很明确，我说这么多，就是意思这东西不值得“大家一起”用起来，正好对应你的标题：“大家把 H5 的 Pjax 用起来吧！用户体验好、速度快、省流量！”。
另外，在这里推一个三四年前流行过一段时间的东西，不是说不可以，如果没有新的视角和使用方式，带来的作用也只是拉低了整个社区的水平。
确实你分享你的所得是一种好事，只是在某些人看来，这些东西，挺过时的。感谢你的分享，希望你下次能分享一些干一点的东西。

xunuoi

2015-11-29 11:58:46 +08:00

@Bluecoda 拉低了社区。。。你是有多想显示自己高级、显示别人的 low 啊？ 5 条回复中，只有你一直在反复提这个时间多久、多老、你之前有多少开发经验。。。只是分享个技术点，不是来比拼能力和见识的。。。用得着这么强调么。。。

还是那句话，技术只有合适的点，而不是通篇的这个垃圾那个过时。。。你听懂了吗？

关于 pjax ，你知道了，不代表别人都知道了， 3 、 4 年前的浏览器水平，跟现在一样么？现在我们公司都不用支持 IE8 了，这种变化难道要忽略么？

你个人不认可或者觉着这个 pjax 很鸡肋很没用，都没问题的。。。但是扯上拉低社区，我就呵呵哒了～～

另外这个简单的 MO.Pjax 有 14 个人星标了，对我来说，这就是分享，他们觉着有用，发这个贴对我来说就是好的、有价值的～～

东西总会有人去否定、认可， Angular 还有一堆人黑呢，说它复古了 Java 的方式到 js 中～～

每个人都有每个人的见解和判断，何必在此用你的个人见解，去封杀别人分享的权利！

iLtc

2015-11-30 11:27:34 +08:00

我一直在用 pjax ，不过这个版本有本地存储看起来更好一些

xunuoi

2015-11-30 11:42:10 +08:00

@iLtc 恩，现在这个的本地存储过期时间默认值是 12 小时，可能有点短，设置成 24 小时或许更合适一些~

lestat

2017-07-11 12:38:04 +08:00 via iPhone

没有多好多差，只有最适合，什么样的需求就用适合它的技术，没必要贬低一个技术，毕竟，存在即是合理。本人菜鸟，感觉 pjax 体验很不错