这个项目自发布需求、活动原型图交付、修订需求、测试、修改、再测试通过上线可谓旷日持久。回过头来看整个项目工期主要卡在活动原型图交付这儿。而为了避免项目上线最后开发赶工期，在这次获取需求的情况下，先对除了需要图以外的模块进行了开发，并调通接口，从而在得到图之后快速完成需求。而深挖这个项目，可追到爱奇艺与华为合作交付没有顺畅达成，才促使一系列后期延期。

    再拿原型图交付、修改需求、测试、修改、再测试上线这几个流程来说，每个环节对需求认识不同，就会做出一定的需求误判，而流程图及原型图又不能兼顾到诸如页面跳转传参数等细节问题。

    所以回头来看，整个项目主要依赖于三点：产品对整个项目的进度把控、各个成员的丰富项目经验与项目成员间高效沟通。而对于产品来说，进度把控主要从项目上线日期来说，这就容易造成各成员间“时间竞争”的发生，这里时间竞争类似零和博弈。在整体进度不好把握的情况下，项目所依赖的后两点就尤其重要了。

   首先说说丰富的项目经验，乐帝所从事移动端web开发，做的活动界面类型比较固定，经过积累对于活动的逻辑、页面的布局、组件、具体技术、用户的体验，都有一个逐步熟练的过程。这个过程中，效率可以越来越高，体验越来越好。可以做到给乐帝一个活动标题，乐帝策划出一个用户活动的地步。这个能力关键在于胸有成竹，不同的是只是需要输出的过程。

   乐帝目前开发，首先做的是按照流程图和逻辑图理清楚逻辑关系，以及流程或者原型图存在的逻辑问题，并向产品及视觉设计师反馈问题，当逻辑理清楚以及相关项目材料准备充足了，一切只是把胸中的逻辑，输出出来：结构、布局、交互、适配，一条龙下来。这其间会遇到一些新的问题，而这些问题也同时是技术精进、效率提高的机会。所以现在乐帝会有这样的观念，当没有想清楚就不要做，因为需求不明确的房子，盖到一半很可能需要推倒，重盖，这就很消磨一个人的意志。

   其次是沟通的问题。最近看文章《软件开发究竟是“难”还是“复杂”？》里面提到：软件开发的难度更多的类似于后者，表现为繁杂，而不是类似于前者表现为“搞不定”或“做不出来”。

   前端开发表现出来的也是繁杂，这里的繁杂主要体现在三点：

• 涉及技术的繁杂。诸如js、div+css、ajax、php、mysql等。
• 涉及个人多方面如审美、设计能力的繁杂。
• 沟通方的繁杂，这里沟通方涉及产品、后台、测试、客户端、甚至运维。

   就拿今天举例，早上开始工作收到测试对页面长篇大论的测试结果，测试结果包括IPad、Android、iPhone三个终端，18条测试问题。这个问题数量真是吓到乐帝了，乐帝开发的界面是有多么“大逆不道”。

   乐帝首先做的是将问题分类：

1. 后端接口提供是否完备。
2.  基本跳转逻辑问题。
3. UI适配问题。
4. 后台数据展现到页面位置，初始化数据的问题。
5. 后端需要处理的逻辑问题。
6. 测试不了解的用户体验背景。
7. 客户端设置问题。

• 1、2两类问题需要与产品协调解决。
• 3、4问题可以在开发中做到提前预防。跟测试沟通，适配阶段借其真机适配，确定后他展现初始化数据。
• 5.则需要和后台沟通处理。
• 6.则需要向测试人员说明，此用户体验的逻辑。
• 7.则是向产品反馈，暂时不能处理。

  有了这样一个分类及处理问题的策略，剩下的只是按照流程完善自己的开发任务：

•   整个项目逻辑在项目前期评估阶段找出问题，向产品协商解决。这里特别注意解决无数据集跳转过程的逻辑问题。
•   各种接口在交互阶段调通，与产品、后台沟通好。
•   UI适配阶段优化：适配阶段向测试人员借Android、Ipad及Iphone测试，测试时需要将所有隐藏的内容一并测试比如弹出框和读取后台数据部分的展现位置。

   做完以上三点，测试给找的“麻烦”基本上少了一大半，剩下的则是需要再针对沟通解决了，这里就不难发现前端处于开发的十字路口，与各个同事沟通对整个项目顺利进行有着重要推动作用。整个团队沟通成本低的话，开发效率与质量就直线上升了。

   说了这么多，来看看本次华为爱奇艺手机活动的效果图：

   立即领取按钮点击后，会进入一个显示优惠码的页面，这个页面有个功能叫一键复制，与前端斌哥研究了下。采用一个复制插件：

$(document).ready(function() {
	var clip = new ZeroClipboard($("#copyDom"));
});

<input id="targetDom" type="text"/>
<button id="copyDom" data-clipboard-target="targetDom">copy</button>

   另外一个需求是测试提出来，上图活动规则的图标会在android端进入页面时，图标先变大后变小，与斌哥沟通指明用背景图做可解决。乐帝于是循着此路查到background-size，这个css属性可以根据外层容器大小自动调节图片大小。

background-size:contain;

   这几周同时还在忙于夕阳再晨网站的开发工作，在小米加步枪的时代，没有美工、没有产品经理、靠着自己的思考对原有网站需求进行“极简主义式”的削减，终于到了写模板的阶段：36kr及多贝网的图文展示都成了乐帝开发老年学堂和志愿者学堂模板的地方。这种小作坊般的开发比较有挑战性，从规划到执行都要做，对各方面能力提高非常有帮助。

  在偷学36kr图文内容布局的时候遇到了浮动子元素撑不起外层div的问题。这里给了一个非常好的解决方案。这里乐帝比较喜欢第三种解决方案。

 <div id="div1">
  <div id="div2">two</div>
 <div id="div3">one</div>
 <div style="clear:both"></div>
 </div>

   只是添加一行div，对style没有额外要求，第一种和第二种乐帝都会担心有连带问题出现。

   今天的成果就汇报到这里。