客户端发现_观影团活动页面开发与客户端新版跳转测试页面开发项目总结

这一周过的是我理想的实习状态，手头有项目则忙项目，没项目则提高基础技能。那么下面来看看这周做的活动页面效果吧。






项目介绍

（一）．观影团活动页面的开发


此活动页面在2015年元旦完成重构。重构过程中遇到视觉稿尺寸非常规，采取计算器按比例计算解决。上一个世界杯送流量的页面采用了响应式布局，构造填写手机号的表单。此页面采取外围标签包裹，使按320px构造的页面始终在页面居中显示。页面逻辑相对简单。

SimpleModal有个特性，可以不刷新再度构建弹框恢复默认设置。这个特性可以从SimpleModal构建角度理解，其构建是将参数传入的DOM放入其新生成DOM结构中；而弹框隐藏时，实际上是弹框DOM结构销毁，参数传入的DOM重新在原位置生成的过程。从中可以推测出SimpleModal是将传入参数DOM有一个存储与释放的过程。

本项目重构代码地址：http://download.csdn.net/detail/yingyiledi/8320715

（二）．客户端新版跳转测试页面开发
此项目主要根据需求提供的接口，构造一些按钮，提供一个测试环境下的测试页面。开发页面很简单，主要的精力用在确定需求即接口参数和按钮数量种类上。主要与后端（ios和android）与测试沟通上花费了比较长的时间。


本次项目确定了与谁沟通后，下次安排接口问题就能够快速完成需求。不得不感叹团队的效率不在技术开发，而在沟通上。

（三）．个人提高的一些感悟
在空闲时间，这周主要研读《前端开发修炼之道》与《PHP程序设计经典300例》，读前者能在没有导师的情况下，确定整个前端的开发流程及常见的开发模式，特点是从原理讲起，而不会有太多浮华的例子。后者则是php开发后端常用到的逻辑代码，能为今年网站的计划奠定技术储备的基础。

平常处理开发页面由于面向移动端，没有考虑到浏览器兼容的问题，上述前端这本书，也详细的介绍了这些内容，首先看看兼容的利器吧。

IE浏览器情况下的适配多个IE版本的方法：










IEtest神工具：









然后看一个比较好玩又有高端的css sprites例子：

通过将以下图片设置为某标签的背景并把背景多余部分隐藏，设置此标签的宽度和高度，然后通过对背景图的移动实现背景部分显示，达到我们要的效果。

类似一块蒙上布的山水画，撕开一部分则展现一部分风景，同时山水画还可以相对布移动。

span{display:block;width:18px;height:20px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;}
.up1{background-position:-58px -20px;}

上图是乐帝***的方片4



这个页面有详细***一幅扑克的方法，还有可以拖动的代码，代码中不清楚一些浏览器尺寸特性可以点这个页面。处理这些css
sprites工作量最大的就是生成相应坐标了，这里有个简单的工具：bg2css_v3.2.1.air，另外还有在线的工具。