推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 3719 天前的主题，其中的信息可能已经有所发展或是发生改变。
花瓣（ 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 吗？
有没有相关的库、文章可以学习？
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 吗？
有没有相关的库、文章可以学习？
 | 1 nowgoo 2015-09-06 17:16:44 +08:00 |
| 2 nowgoo 2015-09-06 17:19:02 +08:00  1 上面的链接挂了，关键词： html5 history api |
 | 3 abelyao 2015-09-06 17:21:40 +08:00 1 基本就是楼上说的那样，大概的应用原理就是，点某个 item 的时候通过 AJAX 加载这个 item 的内容到列表页上，然后通过 window.history.pushState 改变当前地址栏显示的 url （实际上你还是停留在列表页） |
 | 4 whahuzhihao 2015-09-06 17:21:59 +08:00 history 类似的还有 网易云音乐 WEB 版这种跳转不会中断播放 也是用的这种特性 |
 | 5 ChefIsAwesome 2015-09-06 17:23:09 +08:00 直接访问回页面， ajax 请求回数据。同一个数据要做两手准备，后端做起来挺麻烦的。 |
 | 6 fburst 2015-09-06 17:24:27 +08:00 1 |
 | 7 billdc 2015-09-06 17:31:39 +08:00 1 现在主流框架都支持,楼上说得没错,有一些是用 html5 history api. pajax,react,angularjs 都支持,自己手动写比较麻烦,建议使用框架,这样对于不支持 html5 的浏览器,也能很好支持. |
| 8 ChefIsAwesome 2015-09-06 17:31:49 +08:00 @whahuzhihao 网易那个是用 hash 做路由的，跟花瓣的不一样。 |
 | 9 kalintw OP |
 | 10 NemoAlex 2015-09-06 17:48:08 +08:00 1 楼上说的没错， HTML History API 。并不是什么新鲜的东西了。 花瓣这个，具体的方案是用了 History.js ，会自动在不兼容的浏览器上使用 hash tag 来实现。 |
 | 11 larnshare 2015-09-06 17:51:59 +08:00 |
 | 13 monsun 2015-09-06 18:57:23 +08:00 @whahuzhihao 网易云音乐之类的跟这个不太相同, 播放控件是放在外层,内页全部用 iframe 加载. 以前干过这档子事.. |
 | 14 coffce404 2015-09-06 19:08:40 +08:00 利用 HTML5 History API ，以前封装过这样的库 https://github.com/Coffcer/coffce-pjax 在现代浏览器上使用 pushState ，在低版本浏览器上（ IE8, IE9 ）使用 hash ，对更低的 IE6~7 和不执行 js 的搜索引擎蜘蛛则保持默认跳转。 不过已经很久不维护啦 |
 | 15 ttph1oc 2015-09-06 19:45:14 +08:00 直接访问和当前页弹框应该是两套模板。但我个人是很憎恨这样搞的，因为我认为相同路由就应该给我相同的响应。正面例子是 Chrome 应用商店。 |
 | 16 loading 2015-09-06 19:49:12 +08:00 via iPhone 搜 pjax 就是你要的东西。 |
 | 17 malcolmyu 2015-09-07 11:47:17 +08:00 关键词 pjax |
 | 18 2015813 2015-09-07 11:59:24 +08:00 相关内容 ajax |
 | 19 keyanzhang 2015-09-07 14:38:19 +08:00 1 如果你用 React 的话，这份 react-router 的范例代码准确的实现了你的需求： https://github.com/rackt/react-router/blob/master/examples/pinterest/app.js |
Select Language