webApp 阅读器项目实践 – bluebird8880 – 博客园

来源: webApp 阅读器项目实践 – bluebird8880 – 博客园

  这是一个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代码;本地浏览器就会执行这段代 码。

分享到: 更多 (0)