webapp项目前端总结

标签：

提纲

• 整体把握，从设计稿入手——技术选型
• 并行开发，从实现静态页面开始
• 前端自动化
• 前端js逻辑
• 前后端集成
• 小问题集合
• 总结

1.整体把握，从设计稿入手 —— 技术选型

新项目到手，算是运气好，设计稿都已经全部完成了，40多个页面。不用担心边做边改的情况。能够提前确定重用性和一些规范。 
项目主要要求： 
1. 兼容PC、微信、移动端，兼容现代浏览器，IE9+等 
1. 嵌入到安卓、ios客户端和微信，要求页面独立 
1. 使用node.js作为中间件

我负责前端页面和逻辑，node是另一个同事负责，前端架构由前端组长负责。 
前端框架选型是开发前很重要的准备： 
1. UI框架: 考虑过uikit、amazeUI、bootstrap，最终选择bootstrap+自定义样式，主要原因公司其他项目也用的bootstrap。对我来说这三个框架我之前都没用过，作为一个一年经验的前端很可笑吧，其实我觉得也没啥，马上学便是。 
1. js库: 考虑过jquery和zepto，最终选择jquery 
1. 前端工具： gulp,browserify，bower，less 
1. node用的express，node那个同事熟悉 
1. 前端模板用的swig 
1. greensock动画库

2.并行开发，从实现静态页面开始

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

 

3.前端自动化

静态页面写完了，刚好组长架子、工作流这一块也搭好了，后台也做了一些功能等待集成。 
组织js用到了browserify，前后端的js逻辑都能用到require了。 
项目比较紧，组长这一个架子都还没彻底搞懂，还是挺复杂的，之后松点了将会好好看看。 
自动化带来了更高效率的开发，监听、打包、压缩、iconFont、require等前期做好了配置，后面几乎就不需要改动了，对于前端来说，这些都是必不可少的技术要求。

 

4.前端JS逻辑

JS这一块，为每个页面配置了viewName，写在了base.html里，所有页面将继承base，这一块当然就是开始说的swig模板，相应文件夹的里所有html文件的js将会引入page->{% viewName %}->index.js。 
browserify把一些依赖js挂到了全局，比如：jquery，jq-validate，jq-form，greensock。 
特定的页面配置了pageConfig，用来获取一些数据。 
触发事件都用事件代理控制，组件间通信用trigger触发器。

view里：html写好dom节点和动态参数，自动化工具会自动拼接节点生成swig前端模板，在其他js里面就可以require了。传入相应参数，就可以输出到页面了，如图自定义popup组件和list组件很方便就能调用。

 

5.前后端集成

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

6.小问题集合

1. gulp iconFont某些字体图标残缺，暂时icomoon手动更新
2. 移动端 active 失效: -webkit-tap-highlight-color: transparent;
3. html5 video audio很多事件现代浏览器支持不好，特别是移动端的浏览器，可以用这个地址做测试http://www.w3.org/2010/05/video/mediaevents.html

7.总结

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

webapp项目前端总结

标签：

原文地址：http://www.cnblogs.com/1wen/p/4477894.html