V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
disinfeqt
V2EX  ›  JavaScript

Pjax 之于 iOS Web App

  •  
  •   disinfeqt · 2011-04-08 11:35:46 +08:00 · 6412 次点击
    这是一个创建于 5007 天前的主题,其中的信息可能已经有所发展或是发生改变。
    GitHub 的 CEO 和 co-founder —— Chris Wanstrath (defunkt )本身就是个技术狂人,大名鼎鼎的模版语言 {{ mustache }} 和好用的 alert() 替代品 Facebox 都是他的作品。

    Pjax 不过是他的一个小玩具而已。如果你细心观察过 Github 的 code view 页面,譬如 https://github.com/defunkt/jquery-pjax 你会发现点击每个 repo 里的文件后,是用 ajax 的方式加载的,而且 URL 也会跟着完美转换,不会出现 Twitter 的 /#!/。

    再转换话题到 iOS Web App,当你把网站封装为可以从桌面启动的 web app 时,一旦页面内有需要跳转的页面,那 web app 就露馅了,跳到 Safari 打开肯定不是好的用户体验。

    这样一来,你有两个选择:1) 把整个网站改造为纯 ajax 结构;2) 用 pjax 伪造。

    因此,对我个人而言,这个东西堪称神器。

    PS: 同类型、更强大的还有 Ajaxify http://max.jsrhost.com/ajaxify/
    13 条回复    1970-01-01 08:00:00 +08:00
    aligo
        1
    aligo  
       2011-04-08 12:00:50 +08:00
    cool!用到了window.history,连gaq都考虑到了
    不过这个东西和hash还是不同,hash是单入口的,也就是所谓纯ajax,当然同时也可以实现混合ajax
    这个东西话就必须确保每个url都是通过url还有动态方式同时可以访问的
    我还是比较喜欢hash的方式,同时把a的href写成不带hash的,然后通过绑定click事件转换为hash方式就好-A-
    disinfeqt
        2
    disinfeqt  
    OP
       2011-04-08 12:08:45 +08:00 via iPhone
    @aligo 所以我称之为「伪装 ajax」,适合给架构完毕的中小型网站,或者单独给一个 module 使用。
    aligo
        3
    aligo  
       2011-04-08 12:13:21 +08:00
    这也是ajax啊,绝对不是伪装的,一样通过xhr发起请求,只不过是为了实现像hash一样的前进后退功能,但采取更改整个url而不是hash的方式而已
    flytwokites
        4
    flytwokites  
       2011-04-08 12:34:26 +08:00
    太神了!

    另外,我始终觉得hash方式是在http上打的一个丑陋的补丁,带hash的url不是真正的原生url,只能运用于带js的浏览器,别的爬虫什么的都不能直接使用。
    sogood
        5
    sogood  
       2011-04-08 12:39:01 +08:00 via iPod
    Github 的效果就是基于这个做出来的啊,爽。
    aligo
        6
    aligo  
       2011-04-08 12:54:43 +08:00
    @flytwokites hash只是出现在地址栏啊,爬虫爬的是href,无影响
    disinfeqt
        7
    disinfeqt  
    OP
       2011-04-08 13:13:52 +08:00
    @aligo 晕,我的意思是:把当前的静态网站改造成 ajax 加载,跟网站架构是不相关的。
    fanzeyi
        8
    fanzeyi  
       2011-04-08 17:40:50 +08:00
    我一直在想他这个效果是怎么做出来的。。
    原来如此....
    aligo
        9
    aligo  
       2011-04-08 18:53:15 +08:00
    @disinfeqt 。。。这个的话用hash或者什么都不用也行啊,只要判断request是xhr发起就返回局部模版就行了啊

    pjax这玩意的主要作用在于实现ajax的前进后退还有各种类似gaq的记录吧
    sparklo
        10
    sparklo  
       2011-04-08 19:45:48 +08:00
    eh... 这个和jquery中的history plugin有什么本质的区别么?

    http://www.serpere.info/jquery-history-plugin/samples/ajax/#1
    reorx
        11
    reorx  
       2011-04-08 20:10:05 +08:00
    请教各位一个问题: Pjax是怎么实现地址栏URL转换却不加载相应页面的呢?比如改变hash,只需要给window.location.hash 赋值即可,而给window.location.href赋值浏览器就自动加载那个URL了。
    fanzeyi
        12
    fanzeyi  
       2011-04-08 20:39:33 +08:00
    刚刚发现 tumblr 也是这个效果
    http://www.tumblr.com 点右上角的log in
    会有一个动画效果到 http://www.tumblr.com/login
    然后再点右上角的 Sign up 会动画效果到 http://www.tumblr.com/register
    aligo
        13
    aligo  
       2011-04-08 21:02:07 +08:00
    @reorx 用window.history的pushState和replaceState
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   880 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:37 · PVG 04:37 · LAX 12:37 · JFK 15:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.