首页 > 代码库 > 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.了解有哪些是内容:将内容分类。
   (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工具命令、浏览器调试的运用。