前端开发那些事儿

1、前端开发那些事儿acUEDvar ppt = author: “wang.wenlong”, date: “2011-10-14”, email: “jn_”1实用精品课件PPTLOGO1前端开发发展历程、职责范围介绍2前端开发的指导思想：平稳退化和渐进增强3前端开发三大中流砥柱，代码库的搭建和维护4前端开发方式的发展方向本次分享四大模块2实用精品课件PPTLOGO前端开发工程师发展历程、职责范围介绍发展历程和职责范围3实用精品课件PPTLOGOweb1.0时代：table布局时代 美术工程师(Art Engineer)：特指网页美工，指精通CSS/HTML/JAVASCRIPT等网页设计语言

2、，并且熟悉各种平面设计软件，如PHOTOSHOP、FLASH、Illustrator等软件。 网页制作(webpage maker)：指网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。前端开发工程师发展历程、职责范围介绍4实用精品课件PPTLOGOweb2.0时代：(x)html+css布局时代 web前端工程师：主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发Jav

3、aScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。职位分类：“前端开发工程师”、“资深前端开发工程师”、“前端架构师”前端开发工程师发展历程、职责范围介绍5实用精品课件PPTLOGO前端开发工程师发展历程、职责范围介绍1. 前端开发工程师：职责是根据设计图用HTML和CSS完成页面制作，并对完成的页面进行维护和对网站前端性能做相应的优化。2. 资深前端开发工程师：职责是使用JS或者AS来编写和封装具有良好性能的前端交互组件，对Web项目的前端实现方案提供专业指导和监督，对新人进行培训，还要跟踪研究前端技术，设计并实施全网

4、前端优化。3. 前端架构师：职责是带领组员实现全网的前端框架和优化，创建前端的相应标准和规范，还要站在全局的角色为整个网站的信息架构和技术选型提供专业意见和方案。6实用精品课件PPT7实用精品课件PPTLOGO前端开发工程师发展历程、职责范围介绍web3.0时代：移动互联网app时代 前端开发工程师职责8实用精品课件PPTLOGO前端开发工程师发展历程、职责范围介绍职责范围总结：1. 参与项目需求和交互设计的讨论，并给出前端角度的意见，尽可能用html+css+js实现项目的用户体验；2. 拿到视觉设计师的效果图（ps文件），切图布局制作出html（demo）；3. 与后端开发工程师沟通，制定

5、数据传输格式，在demo上增加js支持的交互效果及简单业务逻辑；4. 把demo交付给后端开发工程师，协助他们整合页面；5. 项目测试阶段，协助测试工程师修复各种浏览器下的bug与不一致性。9实用精品课件PPTLOGO前端开发的指导思想：平稳退化和渐进增强平稳退化和渐进增强10实用精品课件PPTLOGO前端开发的指导思想：平稳退化和渐进增强 平稳退化和渐进增强：(Graceful Degradation & Progressive Enhancement)解释：也称优雅降级。通过使用某些技术，当浏览器支持相应功能时文档会得到增强（渐进增强），而当浏览器不支持相应功能时，文档被退化（平稳退化）。

6、* 也就是说，并非所有浏览器都遵循相同的标准创建，而且不能对所有浏览器一视同仁。做法：为浏览器支持进行分类（参考YUI：http:/ 对于古董级的浏览器，由于支持的功能有限，在基本功能逻辑满足的情况下，做一套简单的视觉设计； 对于较先进的浏览器，功能丰富且符合标准，在基本功能逻辑满足的情况下，做一套体验比较好的视觉设计；11实用精品课件PPTLOGO前端开发的指导思想：平稳退化和渐进增强浏览器支持分类：(参照YUI)A-Grade：实现96%以上的较好设计的体验，根据其对html5和css3的支持，可做优雅降级处理。包括： IE6.0+、Firefox3.6.+、Safari5+、Chrome

7、(latest)、Opara9.5+X-Grade：因为未知其功能支持情况，如移动设备的各种浏览器，大体支持即可。包括：形形色色的移动设备上的浏览器、无条件测试的浏览器（Mac、iOS及Android）C-Grade：实现基本的逻辑功能及简单的设计体验。包括： IE=6、Firefox3、Opera 9.5、Safari 3、Netscape 812实用精品课件PPTLOGO前端开发的三大中流砥柱，前端代码库的搭建和维护html+css+js和前端代码库13实用精品课件PPTLOGO前端开发的三大中流砥柱html+css+jshtml：结构css：表现js：行为14实用精品课件PPTLOGO前

8、端代码库的搭建和维护前端代码库：前端文件作为项目比较特殊的一部分，因为跟demo密切相关（通过demo可以快速了解一个项目的业务逻辑），所以建议前端文件让前端工程师搭建代码库，去进行合理的维护。一个中心svn代码库，三个环境（demo演示环境、daily测试环境、预发测试环境）中心svn代码库，存放sys、plugin和apps1.apps包含各个项目用到css、js和图片2.sys放公用的js库、ui库和css3.plugin放公用的js插件15实用精品课件PPTLOGO前端代码库的搭建和维护前端svn代码库本地demo环境服务器demo环境daily测试环境预发测试环境线上环境assets

9、更新与提交（分支）assets更新与提交（主干）正式发布（主干）assets预发（主干）（）合并代码到主干（）assets分支合并到daily环境16实用精品课件PPTLOGO前端开发的发展方向：从demo到webApp从demo到webApp随着html5和css3的强力推出，再加上浏览器性能的逐渐增强，前端技术的工作范围也是越来越广。html5开始支持本地存储和简单数据库支持，利用js可以用SQL语句控制数据库。还有notejs在服务器端的应用表现越来越佳，这一切使得webApp开发成为可能。web2.0时代，前端工程师的开发是产出demo，使书面化的交互变成直观的页面效果，再配合强大的ajax等技术，实现了页面无延时刷新