前端实现网络小说阅读器-阿里云开发者社区

开发者社区> 文艺小青年> 正文

前端实现网络小说阅读器

简介:
+关注继续查看

昨天晚上在群里交流各种脑动大开的题目,我顺手也提了一个问题: JS如何做“字符分页“

原意是源于我4年前公司项目,我负责开发1年的样子,后来各种原因就没有然后了…

http://reader.appcarrier.com/ 

image image  image

以上图片是手机上的截图,Metro风格当前可是风靡一时,软件本身是类似现在的”追书神器”

通过书名,在网络上搜索到对应的内容,之后保存到本地数据库。在通过JS获取数据再处理

自己装好测了下,貌似下载服务器已经挂了~

 

只翻到旧版的代码,预览效果

123

 

 

程序采用PhoneGap打包的,数据采集是用底层完成的,其余的都是通过前端处理

规定:采集到一本书内容,按照书的章节分数据块,写入到本地数据库中,数据库可以用SQLite,webkit是支持的

前端层面需要处理的几个重要问题:

  • 字符分页:一个页面到底可以容纳多少字符(文字,符号,空格等等)
  • 性能问题:如何快速生成指定页面
  • 模拟翻页:类似ibooks翻页效果页正反页面都有文字

 

由于时间太久了,我也没仔细去查阅代码了,这里只能凭记忆描述下

 

原理:

要实现类似于图书的效果,首先要进行的,就是分页操作。也就是说,需要把一段长长的文字,分解成若干个页面。

 

分页背景知识:

表面上来看,分页操作并不复杂,但实际上分页是非常复杂的功能,这个想靠js去计算文字占用的空间,难,非常难

我在问的时候,大家脑洞打开,比如:用一个不换行的宽度100%的容器,计算什么时候scrollwidth 大于width,那么就可以计算出  标点需要多少个填满,等等之类的答案

现在站在我的理解层次简单描述下:

纯文本:

纯文本是最简单的情况。纯文本的高度是固定的,因此,只要能计算出每一行的高度,就可以进行分页。但是,中文排版也不是一件简单的事情,因为中文的标点是很有讲究的:

  • 某些标点不能出现在行的开头,例如“逗号”就不应该出现在行首。有些标点不能出现在行的结尾,例如“正引号”就不应该出现在行的结尾。这个叫做标点的“避头尾”。
  • 如果出现连续的标点,例如冒号后面跟着引号,那么这两个标点不应该占据2个字符的位置,而应该合并起来占据一个字符的位置。这个叫做标点的“压缩”。

html格式:

对于html格式,情况就复杂很多,因此此时行距不固定了,段前、段后间距可能是任意值,而且每行的文字的字体、字号都有可能不一样,这样,计算每一行的高度,就要考虑到种种细微的因素。

如果中间再有图像,情况就会进一步复杂。图像的高度,图像和文字的边距等等。

服务器计算:

如果在服务器里面,提前计算好分页呢?也有问题, 因为要适合不同的手机分辨率,软件本身还可以设置字体的大小,等等

 

因此:

  • 即使是纯文本,高度的计算也是有一个复杂度的。当然,有些软件可能不考虑这些中文特性,胡乱计算。
  • 不管采用底层的Java语言,还是采用客户端的Javascript语言,要实现精致的分页算法都是很难的。
  • 可能有人想问,如果分页分得不好会出现什么情况。最常见的,是最下面以行,某些文字只能显示“半行”。而且显而易见,出现半行的几率,远远大于正好是整行的几率。

总结:通过纯理论去计算分页,和自己写一个文字排版软件区别已经不大了,这绝不是短期的工作能够完成的。况且我也写不出~

 

HTML对分页的支持

HTML并不直接支持分页。

Adobe正在建议一个新的CSS样式,称为CSS Region(http://www.adobe.com/devnet/html5/articles/css3-regions.html)。

如果这个功能开发成功,就能实现类似于排版软件的排版效果。据说这个功能在新的Chrome测试版中正在开发中,但何时能投入使用并稳定运行,还是未知数。

html5新增加了一个功能,就是分栏(columns)。分栏功能可以制作类似于Word中的分栏效果

html5的分栏效果以及CSS代码

clip_image002

如果还不了解分栏,则请阅读如下文章:

分栏虽然不如CSS region那样灵活,但勉强也能够在不同的栏之间,实现文字的拆分。如果我们把每个栏设置成刚好一页的话,就初步模拟了分页的效果

 

分栏功能的性能及动态结构

虽然分栏功能初步能够模拟分页效果,但还存在着不少问题:

  1. 分栏形成的页面,是连续排列的。也就是说,可以支持滑动操作,但并不能支持“翻页”效果。
  2. 如果栏目过多时,性能会很差。(大约20~30个栏目会有明显性能下降)

我们先讨论第2个问题,就是如何动态切换分栏中的内容。

由于分栏存在性能问题,因此,我们不可能把很长的内容,全部用分栏排列(请注意,这是我们后面进行了复杂设计的原因。如果分栏没有性能问题,自然也不需要那么复杂的设计)。

由于性能问题,我们不能把所有需要的内容,全部放在分栏结构中,只能一段一段地显示在栏目中。也就是说,用于构建分栏的段落,是动态变化的

在这种情况下,对于分页的方式而言,最大的问题,是前面的段落,会影响后面的段落的排列。

考虑如下图所示的情况。

clip_image001

图中两个段落在分栏状态下排列

图中,蓝色段落充满了一个栏后,会挤出一些内容到下一栏。而绿色段落,会从蓝色段落结束的地方继续排列。

现在假设动态切换时,蓝色段落被删除,而在绿色段落后面,增加了红色段落。此时,不能让绿色段落从栏首开始排列,必须在绿色段落的开始,给出一个空白的间隔出来,

如图所示。

clip_image002[5]

图中红色段落的排版

也就是说,虽然蓝色段落被删除,但是其对分栏排版的影响,仍然需要计算在内。就上图来说,第1个栏可以完全忽略,因为不影响后面的排版。第2栏的上半部分,也就是蓝色段落的“剩余影响”,在排版仍然要考虑在内。

如何计算每个段落对后面的段落的“剩余影响”呢?幸好在分栏模式下,提供了获取每个段落的高度的功能,就是用zepto的height()函数就可以获取高度。获取了高度之后,除以栏目高度的余数,就是“剩余影响”。

因此,精确地计算出每个段落的高度,就可以实现动态的分栏排版。

 

以上就是基于对分栏实现排版的理论,之后涉及

  • 分栏功能对翻页的支持
  • 分页的实现
  • 翻页的效果
  • 性能优化
本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/5304657.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6930 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7765 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
444 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
3830 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3229 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16846 0
3576
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载