推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
disinfeqt

Pjax 之于 iOS Web App

  •  
  •   disinfeqt · Apr 8, 2011 · 6974 views
    This topic created in 5541 days ago, the information mentioned may be changed or developed.
    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 replies    1970-01-01 08:00:00 +08:00
    aligo
        1
    aligo  
       Apr 8, 2011
    cool!用到了window.history,连gaq都考虑到了
    不过这个东西和hash还是不同,hash是单入口的,也就是所谓纯ajax,当然同时也可以实现混合ajax
    这个东西话就必须确保每个url都是通过url还有动态方式同时可以访问的
    我还是比较喜欢hash的方式,同时把a的href写成不带hash的,然后通过绑定click事件转换为hash方式就好-A-
    disinfeqt
        2
    disinfeqt  
    OP
       Apr 8, 2011 via iPhone
    @aligo 所以我称之为「伪装 ajax」,适合给架构完毕的中小型网站,或者单独给一个 module 使用。
    aligo
        3
    aligo  
       Apr 8, 2011
    这也是ajax啊,绝对不是伪装的,一样通过xhr发起请求,只不过是为了实现像hash一样的前进后退功能,但采取更改整个url而不是hash的方式而已
    flytwokites
        4
    flytwokites  
       Apr 8, 2011
    太神了!

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

    pjax这玩意的主要作用在于实现ajax的前进后退还有各种类似gaq的记录吧
    sparklo
        10
    sparklo  
       Apr 8, 2011
    eh... 这个和jquery中的history plugin有什么本质的区别么?

    http://www.serpere.info/jquery-history-plugin/samples/ajax/#1
    reorx
        11
    reorx  
       Apr 8, 2011
    请教各位一个问题: Pjax是怎么实现地址栏URL转换却不加载相应页面的呢?比如改变hash,只需要给window.location.hash 赋值即可,而给window.location.href赋值浏览器就自动加载那个URL了。
    fanzeyi
        12
    fanzeyi  
       Apr 8, 2011
    刚刚发现 tumblr 也是这个效果
    http://www.tumblr.com 点右上角的log in
    会有一个动画效果到 http://www.tumblr.com/login
    然后再点右上角的 Sign up 会动画效果到 http://www.tumblr.com/register
    aligo
        13
    aligo  
       Apr 8, 2011
    @reorx 用window.history的pushState和replaceState
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   4400 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 1124ms · UTC 10:08 · PVG 18:08 · LAX 03:08 · JFK 06:08
    ♥ Do have faith in what you're doing.