iosclient暑期“动画屋“活动项目总结[通俗易懂]

    入职实习的这个公司，第一天就分配了任务。从零開始写一个网页。之前尽管了解一些前端知识。但从头开写还是遇到了非常多问题，互联网公司讲求效率，有deadline还是比較有紧迫感的，与在实验室放羊状态有了鲜明的对照。mentor、产品经理、组里的boss、实习生同事都给我提供了非常多的帮助。此篇总结为独立完毕的第一个项目的项目总结。

下图是已上线活动界面效果。

   俗话说，士别三日当刮目相看。当乐帝从12月的角度，审视6月做的这个项目时，对于当时写的代码可谓痛心疾首，代码还能够写的如此混乱。所以从12月開始将曾经代码，又一次审视，重构曾经代码，以期有一个温故知新。扎实基础的提高。

   本项目重构后页面代码地址：http://download.csdn.net/detail/yingyiledi/8255887

项目介绍

（一）．爱奇艺IOSclient发现—活动页面中“动画屋”活动開始页面的开发

    活动開始页面的开发主要需求是：

    依据产品方提供的原型图实现基本页面的结构与布局。

    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;
		}//应用分页插件

（二）．爱奇艺IOSclient发现—活动页面中“动画屋”活动抽奖中页面的开发

    活动抽奖中页面主要需求是：

    1. 依据原型图分析出页面有两大块：app下载button盒背景图；获奖结果等文字内容。

    依据分析构造结构与布局。

（三）．爱奇艺IOSclient发现—活动页面中“动画屋”活动结束页面的开发

    1.依据原型图分析出页面有两大块：app下载button盒背景图。获奖username单列表。

    依据分析构造结构与布局。

    2. 依据原型图实现用户行为的交互

    加入交互：从后台取出获奖用户对应信息展示。

    第二、三个页面的制作，因为页面同第一个页面所用到技术大同小异。但提高的地方在于依照内容、结构、样式、交互的顺序，一步步推导、演绎确定技术方案。然后再開始动工。效率有了明显的提升。

先思考再写代码。

第二三个页面相对于第一个页面的改进：