ios客户端暑期“动画屋“活动项目总结
2014-06-21 09:53
453 查看
入职实习的这个公司,第一天就分配了任务,从零开始写一个网页,之前虽然了解一些前端知识,但从头开写还是遇到了很多问题,互联网公司讲求效率,有deadline还是比较有紧迫感的,与在实验室放羊状态有了鲜明的对比。mentor、产品经理、组里的boss、实习生同事都给我提供了非常多的帮助。此篇总结为独立完成的第一个项目的项目总结。下图是已上线活动界面效果。
俗话说,士别三日当刮目相看,当乐帝从12月的角度,审视6月做的这个项目时,对于当时写的代码可谓痛心疾首,代码还可以写的如此混乱,所以从12月开始将以前代码,重新审视,重构以前代码,以期有一个温故知新,扎实基础的提高。
本项目重构后页面代码地址:http://download.csdn.net/detail/yingyiledi/8255887
项目介绍
(一).爱奇艺IOS客户端发现—活动页面中“动画屋”活动开始页面的开发
活动开始页面的开发主要需求是:
根据产品方提供的原型图实现基本页面的结构与布局。
1.内容:
根据原型图分析出页面分为三大块:
活动宣传图区域;
发表评论区域;
评论展示列表区域。
根据分析构造结构与布局。
2.结构(HTML):
根据分析内容构造的html结构:大体规则按照分块与语义化结合。
上述三块内容分为三块div包装。
活动宣传图区域采用背景图方式写HTML,评论展示列表区域,用户头像采取背景图方式实现。
3.样式(CSS):
根据上述构造出的语义化标签结构,再结合原型图用ps测量各数据构造样式布局。
样式书写按照盒模型(由内而外)、浮动、定位来设置。
4.交互(js/jQuery):
根据原型图判断需要实现的用户行为交互。
重构技术实现:
由于以前页面结构没有与行为很好的分离。此次重构,主要对行为与结构分离做了重构。这里用到了underscore的模板引擎template方法。
(1)列表页模板
(2)列表页对取得后端数据的处理
对数据进行处理,以适应模板变量的需求。处理函数如下:
(3)将数据渲染到模板并添加到页面
核心代码如下,主要采用template方法:
(4)解析url传递的参数构造成对象,采用ajax方法存取数据,需要读取url传递的参数值的各状态,并传递给ajax参数。
分页插件的本质上是对象的方法,此处的对象是应用插件的标签元素,插件作为方法就需要有参数传递到函数内。分页插件传入的两个元素一个是所需分页内容总长度,另外一个则是分页插件初始化对象的传入,此对象包括:分页回调函数、分页初始页、每页内容个数、上一页、下一页的文字描述等。并可根据需要修改分页插件文件初始值。其中比较关键的是回调函数的书写,此函数参数为当前页数,决定了在哪展现怎么展现的问题,可以按需求更改。
(二).爱奇艺IOS客户端发现—活动页面中“动画屋”活动抽奖中页面的开发
活动抽奖中页面主要需求是:
1. 根据原型图分析出页面有两大块:app下载按钮盒背景图;获奖结果等文字内容。
根据分析构造结构与布局。
(三).爱奇艺IOS客户端发现—活动页面中“动画屋”活动结束页面的开发
1.根据原型图分析出页面有两大块:app下载按钮盒背景图;获奖用户名单列表。
根据分析构造结构与布局。
2. 根据原型图实现用户行为的交互
添加交互:从后台取出获奖用户相应信息展示。
第二、三个页面的***,由于页面同第一个页面所用到技术大同小异,但提高的地方在于按照内容、结构、样式、交互的顺序,一步步推导、演绎确定技术方案,然后再开始动工,效率有了明显的提升。先思考再写代码。
第二三个页面相对于第一个页面的改进:
.写抽奖中和活动结束页面的内容、结构、css、js分析方法很提高效率与掌控力。
网页元素命名也根据内容进行了语义化,通过下载的txt文件查看常用的命名。
通过给产品经理提出原型的意见增加了对产品的理解。
个人总结做网页的流程
拿到原型图首先对原型图内容、结构、样式、交互有个理解,原型图不明确的需要与产品经理沟通意见。
1.了解有哪些是内容:将内容分类。
(1).静态内容
(2).与服务器交互内容
2.按照内容性质所属语义构造html语义标签结构
(1)根据内容耦合情况,分块处理div
(2)按照对内容的分类及一些逻辑关系选择标签。可参考博客园文章。
(3)语义标签根据是否有共性将其划分为语义的class及id。命名力求简洁、清晰表达内容
3.按照内容对应标签确定的布局
(1)首先确定最外层绝对位置的布局格式及内层div布局浮动或者竖排格式
(2)确定各个div边框、边距及内层html的边框、边距内容
(3)内层文字、背景、表单等格式的确定。
4.js交互
(1)分析需要的交互需求,确定整个流程所要实现的目标。
(2)根据交互需求细化交互流程。
(3)根据交互流程确定所采用的技术及可能用到的算法。
(4)写交互代码。
个人提高的方向
做网页如同写作文首先确定内容,然后是确定章节、然后是格式。都是熟能生巧的事情。没有什么技术含量。
有技术含量的是语义化标签的磨练,通过看模板代码和理论知识。以及属性、类的命名。
(1)css布局图上溯的长度、布局的确定,特别是从原型图中找出不合理的地方。(2)不应该纠缠于页面中各种像素数据。(3)学会用adapter即base.css文件的内容。(4)并积累自己的一个css库。
(1)js技术含量在于写出规范、可读性高的代码。(2)同时积累一些实现常用内容的函数。(3)深入理解框架和插件的机理。
从各种浏览器适配的角度,考虑前端开发的优化。
从用户体验的角度考虑,功能的实现,以及效率问题(速度)的提升如ajax读取数据。
从整个前端的***网页流程,反推整个策划、产品开发的产生过程。
学习后端与前端交互,特别是网络端linux和svn工具命令、浏览器调试的运用。
重构意见
之前的代码版本,无论是结构、样式还是行为都没有做到集约化和标准化。通过这次重构,对HTML结构做了精简,特别是背景图的使用,使整个页面结构更合理。样式上,采用PS精确测量各个数据,做到了与原型图高度统一。行为上采用了模板与函数分块编程,使结构与行为完全分离,行为逻辑更加清晰易懂。便于后期维护。
俗话说,士别三日当刮目相看,当乐帝从12月的角度,审视6月做的这个项目时,对于当时写的代码可谓痛心疾首,代码还可以写的如此混乱,所以从12月开始将以前代码,重新审视,重构以前代码,以期有一个温故知新,扎实基础的提高。
本项目重构后页面代码地址:http://download.csdn.net/detail/yingyiledi/8255887
项目介绍
(一).爱奇艺IOS客户端发现—活动页面中“动画屋”活动开始页面的开发
活动开始页面的开发主要需求是:
根据产品方提供的原型图实现基本页面的结构与布局。
1.内容:
根据原型图分析出页面分为三大块:
活动宣传图区域;
发表评论区域;
评论展示列表区域。
根据分析构造结构与布局。
2.结构(HTML):
根据分析内容构造的html结构:大体规则按照分块与语义化结合。
上述三块内容分为三块div包装。
活动宣传图区域采用背景图方式写HTML,评论展示列表区域,用户头像采取背景图方式实现。
3.样式(CSS):
根据上述构造出的语义化标签结构,再结合原型图用ps测量各数据构造样式布局。
样式书写按照盒模型(由内而外)、浮动、定位来设置。
4.交互(js/jQuery):
根据原型图判断需要实现的用户行为交互。
重构技术实现:
由于以前页面结构没有与行为很好的分离。此次重构,主要对行为与结构分离做了重构。这里用到了underscore的模板引擎template方法。
(1)列表页模板
<%_.each(data, function(item) { %> <li class="comment-item"> <div class="user-info" style="background:url('<%=item.imgUrl%>') no-repeat 0 0;background-size:30px 30px; "> <span class="user-id"> <%= item.userId %> </span> <span class="comment-time"> <%=item.createTime %> </span> </div> <p class="comment-content"> <%=item.content %> </p> </li> <%});%>
(2)列表页对取得后端数据的处理
对数据进行处理,以适应模板变量的需求。处理函数如下:
function modifyData(data) { var innerData = data.data.comments; var newData = []; for (var i = 0; i < innerData.length; i++) { newData[i] = {}; newData[i].content = innerData[i].content; newData[i].imgUrl = innerData[i].userInfo.icon; newData[i].userId = innerData[i].userInfo.uname; newData[i].createTime = formatDate(new Date(innerData[i].addTime)); } return newData; }
(3)将数据渲染到模板并添加到页面
核心代码如下,主要采用template方法:
data = modifyData(data); var template1 = _.template($("#list-item-template").html()); var str1 = template1({ data: data }); $(".comment-list ul").append(str1);
(4)解析url传递的参数构造成对象,采用ajax方法存取数据,需要读取url传递的参数值的各状态,并传递给ajax参数。
var theRequest = new Object(); (function GetRequest() { var url = location.search; //获取url中"?"符后的字串 if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); } } return theRequest; })()//将url中各参数提取出传入ajax方法各个参数(5)分页插件的使用
分页插件的本质上是对象的方法,此处的对象是应用插件的标签元素,插件作为方法就需要有参数传递到函数内。分页插件传入的两个元素一个是所需分页内容总长度,另外一个则是分页插件初始化对象的传入,此对象包括:分页回调函数、分页初始页、每页内容个数、上一页、下一页的文字描述等。并可根据需要修改分页插件文件初始值。其中比较关键的是回调函数的书写,此函数参数为当前页数,决定了在哪展现怎么展现的问题,可以按需求更改。
var optInit = {callback: pageselectCallback,current_page:0,items_per_page:50,num_display_entries:10,num_edge_entries:2,prev_text:"上一页",next_text:"下一页" } $("#pagination").pagination(length, optInit); function pageselectCallback(page_index, jq){ // 从表单获取每页的显示的列表项数目 var max_elem = Math.min((page_index+1) * items_per_page, length);//返回当前条目页内容与最大页内容较小值,防止溢出 $("#Searchresult").html("");//清空显示值内容 // 获取加载元素 for(var i=page_index*items_per_page;i<max_elem;i++){ $("#Searchresult").append($("#comentShow .comentList:eq("+i+")").clone());//很奇怪i两侧用加号,显示需遍历的内容,并复制追加到结果处,此处用clone保证追加的是副本 } //阻止单击事件 return false; }//应用分页插件
(二).爱奇艺IOS客户端发现—活动页面中“动画屋”活动抽奖中页面的开发
活动抽奖中页面主要需求是:
1. 根据原型图分析出页面有两大块:app下载按钮盒背景图;获奖结果等文字内容。
根据分析构造结构与布局。
(三).爱奇艺IOS客户端发现—活动页面中“动画屋”活动结束页面的开发
1.根据原型图分析出页面有两大块:app下载按钮盒背景图;获奖用户名单列表。
根据分析构造结构与布局。
2. 根据原型图实现用户行为的交互
添加交互:从后台取出获奖用户相应信息展示。
第二、三个页面的***,由于页面同第一个页面所用到技术大同小异,但提高的地方在于按照内容、结构、样式、交互的顺序,一步步推导、演绎确定技术方案,然后再开始动工,效率有了明显的提升。先思考再写代码。
第二三个页面相对于第一个页面的改进:
.写抽奖中和活动结束页面的内容、结构、css、js分析方法很提高效率与掌控力。
网页元素命名也根据内容进行了语义化,通过下载的txt文件查看常用的命名。
通过给产品经理提出原型的意见增加了对产品的理解。
个人总结做网页的流程
拿到原型图首先对原型图内容、结构、样式、交互有个理解,原型图不明确的需要与产品经理沟通意见。
1.了解有哪些是内容:将内容分类。
(1).静态内容
(2).与服务器交互内容
2.按照内容性质所属语义构造html语义标签结构
(1)根据内容耦合情况,分块处理div
(2)按照对内容的分类及一些逻辑关系选择标签。可参考博客园文章。
(3)语义标签根据是否有共性将其划分为语义的class及id。命名力求简洁、清晰表达内容
3.按照内容对应标签确定的布局
(1)首先确定最外层绝对位置的布局格式及内层div布局浮动或者竖排格式
(2)确定各个div边框、边距及内层html的边框、边距内容
(3)内层文字、背景、表单等格式的确定。
4.js交互
(1)分析需要的交互需求,确定整个流程所要实现的目标。
(2)根据交互需求细化交互流程。
(3)根据交互流程确定所采用的技术及可能用到的算法。
(4)写交互代码。
个人提高的方向
做网页如同写作文首先确定内容,然后是确定章节、然后是格式。都是熟能生巧的事情。没有什么技术含量。
有技术含量的是语义化标签的磨练,通过看模板代码和理论知识。以及属性、类的命名。
(1)css布局图上溯的长度、布局的确定,特别是从原型图中找出不合理的地方。(2)不应该纠缠于页面中各种像素数据。(3)学会用adapter即base.css文件的内容。(4)并积累自己的一个css库。
(1)js技术含量在于写出规范、可读性高的代码。(2)同时积累一些实现常用内容的函数。(3)深入理解框架和插件的机理。
从各种浏览器适配的角度,考虑前端开发的优化。
从用户体验的角度考虑,功能的实现,以及效率问题(速度)的提升如ajax读取数据。
从整个前端的***网页流程,反推整个策划、产品开发的产生过程。
学习后端与前端交互,特别是网络端linux和svn工具命令、浏览器调试的运用。
重构意见
之前的代码版本,无论是结构、样式还是行为都没有做到集约化和标准化。通过这次重构,对HTML结构做了精简,特别是背景图的使用,使整个页面结构更合理。样式上,采用PS精确测量各个数据,做到了与原型图高度统一。行为上采用了模板与函数分块编程,使结构与行为完全分离,行为逻辑更加清晰易懂。便于后期维护。
相关文章推荐
- iosclient暑期“动画屋“活动项目总结
- ios客户端发现_动画屋活动获奖展示和获奖模块开发总结
- ios客户端发现_动画屋后期页面重构与悬浮评论分享模块开发项目总结
- ios客户端发现_世界杯送流量活动项目总结
- ios小项目——新浪微博客户端总结
- ios小项目——新浪微博客户端总结
- ios小项目——新浪微博客户端总结
- ios小项目——新浪微博客户端总结
- 客户端发现_观影团活动页面开发与客户端新版跳转测试页面开发项目总结
- ios小项目——新浪微博客户端总结
- 项目总结(3) H5 JS判断客户端是否是iOS或者Android手机移动端
- ios客户端发现_华为爱奇艺手机活动开发总结
- ios小项目——新浪微博客户端总结
- ios小项目——新浪微博客户端总结
- ios小项目——新浪微博客户端总结
- 阿里巴巴中国站手机客户端项目总结
- 项目总结:华南师范大学校园开发教育android客户端总结
- iOS 动画总结----UIView动画
- 创建IOS项目—学习总结
- iOS 动画总结----UIView动画