这是一个webApp 阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader。

  项目属于麻雀虽小,但五脏俱全的类型,对于前端新手来说,还是很有学习价值。  

一、项目成果展示

二、项目所用技术

语言:Html,css,js

插件:

zepto.js: 使用于移动端的js库,语法与jquery相似,但增加了触摸等移动端事件,去掉了对浏览器兼容的代码,因此更轻量级

jquery.base64.js: 解码base64编码的插件

jquery.jsonp.js: 提供jsonp请求的插件

三、项目实现功能分析

1、HTML结构

阅读器的构造主要是上边栏、文章主体、控制台面板、下边栏几部分:

2、静态页面交互

需要实现的功能有:

1)点击屏幕中央,出现上下边栏;再次点击,上下边栏消失(这是为什么在上一段代码中,添加了响应触摸屏幕的div这个结构,其宽度可以设置为屏幕宽度的30%左右)

2)点击字体,出现控制面板,面板可调节字体的大小;面板可设置内容主体的背景色

3)点击夜间/白天,背景色会切换成暗黑色/乳白色

对于以上功能,完成后,还需要在细节上进行优化:

1)用户滚动页面时,上下边栏应该消失,这样才能不阻碍用户阅读

2)调节字体大小时,应该有最大字体和最小字体的限制;

设置背景色时,选中的颜色的按钮,外围还有一个稍大一点的圆圈;

设置字体时,字体的图标应该高亮;

3)点击夜间/白天,这部分的功能实际上是背景色切换的子集,那么这部分的代码是可复用的;

完成了初步的优化后,还可以进一步完善:

1)用户设置的字体和背景色,是否可以缓存下来,使页面刷新时不变

3、和后台的交互

项目是在data文件夹放了一些json文件,模拟服务端的返回值,这里要解决的问题有:

1)项目中请求的数据是多看阅读中的数据,那么,如何跨域请求

2)获取到了数据后,如何更新到页面

四、项目技术点分析

1、HTML结构

1)控制面板部分,可以看到背景色的几个按钮是不透明的,而面板背景是半透明的:该效果可以通过设置两个div,第一个div设置为半透明的背景色,第二个div作为容纳按钮等标签的容器

2、静态页面交互

1)需要使用js事件来实现CSS样式的切换,包括点击和滚动;对于背景色的几个按钮,监听事件的方式都相同,这里可以使用事件委托的方式来减少代码

2)缓存背景色和字号,可以使用本地存储localStorage实现

3、和后台的交互

  使用jsonp来实现跨域,获取模拟服务端返回的数据  

  关于Jsonp的理解:由于同源策略,a.html不能直接获取b.html的内容,因此利用<script>标签不受同源策略的显示的特性,在script中请求b.html的内容;b.html并不直接返回内容,而是返回 callback({json数据}), 其中,callback是a.html传递给b.html的一个回调函数的名称;这样,b.html返回的实际是一段js代码;本地浏览器就会执行这段代码。

webApp 阅读器项目实践的更多相关文章

  1. 电子书及阅读器Demo

    电子书阅读器(Kindle,电子纸技术.LCD.电子墨水技术等: 亚马逊/当当网站)  电子书产业可分5大环节:内容供应商.数字格式制作商.内容流通服务平台.传输平台以及终端阅读器产品. 全球电子书市 ...

  2. Vue小说阅读器(仿追书神器)

    一个vue阅读器项目,目前已升级到2.0,阅读器支持横向分页并滑动翻页(没有动画,需要动画的可以自己设置,增加transitionDuration即可) 技术栈 vue全家桶+mint-ui gith ...

  3. android新闻项目、饮食助手、下拉刷新、自定义View进度条、ReactNative阅读器等源码

    Android精选源码 Android仿照36Kr官方新闻项目课程源码 一个优雅美观的下拉刷新布局,众多样式可选 安卓版本的VegaScroll滚动布局 android物流详情的弹框 健身饮食记录助手 ...

  4. 读取本地HTML的小说阅读器应用源码项目

    该源码是一个不错的读取本地HTML的小说阅读器,读取本地HTML的小说阅读器,并且源码也比较简单的,非常适合我们的新手朋友拿来学习,有兴趣的朋友研究下. 源码下载: http://code.662p. ...

  5. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  6. android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码

    Android精选源码 android拖拽下拉关闭效果源码 一款优雅的中国风Android App源码 EasySignSeekBar一个漂亮而强大的自定义view15 android仿蘑菇街,蜜芽宝 ...

  7. 【项目实践】手把手带你搞定SSM

    以项目驱动学习,以实践检验真知 前言 现在使用Java后端开发使用的技术栈基本上比较统一:Spring + SpringMVC + Mybatis,即大家常说的SSM.虽然现在流行的做法是使用Spri ...

  8. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  9. Atitit rss没落以及替代品在线阅读器

    Atitit rss没落以及替代品在线阅读器 1.1. 对RSS的疯狂追逐,在2005年达到了一个高峰.1 1.2. Rss的问题,支持支rss,不支持url1 1.3. ,博客受到社交网络的冲击.s ...

随机推荐

  1. Modbus协议

    总体上来说,发送命令格式如下:模块号(1字节)功能码 起始地址(2字节)   数据(X字节) CRC(2位) 模块号(1字节)功能码(要读取的寄存器,读 01,设置05,Coil Status/Inp ...

  2. Elasticsearch分布式搜索集群配置

    配置文件位于%ES_HOME%/config/elasticsearch.yml文件中,用Editplus打开它,你便可以进行配置.   所有的配置都可以使用环境变量,例如:node.rack: ${ ...

  3. java break语句的三种用法

    1.用于switch语句当中,用于终止语句 2.用于跳出循环,此为不带标签的break语句,相当与goto的作用 e.g while(i<j&&h<k){ if(h< ...

  4. POJ2762 UV

    题意:n个山洞,对于每两个山洞s,e,都满足s可以到达e或者e可以到达s,则输出Yes,否则输出No. ---------------------------------------- 第一个缩点的题 ...

  5. javascript 按ctrl和enter键提交表单

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. 包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数 解法一: 思路:采用java中自带的迭代函数进行处理. public class Solution{ /** * @pa ...

  7. php get_magic_quotes_gpc()函数

    magic_quotes_gpc函数在php中的作用是判断解析用户提示的数据,如包括有:post.get.cookie过来的数据增加转义字符“\”,以确保这些数据不会引起程序,特别是数据库语句因为特殊 ...

  8. [php-src]一个Php扩展的结构

    内容均以php5.6.14为例. 要拥有一个PHP扩展的架子,使用源码中准备好的 /ext/ext_skel 工具,可以生成一个可运行的扩展骨架. 不加选项运行 ./ext_skel,可查看所有可用选 ...

  9. 【java】:解析xml

    ==========================================xml文件<?xml version="1.0" encoding="GB231 ...

  10. win8 下 IIS APPPOOL\DefaultAppPool 登录失败的解决方法

    来源:网络 添加ASP.NET网站时,选择添加"添加应用程序"连接sql server 2005(2008)可能会报始下的错误:(说明:2005必报错,2008选报错)" ...