提纲

整体把握,从设计稿入手——技术选型
并行开发,从实现静态页面开始
前端自动化
前端js逻辑
前后端集成
小问题集合
总结
1.整体把握,从设计稿入手 —— 技术选型
新项目到手,算是运气好,设计稿都已经全部完成了,40多个页面。不用担心边做边改的情况。能够提前确定重用性和一些规范。
项目主要要求:
1. 兼容PC、微信、移动端,兼容现代浏览器,IE9+等
1. 嵌入到安卓、ios客户端和微信,要求页面独立
1. 使用node.js作为中间件

我负责前端页面和逻辑,node是另一个同事负责,前端架构由前端组长负责。
前端框架选型是开发前很重要的准备:
1. UI框架: 考虑过uikit、amazeUI、bootstrap,ionic最终选择bootstrap自定义样式,主要原因公司其他项目也用的bootstrap。对我来说这三个框架我之前都没用过,作为一个一年经验的前端很可笑吧,其实我觉得也没啥,马上学便是。
1. js库: 考虑过jquery和zepto,最终选择jquery
2. 前端工具: 考拉,bower,less (没有使用gulp处理less文件,使用考拉)
3. node用的express,node那个同事熟悉。使用express生成文件模板
4. 前端模板用的git bash
5. CSS3动画,
6, 项目管理工具 svn git我觉得在公司内部使用不高,个人使用方便


2.并行开发,从实现静态页面开始
经过一个星期的前期准备和调研,前端基本的架子搭起来了,gulp、bower、 规范。js这一块自动化还未准备就绪,node后台的架子也在搭建。各方进度都有不一致的地方,考虑到并行开发,我建议我先做静态页面,node后台继续搞自己的,组长继续研究架子。
这样也好,专心写页面,能更专注的考虑html、css方面的东西。做完40个页面总共花了8的工作时间(未加班),我觉得还是比较快了。
css方面从bower里引入了bootstrap的部分less源码,再覆盖一些源码需要修改的样式,然后更多的是自己定义的样式。这个过程中已经考虑了很多重用、结构、命名问题,所以前期4天的时间我的进度都很慢,因为边写就边优化了,磨刀不误砍柴工,后4天就差不多完成了30个页面。


3.前端自动化
前后端的js逻辑都能用到require了。
自动化带来了更高效率的开发,监听、打包、压缩、iconFont、require等前期做好了配置,后面几乎就不需要改动了,对于前端来说,这些都是必不可少的技术要求。


4.前端JS逻辑
browserify把一些依赖js挂到了全局,比如:jquery,jq-validate。
使用路由控制主页显示
触发事件都用事件代理控制,

view里:html写好dom节点和动态参数,


5.前后端集成
好像没啥好说的,后端准备好接口,前端调用就行了,某些问题上需要多点沟通,保证需求理解一致。


6.小问题集合
特殊情况下某些图标缺失,手工添加解决
移动端 active 失效: -webkit-tap-highlight-color: transparent;
html5 video audio很多事件现代浏览器支持不好,特别是移动端的浏览器,第一种解决混合源生。第二种不断测试兼容

7.总结
整体把控、注重命名和重用,出现觉得不合理的和需要重用的就应该优化。
如果有条件先实现静态页面,再最后来写js逻辑,这样开发应该会更快。
因为多少自己也做过设计,也知道有时候作为前端感觉设计师不放过每一个细节让人觉得有点累,但是我们应该尊重设计师,不要有任何抱怨因为这是他们的责任,当然我说这一点并不是我之前抱怨他们了,而是每当很忙很累的时候,看着设计师提上来的UI问题时候,我这样激励过自己,觉得这一点还是挺好,让我更积极,希望大家能多换位思考。
前后端做好各自的单元测试,尽量保证自己代码问题会是最少的,这样集成成本就变得低了。
用到第三方框架和库且不熟悉的情况下,遇到需求问题,应该首先从三方文档里找解决需求的办法,实在引入的三方库没有解决方案,再考虑自己解决。
前期约定好各种规范