入职实习的这个公司，第一天就分配了任务，从零开始写一个网页，之前虽然了解一些前端知识，但从头开写还是遇到了很多问题，互联网公司讲求效率，有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）列表页模板
<%_.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）css布局图上溯的长度、布局的确定，特别是从原型图中找出不合理的地方。（2）不应该纠缠于页面中各种像素数据。（3）学会用adapter即base.css文件的内容。（4）并积累自己的一个css库。
- （1）js技术含量在于写出规范、可读性高的代码。（2）同时积累一些实现常用内容的函数。（3）深入理解框架和插件的机理。
- 从各种浏览器适配的角度，考虑前端开发的优化。
- 从用户体验的角度考虑，功能的实现，以及效率问题（速度）的提升如ajax读取数据。
- 从整个前端的制作网页流程，反推整个策划、产品开发的产生过程。
- 学习后端与前端交互，特别是网络端linux和svn工具命令、浏览器调试的运用。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
