请教 WEB 全局音乐播放器解决方案

[polandeme]

要重构一个音乐网站（pc端），要做到打开其他页面时，音乐播放条在底部不变继续播放，类似单页面应用。类似网站 百度音乐人 的左下角播放条
目前方案有：

1. 用backbone方式重构(ng兼容不够)
2. 用Facebook的BigPipe方式 Quickling
3. 仿照网易云音乐用iframe(总感觉这个不好)
4. 其他

有没有谁用过上面的方案，请教一下优缺点，或者有没有其他方案。

谢谢

[kokdemo]

你说的这种类似网易云音乐

[learnshare]

如果页面是单页面的，可以保证一部分结构不刷新，音乐播放用独立的模块控制就可以了。

http://y.baidu.com/ 的方式是类似的，实现了页面的局部更新。

[fising]

y.qq.com 也是

[polandeme]

@kokdemo 效果就是那个，但是网易云音乐用的是iframe
@learnshare 但是如何保证一部分结构不刷线，ajax之类的缺点太多了吧。

[polandeme]

@fising 他们用的ajax

[zythum]

如果你的网站就是个*音乐网站*。播放器就是*主要功能*的话。
iframe 是最简单。也是最屌丝。也是最方便的。也是开发量最少的。也是兼容性最好的。

你知道么。微博那个挂角播放器要常驻不间断播放。我用类似Quickling的方式搞死我了知道么。

[bigredapple]

肯定iframe 别无选择

[polandeme]

@zythum 但是感觉Quickling，除了开发难度之外，要比iframe好吧。

主要会有什么坑

[zythum]

@polandeme 我是已一个大站的角度说的。

1. 首先是实现Quickling的成本。你的javascript对于每个模块的的instance需要销毁重新绑定。可能需要一个管理器。和每个模块需要修改挂在到管理器。那个页面需要加哪个js。哪个css。css和css之间会不会冲突。因为原来再不通的页面。这两个死活不会遇到的。

2. 在Quickling区域外部的dom结构需要一致。包括样式名className。不然你还需要在跳转页面时用javascript去修改来匹配样式差异。

3. 用Quickling那么用户在你的页面上基本就不会刷新页面了。那么很多状态的修改都需要用javascript来保持了。这个会在不经意的时候发生。然后很容易手足无措。

4. 你需要适配你目前的所有页面。

[Anybfans]

感觉iframe很不错啊。体验不输的。。。关键是简单。。。

[polandeme]

@zythum 谢谢，我再研究一下

@Anybfans 但对于大型网站会比较耗资源

[Jaylee]

看看qq音乐的，做的不错

[polandeme]

@Jaylee 他们是用的ajax请求页面的？

[zythum]

@polandeme 其实对大型网站来说。多几次请求并没有什么问题。
qq 也是iframe

[polandeme]

@zythum

有一个不理解的地方就是quickling和纯ajax加载有哪些不一样，是他用到了pagelet，还是也只是pushstate + ajax ???

thx

[zythum]

pushstate是不可少的。不然中间的历史就丢了。用户也没法用url回溯到当前浏览的页面了。

quickling 意思只是不做跳转的方式切换页面。

中间用什么去做切换呢。很多方式可以。用ajax可以。用一个iframe去请求回调parent的方法也可以，jsonp也可以。只要能拿到数据啥都可以。

后端吐的数据还是拼好的html呢。都是可以的这个就看你自己怎么处理了。就看怎么和现有架构结合了。

这种技术选型是很灵活的。没有最好的只有最适合的。

说facebook怎么做的。
目前我看facebook已经基本用react了。就是属于模版在前端，后端吐数据的方式。ajax还是ajax，高级浏览器都支持ajax都已经支持Chunked transfer。就没必要去用iframe中间过程的方式来实现了。

说些有的没的。react在facebook真的用啊。不想某angular是吧。

[polandeme]

@zythum 谢谢，现在是越弄越乱了

[zythum]

@polandeme 确实。如果需要的话可以邮件我。然后加QQ说。 邮件你可以点我头像找到。

[polandeme]

@zythum 邮件已发，麻烦查收一下，谢谢 -:D