书摘。

一个基于JavaScript开发的书籍好句摘录插件,收录了书籍/影视/动漫中的好句。

fly6022

喜欢

639
浏览
0
喜欢

> 更多图片

项目状态:填坑进行中
开放度:公开
所属分类:软件
发布时间:2021-01-20
最近更新:2021-03-20

标签

描述

https://book.fly6022.fun/


详细说明

你可以将它直接引用到你的网站、博客或是APP中。
同时,你也可以加入我们,参与到书摘的建设当中。

特性

  • 可移植性强

  • JavaScript开发

  • 轻量化

  • 基于 MIT 协议开源

实现原理

仅说明几个重大版本更新的实现原理。

v1.1.0

『书摘。』核心插件使用JavaScript编写,其原理为访问者每一次刷新网页,都会触发“haoju.js”生成一个随机数,之后,浏览器根据“haoju.js”生成的随机数,在“haoju.js”中调用为这个随机数的句子,再显示到网页的指定位置上。

例如:

“haoju.js”生成了随机数 0.
    
经过查找,0 所对应的句子是 “‘怕什么?一切要来的都得来,不必怕。’ —— 沈从文 《边城》”

如果返回的是以下的值,是插件bug,刷新一下试试:(暂时未找到解决方案,不过看了看Javascript手册,以下返回值是“未定义”的意思,我认为应该是插件已经生成了随机数,但是未执行查找对应字符串的命令而引起的)

undefined

v1.3.0

1.3.0版本在1.1.0版本基础之上,增加了自动更新功能,下面我来介绍一下自动更新功能的实现原理。

自动更新功能的实现基于Javascript语言。

1.3.0版本在1.2.0版本JavaScript脚本基础上,将字符串嵌套进了函数(function),之后通过加载setTimeout以及setInterval方法来实现自动更新。前者(setTimeout)用于在指定的毫秒数后调用函数,我此处配置毫秒数为0,主要是因为如果不设置为0,会与后者(setInterval)产生冲突,造成无法显示;后者(setInterval)用于在用户打开页面后计时,这里将毫秒数设置为10000,即10秒,也就是在用户打开页面后10秒钟自动更新下一个内容。

setTimeout("haoju()","0");setInterval("haoju()","10000"); // 计时器,单位毫秒

v2.0.0

2.0.0版本是一次重大更新。

haoju.js不再兼顾控制功能及存储功能,而是只负责控制书摘好句,存储功能由被单独划分出来的若干个存储Javascript文件(以下称作“数据源文件”;每个文件最大不超过100KB,达到100KB的文件将不再添加新数据)负责。如:

/src/haoju/1.js 以及 /src/haoju/2.js

这样做的好处是节省带宽(上文提到每个数据源文件的大小应不超过100KB,也就意味着书摘在加载过程中消耗的流量不会超过100KB),同时便于开发者维护(便于排除bug)。

同时,控制脚本也发生了改变:

依然采用“获取随机数 → 寻找枚举对象”这一机制。通过该机制可以快速获取到数据源文件(GET方式),根据此机制,我们将控制文件,即haoju.js的大小精简到了603字节。

其次,该版本还有一些小的改动:

考虑到前代“书摘好句”的刷新时间为10000毫秒,即10秒,导致了一些用户来不及阅读完句子,因此,2.0.0版本将刷新时间调整至了15000毫秒,即15秒。

v3.0.0

3.0.0版本是一次重大更新。

在之前的版本中,“好句”是以Array(数组)的形式被存储在JavaScript文件中的,此次更新,废除了这一机制(会造成代码十分臃肿且不利于维护),改用JSON存储“好句”。

同时,由于存储机制的改变,控制文件也被做了微调:

  • 采用XMLHttpRequest库,并由GET方式请求JSON文件:

var request = new XMLHttpRequest();
request.open("GET", url);
  • 控制文件(Javascript)由两部分(getdata()函数和dealdata()函数)组成,它们的分工不同,前者负责请求,后者负责处理。

链接表


教程

<!-- html -->
<div id="haoju" class="shuzhai"></div>
                  
<!-- Javascript -->
<script src="https://book.fly6022.fun/note/haoju.js"></script>
                  
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://book.fly6022.fun/note/css/shuzhai.css">