首页 > 代码库 > ios客户端暑期“动画屋“活动项目总结
ios客户端暑期“动画屋“活动项目总结
入职实习的这个公司，第一天就分配了任务，从零开始写一个网页，之前虽然了解一些前端知识，但从头开写还是遇到了很多问题，互联网公司讲求效率，有deadline还是比较有紧迫感的，与在实验室放羊状态有了鲜明的对比。mentor、产品经理、组里的boss、实习生同事都给我提供了非常多的帮助。此篇总结为独立完成的第一个项目的项目总结。下图是已上线活动界面效果。
项目介绍
（一）．爱奇艺IOS客户端发现—活动页面中“动画屋”活动开始页面的开发
活动开始页面的开发主要需求是：
根据产品方提供的原型图实现基本页面的结构与布局。
1.内容：
根据原型图分析出页面分为三大块：
- app下载按钮以及背景图；
- 话题以及评论输入框和评论发表按钮；
- 最新评论展示。
根据分析构造结构与布局。
2.结构（HTML）：
根据分析内容构造的html结构：大体规则按照分块与语义化结合。
- 上述三块内容分为三块div包装。这三块外围被一个大的div包装便于整体定位。
- 每个div内部根据内容性质设置语义化标签：文字用p标签，图片用img标签，按钮用input button类型的标签，并列语义内容用ul与li标签等等构造出结构图，以达到未有css样式仍有可读性。
- 文字部分采取<p>标签可以灵活控制对齐，而<br />则做不到。
3.样式（CSS）:
- 根据上述构造出的语义化标签结构，再结合原型图构造样式布局。
- 样式布局id或者class命名可以参考一些文章根据内容的css命名规则。
- 样式布局则仍然以内容出发，首先设定外层的div的绝对布局position：absolute；top left right等，形成布局基础。
- 然后通过外层div内部div性质如果左右布局则需要设置float属性。设置div标签背景图像以及颜色需要对父级对象设置高度和宽度。
- 设置不规则的布局出现问题，很多时候都可以通过设置父级div width或者height来解决，如文字长度的限制。
- 四个方向的padding属于内容的延伸，四个方向的margin则是边框的延伸。居中布局可同时设置margin-left 与margin-right同时为auto。
- 隐藏标签采用display：none与jquery hide（）方法实现效果一样。
- 定义css样式时，面向的标签尽量细化，以免造成关联影响。
4.交互（js/jQuery）：
根据原型图判断需要实现的用户行为交互。
添加交互：
- 输入评论框默认文字消失并且输入文字颜色与默认文字颜色不同，如果未登录跳转到登录界面。
- 点击发表按钮，如未登录会跳转到登录页面，否则发送评论内容到相应接口，提示发表成功，并刷新评论展示内容。
- 评论部分从相应接口取出最新评论数据50条。按照原型图样式显示。
技术实现：
（1）此项目与后端的交互过程即取数据、存数据的过程。通过查看jquery中ajax、get、post方法的用法格式以及json作为数据格式按照对象属性的方法取用规则，再通过接口文档获取ajax方法中所需传递的参数值实现存取相应数据的目的。采用ajax方法，可以在浏览器network查看post和get请求详细信息。
$.post("所用接口url", {请求接口传入的对象数据如 page_size:30},
function(data){
window.location.reload();//重新加载页面
},"json");//向相应接口发送请求，并返回json格式的数据data json数据的读取：按照对象属性方法读取。此处重新载入页面需要注意，重新载入时，在移动端和pc端都有对图片的缓存，所以不会耗费大量流量及时间重新加载，而是在一定基础上的加载。dataTmp2=data["data"]["comments"].length;//获取评论长度
（2）解析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方法各个参数 （3）输入评论默认文本消失，输入的文本样式与默认文本样式不同，控制文本长度为140字，并且不能发送默认文字。$("#textarea1").click(function(){
this.innerHTML="";//单击清空默认值
$("#textarea1").addClass("clickFont");//给文本域内容添加输入文本的字体样式
}); 此处用到jquery中addClass方法添加css属性，但由于原字体样式由id构造，这里追加的class，在css中优先级id比class高，所以采用了新加属性颜色后加!important方式实现。.clickFont{
color:#464646 !important;
} 获取文本框内容，并判断是否为默认值。如果不是默认值则将内容截取前140字，作为ajax方法的参数发送到后台。if($("#textarea1").val()!="我最喜欢的动画片是…")//判断是否输入新内容
{
content=$("#textarea1").val().substring(0,140);//截取前140字的评论
} （4）点击发表按钮及点击评论框都对用户登录状态进行判断，如登录则继续执行，未登录则跳转到登录页面。if(theRequest.P0001.length>1)
//执行内容
}else{
window.location.href = http://www.mamicode.com/"iqiyi://login";> （5）动态生成评论部分的构造 动态生成部分的思路：首先从结构上并列或者包含关系划分div，构造语义化标签，形成dom树，装入示例内容，作为评论部分的样例。然后对上述结构采用样式布局，构造出css样式与原型图一致后。即可按照dom树规则确定交互取数据、动态生成所需内容。
此处脚本主要会用到几种方法：
- 创造节点并设置属性
var icon = document.createElement("div");
icon.setAttribute("class","icon");- 确定节点内的内容
图片内容
var img = document.createElement("img");
img.src = http://www.mamicode.com/n['userInfo']['icon']; 文字内容uid_content.innerHTML = n['userInfo']['uname'];
- 节点追加子节点构造dom树
$("#resultContainer ul").append(list_tag); 此处考虑到评论内容分页的需求，将载入评论放入到一个标签内，并将其隐藏。按照需求取出并放到展示评论的标签下。for(var i = 0; i < prize_length;i++)
{
$("#contentList").append($("#resultContainer ul li:eq("+i+")").clone());
}- 对评论时间戳转化为标准时间的处理
function formatDate(now) {
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
if(hour<10)
{
hour="0"+hour;
}
if(minute<10)
{
minute="0"+minute;
}
var myDate = new Date();
if(myDate.getFullYear()==year)
{
return month+"-"+date+" "+hour+":"+minute;//本年评论则去掉年份
}
return year+"-"+month+"-"+date+" "+hour+":"+minute;
} （6）分页插件的使用分页插件的本质上是对象的方法，此处的对象是应用插件的标签元素，插件作为方法就需要有参数传递到函数内。分页插件传入的两个元素一个是所需分页内容总长度，另外一个则是分页插件初始化对象的传入，此对象包括：分页回调函数、分页初始页、每页内容个数、上一页、下一页的文字描述等。并可根据需要修改分页插件文件初始值。其中比较关键的是回调函数的书写，此函数参数为当前页数，决定了在哪展现怎么展现的问题，可以按需求更改。
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;
}//应用分页插件（7）关于项目中的排序
尽可能不对页面中的数据进行排序，而是从收发ajax数据时，先排序再存取，形成界面或者形成发送到后台的数据。
按照对象属性对对象进行排序的代码：
data["data"]["comments"].sort(function(a,b)
{
return b["addTime"]-a["addTime"];
});//按时间对评论进行排序（二）．爱奇艺IOS客户端发现—活动页面中“动画屋”活动抽奖中页面的开发
活动抽奖中页面主要需求是：
1. 根据原型图分析出页面有两大块：app下载按钮盒背景图；获奖结果等文字内容。
根据分析构造结构与布局。
（三）．爱奇艺IOS客户端发现—活动页面中“动画屋”活动结束页面的开发
1.根据原型图分析出页面有两大块：app下载按钮盒背景图；获奖用户名单列表。
根据分析构造结构与布局。
2. 根据原型图实现用户行为的交互
添加交互：从后台取出获奖用户相应信息展示。
第二、三个页面的制作，由于页面同第一个页面所用到技术大同小异，但提高的地方在于按照内容、结构、样式、交互的顺序，一步步推导、演绎确定技术方案，然后再开始动工，效率有了明显的提升。先思考再写代码。
第二三个页面相对于第一个页面的改进：
- .写抽奖中和活动结束页面的内容、结构、css、js分析方法很提高效率与掌控力。
- 网页元素命名也根据内容进行了语义化，通过下载的txt文件查看常用的命名。
- 通过给产品经理提出原型的意见增加了对产品的理解。
- 有技术含量的是语义化标签的磨练，通过看模板代码和理论知识。以及属性、类的命名。
- （1）css布局图上溯的长度、布局的确定，特别是从原型图中找出不合理的地方。（2）不应该纠缠于页面中各种像素数据。（3）学会用adapter即base.css文件的内容。（4）并积累自己的一个css库。
- （1）js技术含量在于写出规范、可读性高的代码。（2）同时积累一些实现常用内容的函数。（3）深入理解框架和插件的机理。
- 从各种浏览器适配的角度，考虑前端开发的优化。
- 从用户体验的角度考虑，功能的实现，以及效率问题（速度）的提升如ajax读取数据。
- 从整个前端的制作网页流程，反推整个策划、产品开发的产生过程。
- 学习后端与前端交互，特别是网络端linux和svn工具命令、浏览器调试的运用。