断断续续写了一个多月的时间,终于在这个学期末把练手项目 QiuReader 的功能给基本实现了。 ( ̄▽ ̄)

最初是看到 Neat Reader ,觉得意外的好用,恰好当时决定写个项目练手,于是便萌生了仿写一个项目的想法。就因为这个想法,于是在接下来的将近一周的时间里我都感觉身体被掏空。。。问题太多了!!!w(゚Д゚)w
首先是使用的 js 库的问题。
先后找到了 epub.js 和 readium.js,结果发现前者的渲染方式有限,而后者不仅文档少,而且仅仅是构建就相当麻烦(尚未接触各种打包及模块化工具),于是我选择了前者。
epub.js 这个库就使用而言是相当简单的,demo 也给了相当多。不过由于它支持的渲染方式有限,而又我想要实现垂直滚动,因此一直被卡在这里。经历了一番翻Issue、google后仍然无果,在纠结要不要换成 readium 时,发现项目里其实提供了相当多的 example。抱着希望看了一遍后,终于找到了想要的内容,此外还了解了其它功能的实现方式。感动。〒▽〒
之后就是项目中的问题了。
由于作者姿势水品不够,之前只写过一些简单的小例子,写页面也只是用 jQuery 和 CSS 框架暴力实现。因此在决定用原生 js 实现功能之后,发现有很多 CSS 框架的小组件都不得不由自己来实现。没办法,最后在一系列搜索+查看框架的写法后,勉强实现了简易版的组件。
然后就是代码的问题。由于对代码的掌控力不够,随着代码量的增加,发现自己设计的各种不合理,可读性很差,被 debug 弄得真心累。这个问题现在仍然在代码中。。。
这次这个练习给我最大的感受就是自己了解的还是太少了,看来后期有必要开始学习 ES6 和一些前端工程化相关的知识了。
附演示图片:
