9. 模拟书的样式和交互的 turn.js

项目的 Demo 在 http://juy.fm 。

好久没更新了，其实编码并未中断，虽然进度是慢了些。主要原因是这几天的代码之前都写过，只是做了些整理和微调。我把核心步骤再复现一遍：

1. 下载 turn.js 插件放在项目的 client/lib 文件夹中。阅读 turn.js 的文档，了解其中最基础的几个方法。
2. turn.js 的实现中有一个部分需要理解清楚，不管这本书有多少页，它最多只会保存 6 页的 DOM 元素。所以在本项目中，除了前后封面以及开篇介绍页外，其余具体的歌曲页都是通过 $.turn('addPage', function() { ... }) 动态加入的。
3. 另一块需要系统了解的知识是对 audio 对象的操作，如 play、pause 方法等，以及它的状态值 readyState 为不同值时对应的播放器的状态。
4. 调节音量大小的 slider 我直接选择了 bootstrap-slider 模块。
5. 对了，还有一个辅助工具：IcoMoons 提供的 Web Font，利用到 CSS 的 @font-face 特性。我根据自己的需求选取了一些免费图标自定义了一个字体。Web Font 在我看来最大的几个好处是：体积小、一次加载、可以使用 CSS 调节大小和颜色。
6. 集齐了上述所有这些工具后，就可以一步步搭建 pAlbum 这本乐辑书了。结构部分就是按照需求一类页面对应一个模板；然后再丰富样式；至于 JavaScript 的交互，主要就是处理动态加新页面以及翻页的逻辑。还有一块是尝试对 Audio player 采用状态模式来管理，目前只是用传统的创建类和对象的方式来实现状态模式，下回会考虑结合 JavaScript 的语言特性对已实现的状态模式进行优化。

Github 地址：这次更新内容有点多...

干巴巴地讲了这么多回，上个目前已有的封面图吧：

最帅就这张的 Eric Clapton