这是一个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代码;本地浏览器就会执行这段代码。
原文地址:http://www.cnblogs.com/bluebirid/p/5812032.html