V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
xunuoi
V2EX  ›  分享创造

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

  •  
  •   xunuoi · 2015-11-26 21:44:42 +08:00 · 7104 次点击
    这是一个创建于 3045 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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')
    然后呢? 没然后了,搞定收工了!

    前端童鞋们一起用起来吧!!
    19 条回复    2017-07-11 12:38:04 +08:00
    loading
        1
    loading  
       2015-11-26 21:58:28 +08:00 via iPhone
    先顶后看
    levon
        2
    levon  
       2015-11-26 21:59:45 +08:00
    拿来用用,感谢
    xunuoi
        3
    xunuoi  
    OP
       2015-11-26 22:15:10 +08:00 via iPhone
    @levon 嗯,用起来感受下,这种方式用户体验好, google 的一些应用普遍采用。习惯后以后再用普通的页面请求方式就觉着很难受了
    breeswish
        4
    breeswish  
       2015-11-26 22:17:25 +08:00
    模块比较复杂的话加载模块和释放内存是个问题
    jinzhe
        5
    jinzhe  
       2015-11-26 22:21:04 +08:00
    用 vuejs 路过 QQ 群: 240319632
    xunuoi
        6
    xunuoi  
    OP
       2015-11-26 22:23:37 +08:00
    @breeswish 嗯得自己管理 dom 和事件绑定~不过还好这些还比较清晰、容易控制
    xunuoi
        7
    xunuoi  
    OP
       2015-11-27 09:37:18 +08:00 via iPhone
    @jinzhe vue.js 比较纯粹好用,最近也在学习
    xunuoi
        8
    xunuoi  
    OP
       2015-11-27 19:12:19 +08:00
    @levon 求使用反馈哈哈😍
    Bluecoda
        9
    Bluecoda  
       2015-11-27 22:55:04 +08:00
    pjax 我记得 2011 年左右就开始用了吧?不是什么新货啊
    xunuoi
        10
    xunuoi  
    OP
       2015-11-28 09:22:31 +08:00 via iPhone
    @Bluecoda 没推起来,用的人不多,但是真应该推荐都用起来这种开发方式,特别是偏阅读和新闻类的 web ,结合缓存,体验和性能会很好
    Bluecoda
        11
    Bluecoda  
       2015-11-28 15:16:13 +08:00
    @xunuoi 不是没推起来,现在的 js 框架的 route 都是基于 pushstate 的。没用 js 框架的,有时候也没必要用这个,毕竟是 html5 的。用了 js 框架的,那就更没必要用这个,因为本来就有。
    xunuoi
        12
    xunuoi  
    OP
       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
        13
    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
        14
    xunuoi  
    OP
       2015-11-28 19:35:19 +08:00
    @Bluecoda 我们讨论的其实不是一个点,你强调的是 Pjax 是早就有的东西和他的缺点,一直强调你开发多久多早接触了 Pjax ,我说的其实是分享他的用法和优点,并没有强调它是多新~~其实就算讨论新旧这个事, Ajax 这个东西早在 js 诞生之初几乎就有了,但是它流行起来却是 N 年之后

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

    每个技术点都有自己的用途吧,找好舞台的位置就不会成为鸡肋~
    Bluecoda
        15
    Bluecoda  
       2015-11-28 23:25:32 +08:00
    @xunuoi 其实,我的意思很明确,我说这么多,就是意思这东西不值得“大家一起”用起来,正好对应你的标题:“大家把 H5 的 Pjax 用起来吧!用户体验好、速度快、省流量!”。
    另外,在这里推一个三四年前流行过一段时间的东西,不是说不可以,如果没有新的视角和使用方式,带来的作用也只是拉低了整个社区的水平。
    确实你分享你的所得是一种好事,只是在某些人看来,这些东西,挺过时的。感谢你的分享,希望你下次能分享一些干一点的东西。
    xunuoi
        16
    xunuoi  
    OP
       2015-11-29 11:58:46 +08:00   ❤️ 1
    @Bluecoda 拉低了社区。。。你是有多想显示自己高级、显示别人的 low 啊? 5 条回复中,只有你一直在反复提这个时间多久、多老、你之前有多少开发经验。。。只是分享个技术点,不是来比拼能力和见识的。。。用得着这么强调么。。。

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

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

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

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

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

    每个人都有每个人的见解和判断,何必在此用你的个人见解,去封杀别人分享的权利!
    iLtc
        17
    iLtc  
       2015-11-30 11:27:34 +08:00
    我一直在用 pjax ,不过这个版本有本地存储看起来更好一些
    xunuoi
        18
    xunuoi  
    OP
       2015-11-30 11:42:10 +08:00
    @iLtc 恩,现在这个的本地存储过期时间默认值是 12 小时,可能有点短, 设置成 24 小时或许更合适一些~
    lestat
        19
    lestat  
       2017-07-11 12:38:04 +08:00 via iPhone
    没有多好多差,只有最适合,什么样的需求就用适合它的技术,没必要贬低一个技术,毕竟,存在即是合理。本人菜鸟,感觉 pjax 体验很不错
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2925 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:13 · PVG 19:13 · LAX 04:13 · JFK 07:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.