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

花瓣网这种 Route 是如何做的

  •  
  •   kalintw · Sep 6, 2015 · 6642 views
    This topic created in 4078 days ago, the information mentioned may be changed or developed.
    花瓣( Pinterest )这种风格的 route :

    1. 在主页或者瀑布流列表页,点击单个 item
    1.1 地址栏变成单个 pin 的 url ,比如: http://huaban.com/pins/469222884 ,注意,此时页面并没有刷新;
    1.2 单个 pin 的内容是以 modal 的形式弹出来,覆盖在原来的瀑布流列表页上面,瀑布流列表页并没有remove;
    1.3 关闭 modal 单页,地址栏变回列表页 url

    2. 直接访问单个 item
    比如还是那个单个 pin 的 url : http://huaban.com/pins/469222884, 直接是内容页。


    请教前端的朋友,这种效果大概是怎么做的?是什么单独的技术,或者 best practice 吗?
    有没有相关的库、文章可以学习?
    19 replies  •  2015-09-07 14:38:19 +08:00
    nowgoo
    nowgoo
    Sep 6, 2015❤️1
    2
    上面的链接挂了,关键词: html5 history api
    abelyao
    abelyao
    Sep 6, 2015❤️1
    3
    基本就是楼上说的那样,大概的应用原理就是,点某个 item 的时候通过 AJAX 加载这个 item 的内容到列表页上,然后通过 window.history.pushState 改变当前地址栏显示的 url (实际上你还是停留在列表页)
    whahugao
    whahugao
    Sep 6, 2015
    4
    history 类似的还有 网易云音乐 WEB 版这种跳转不会中断播放 也是用的这种特性
    ChefIsAwesome
    ChefIsAwesome
    Sep 6, 2015
    5
    直接访问回页面, ajax 请求回数据。同一个数据要做两手准备,后端做起来挺麻烦的。
    billdc
    billdc
    Sep 6, 2015❤️1
    7
    现在主流框架都支持,楼上说得没错,有一些是用 html5 history api.
    pajax,react,angularjs 都支持,自己手动写比较麻烦,建议使用框架,这样对于不支持 html5 的浏览器,也能很好支持.
    ChefIsAwesome
    ChefIsAwesome
    Sep 6, 2015
    8
    @whahuzhihao 网易那个是用 hash 做路由的,跟花瓣的不一样。
    kalintw
    kalintw
    OP
    Sep 6, 2015
    9
    @whahuzhihao
    @nowgoo
    @abelyao
    @ChefIsAwesome
    @fburst
    @billdc

    知道方向就好找资料了,多谢各位回复!
    NemoAlex
    NemoAlex
    Sep 6, 2015❤️1
    10
    楼上说的没错, HTML History API 。并不是什么新鲜的东西了。
    花瓣这个,具体的方案是用了 History.js ,会自动在不兼容的浏览器上使用 hash tag 来实现。
    learnshare
    learnshare
    Sep 6, 2015
    11
    @whahuzhihao
    @ChefIsAwesome
    网易云音乐内嵌一个 iframe , URL 控制刷新 iframe 里的页面
    kalintw
    kalintw
    OP
    Sep 6, 2015
    12
    @NemoAlex 多谢!
    monsun
    monsun
    Sep 6, 2015
    13
    @whahuzhihao 网易云音乐之类的跟这个不太相同, 播放控件是放在外层,内页全部用 iframe 加载. 以前干过这档子事..
    coffce404
    coffce404
    Sep 6, 2015
    14
    利用 HTML5 History API ,以前封装过这样的库 https://github.com/Coffcer/coffce-pjax
    在现代浏览器上使用 pushState ,在低版本浏览器上( IE8, IE9 )使用 hash ,对更低的 IE6~7 和不执行 js 的搜索引擎蜘蛛则保持默认跳转。
    不过已经很久不维护啦
    ttph1oc
    ttph1oc
    Sep 6, 2015
    15
    直接访问和当前页弹框应该是两套模板。但我个人是很憎恨这样搞的,因为我认为相同路由就应该给我相同的响应。正面例子是 Chrome 应用商店。
    loading
    loading
    Sep 6, 2015 via iPhone
    16
    搜 pjax 就是你要的东西。
    malcolmyu
    malcolmyu
    Sep 7, 2015
    17
    关键词 pjax
    2015813
    2015813
    Sep 7, 2015
    18
    相关内容 ajax
    keyanzhang
    keyanzhang
    Sep 7, 2015❤️1
    19
    如果你用 React 的话,这份 react-router 的范例代码准确的实现了你的需求: https://github.com/rackt/react-router/blob/master/examples/pinterest/app.js
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2658 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 74ms · UTC 13:45 · PVG 21:45 · LAX 05:45 · JFK 08:45
    ♥ Do have faith in what you're doing.