《前端开发那些事儿》.pptVIP

前端开发那些事儿 1 前端开发发展历程、职责范围介绍 2 前端开发的指导思想：平稳退化和渐进增强 3 前端开发三大中流砥柱，代码库的搭建和维护 4 前端开发方式的发展方向 本次分享四大模块 前端开发工程师发展历程、职责范围介绍 发展历程和职责范围 web1.0时代：table布局时代 美术工程师(Art Engineer)：特指网页美工，指精通CSS/HTML/JAVASCRIPT等网页设计语言，并且熟悉各种平面设计软件，如PHOTOSHOP、FLASH、Illustrator等软件。 网页制作(webpage maker)：指网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。 前端开发工程师发展历程、职责范围介绍 web2.0时代：(x)html+css布局时代 web前端工程师：主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 职位分类：“前端开发工程师”、“资深前端开发工程师”、“前端架构师” 前端开发工程师发展历程、职责范围介绍 前端开发工程师发展历程、职责范围介绍 前端开发工程师：职责是根据设计图用HTML和CSS完成页面制作，并对完成的页面进行维护和对网站前端性能做相应的优化。 资深前端开发工程师：职责是使用JS或者AS来编写和封装具有良好性能的前端交互组件，对Web项目的前端实现方案提供专业指导和监督，对新人进行培训，还要跟踪研究前端技术，设计并实施全网前端优化。 前端架构师：职责是带领组员实现全网的前端框架和优化，创建前端的相应标准和规范，还要站在全局的角色为整个网站的信息架构和技术选型提供专业意见和方案。 前端开发工程师发展历程、职责范围介绍 web3.0时代：移动互联网app时代 前端开发工程师职责 前端开发工程师发展历程、职责范围介绍 职责范围总结： 参与项目需求和交互设计的讨论，并给出前端角度的意见，尽可能用html+css+js实现项目的用户体验； 拿到视觉设计师的效果图（ps文件），切图布局制作出html（demo）； 与后端开发工程师沟通，制定数据传输格式，在demo上增加js支持的交互效果及简单业务逻辑； 把demo交付给后端开发工程师，协助他们整合页面； 项目测试阶段，协助测试工程师修复各种浏览器下的bug与不一致性。 前端开发的指导思想：平稳退化和渐进增强 平稳退化和渐进增强 前端开发的指导思想：平稳退化和渐进增强 平稳退化和渐进增强：(Graceful Degradation Progressive Enhancement) 解释：也称优雅降级。通过使用某些技术，当浏览器支持相应功能时文档会得到增强（渐进增强），而当浏览器不支持相应功能时，文档被退化（平稳退化）。 * 也就是说，并非所有浏览器都遵循相同的标准创建，而且不能对所有浏览器一视同仁。 做法：为浏览器支持进行分类（参考YUI：/blog/2010/11/03/gbs-update-2010q4/） 结果： 对于古董级的浏览器，由于支持的功能有限，在基本功能逻辑满足的情况下，做一套简单的视觉设计； 对于较先进的浏览器，功能丰富且符合标准，在基本功能逻辑满足的情况下，做一套体验比较好的视觉设计； 前端开发的指导思想：平稳退化和渐进增强 浏览器支持分类：(参照YUI) A-Grade：实现96%以上的较好设计的体验，根据其对html5和css3的支持，可做优雅降级处理。 包括： IE6.0+、Firefox3.6.+、Safari5+、Chrome(latest)、Opara9.5+ X-Grade：因为未知其功能支持情况，如移动设备的各种浏览器，大体支持即可。 包括：形形色色的移动设备上的浏览器、无条件测试的浏览器（Mac、iOS及Android） C-Grade：实现基本的逻辑功能及简单的设计体验。 包括： IE=6、Firefox3、Opera 9.5、Safari 3、Netscape 8 前端开发的三大中流砥柱，前端代码库的搭建和维护 html+css+js和前端代码库 前端开发的三大中流砥柱html+css+js html：结构 css：表现 js：行为 前端代码库的搭建和维护 前端代码库： 前端文件作为项目比较特殊的一部分，因为跟demo密切相关（通过