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. 依据原型图实现用户行为的交互
加入交互:从后台取出获奖用户对应信息展示。
第二、三个页面的制作,因为页面同第一个页面所用到技术大同小异。但提高的地方在于依照内容、结构、样式、交互的顺序,一步步推导、演绎确定技术方案。然后再開始动工。效率有了明显的提升。
先思考再写代码。
第二三个页面相对于第一个页面的改进:
- .写抽奖中和活动结束页面的内容、结构、css、js分析方法非常提高效率与掌控力。
- 网页元素命名也依据内容进行了语义化,通过下载的txt文件查看经常使用的命名。
- 通过给产品经理提出原型的意见添加了对产品的理解。
没有什么技术含量。
- 有技术含量的是语义化标签的磨练,通过看模板代码和理论知识。以及属性、类的命名。
- (1)css布局图上溯的长度、布局的确定。特别是从原型图中找出不合理的地方。(2)不应该纠缠于页面中各种像素数据。(3)学会用adapter即base.css文件的内容。(4)并积累自己的一个css库。
- (1)js技术含量在于写出规范、可读性高的代码。(2)同一时候积累一些实现经常使用内容的函数。
(3)深入理解框架和插件的机理。
- 从各种浏览器适配的角度,考虑前端开发的优化。
- 从用户体验的角度考虑。功能的实现。以及效率问题(速度)的提升如ajax读取数据。
- 从整个前端的制作网页流程,反推整个策划、产品开发的产生过程。
- 学习后端与前端交互,特别是网络端linux和svn工具命令、浏览器调试的运用。
样式上,採用PS精确測量各个数据,做到了与原型图高度统一。行为上採用了模板与函数分块编程。使结构与行为全然分离,行为逻辑更加清晰易懂。便于后期维护。
iosclient暑期“动画屋“活动项目总结的更多相关文章
- iosclient发现_世界杯送流量活动项目总结
世界杯如火如荼的进行.视频站点相似于门户站点.须要高速依据外部环境更新内容. 产品经理须要策划活动,并安排实施.这个活动就是在这样背景下产生的,爱奇艺与运营商合作,实现双赢.爱奇艺能够通过运营商 ...
- [Swift通天遁地]八、媒体与动画-(10)在项目中播放GIF动画
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- iOS-一个弹出菜单动画视图开源项目分享
相似于Tumblr公布button的弹出视图 使用非常easy: 初始化: @property (nonatomic, strong) XWMenuPopView *myMenuPopView; - ...
- 用开源项目ActivityOptionsICS让ActivityOptions的动画实现兼容
我之前写过一篇文章是讲解ActivityOption的api方法的(http://www.cnblogs.com/tianzhijiexian/p/4087917.html),当时吐槽各种动画不兼容, ...
- AndroidScreenSlide项目切换view动画效果《IT蓝豹》
AndroidScreenSlide项目切换view动画效果 AndroidScreenSlide项目中有几个不错的效果,一:Card Flip翻页立体效果,二:Screen Slide 左右切换vi ...
- iOS - 开源框架、项目和学习资料汇总(动画篇)
动画 1. Core Animation笔记,基本的使用方法 – Core Animation笔记,基本的使用方法:1.基本动画,2.多步动画,3.沿路径的动画,4.时间函数,5.动画组.2. awe ...
- Android 开发一定要看的15个实战项目
前言: 虽说网上有太多的Android课程,但是大多都是视频,有Android在线开发环境的几乎没有,但是对于学习Android的人来说拥有在线的Android开发环境是非常好的,可以随时动手操作学习 ...
- 简历生成平台项目开发-STEP2问卷调查结果统计分析
根据之前设计的调查问卷,截止目前为止,一共收到64份问卷结果.一共16题,分别从基本信息.是否对简历制作有需要.对产品期望的特点和建议采纳四个方面设计问题.下面逐题分析问卷结果: 1.您的性别 可以看 ...
- 【Android 应用开发】GitHub 优秀的 Android 开源项目
原文地址为http://www.trinea.cn/android/android-open-source-projects-view/,作者Trinea 主要介绍那些不错个性化的View,包括Lis ...
随机推荐
- NYOJ 1066 CO-PRIME(数论)
CO-PRIME 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 This problem is so easy! Can you solve it? You are ...
- CMDeviceMotion使用
CMDeviceMotion使用 by 吴雪莹 manager = [[CMMotionManager alloc] init]; ViewController *__weak weakSelf=se ...
- 用MFC实现WebGUI--(CDHtmlDialog)
自从去年年底一次棘手的界面,开始研究用web做界面到现在大约1年,这一年间不是局限在实现层面,也并非一直研究这一个问题,有很多问题其实不是问题,只是自己没有想清楚或者思想没放开.对于一个界面开发人员, ...
- Android 服务类Service 的具体学习
上一篇说到了通知栏Notification,提起通知栏,不得让人想到Service以及BroadcastReceive,作为android的4大组建的2个重要成员,我们没少和它们打交道.它们能够在无形 ...
- Swift - 给表格添加编辑功能(删除,插入)
1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...
- NoSql 数据库
几款主流 NoSql 数据库的对比 posted @ 2016-05-11 21:36 vajoy 阅读(915) 评论(3) 编辑 收藏 最近小组准备启动一个 node 开源项目,从前端亲和力. ...
- dumpbin
在使用VC时,可以用DUMPBIN.EXE来得到某个DLL中所输出的符号的清单.如下面的 命令:dumpbin -exports Cmpnt1.dll如: C:/WINDOWS/system32> ...
- Java魔法堂:JVM的运行模式 (转)
一.前言 JVM有Client和Server两种运行模式.不同的模式对应不同的应用场景,而JVM也会有相应的优化.本文将记录JVM模式的信息,以便日后查阅. 二.介绍 在$JAVA_HOME/jre/ ...
- linux 终端控制-- 多彩输出 格式排版
linux 终端控制-- 多彩输出 格式排版 在unix/linux的终端下,怎么控制终端输出的颜色和格式呢,当然了有专门的工具,tput,但是能被terminal直接读懂的格式化字符串更通用. 先来 ...
- Android中<meta-data>的使用
在AndroidManifest.xml中.<meta-data>元素能够作为子元素,被包括在<activity>.<application> .<servi ...