web所需掌握的技术

1.3前端开发所需掌握的技术（1）阅读了第1.2.3节后，也许你对前端开发所要掌握的技术有了大概的了解，下面我们再来看一下下面这段招聘信息：网站前端工程师（Front-endWebdeveloper）工作职责：负责网站前端设计及开发。职位要求：计算机相关专业，本科以上学历。精通Java/Ajax/JavaScript/XML/CSS，有至少3年相关工作经验。了解不同浏览器之间的差异，写出的代码具有良好的兼容性。熟悉页面架构和布局，对Web标准和标签语有深入了解。对用户体验、交互操作流程及用户需求有深入了解。能根据设计效果图严谨落实界面，精确到像素意识。有丰富的网站前端工作经验。笔者认为上面这段招聘信息仅仅列出了一些基本的要求，一个优秀的前端工程师需要掌握很多与之相关的技术，绝大部分的团队都需要一个真正理解及应用这些技术的人才。正确地深入理解前端所应用到的各项技术和技能，并且能做到有的放矢，这对于个人及团队都是有利的。下面我们进行整体的概括。1.业内标准关于业内标准，首先必须了解的是W3C的一系列标准，前面的章节中已经详细地介绍了，这里不再赘述，需要重点关注的有：HTML、XHTML、XML、CSS、JavaScript。其次，根据你所归属的阵营熟悉一些标准，比如需要JavaEE的相关标准或者是.NET的相关标准。最后，需要掌握一些常用的前端设计的思路以及最佳实践。2.语言在众多的开发语言中，属于前端技术的语言并不多，除了W3C所发布的HTML、CSS、XML等描述性语言外，还包括客户端脚本语言JavaScript等。另外还有一种语言也是非常重要的，即ActionScript，它是开发AdobeRIA的基础语言，Flex、Flash和AIR都采用它作为脚本语言。为什么这里要提到Flash？Flash并不是W3C标准，但它在目前的互联网领域中扮演着非常重要的角色。相比以前，如今声音、图像、动画、视频已遍布大大小小的网站，不管它们是以JavaScript实现的还是以Flash为基础实现的，今后的互联网都将是RIA的天下。而且目前90％的计算机都已安装FlashPlayer，基于Flash的应用将会越来越丰富。即使不知道如何设计一个Flash广告，你也要知道如何修改里面的字体，它与后台数据层如何交互。它的ActionScript编程是非常有趣的，它也是基于EMACScript这一标准的脚本语言，与JavaScript相似。本书不详细介绍Flash，有兴趣的读者可以关注Adobe实验室网站：。3.视觉设计视觉设计最早被应用于印刷宣传，电影海报、报刊杂志等传播媒体都可以理解为平面设计或图形设计，它们是利用视觉符号来传递各种信息的。随着科技的日新月异和互联网的发展，视觉设计在互联网这个大媒体中的作用越来越重要。不管是静态的网页还是画面炫丽的Flash动画或魔兽世界中的游戏画面，它们都离不开视觉设计。在软件系统领域中一般称视觉设计为UI（User-Inteface）设计。如果仅从UI来理解，那么它就是指界面设计，即在网页上看到的效果。抛开Web的话题，回到传统C/S模式的应用系统，那它要做哪些事情呢？我们先来看一下图1-9所示的苹果操作系统Xcode软件的界面。1.3前端开发所需掌握的技术（2）5.表现层逻辑很多前端开发人员并不重视这部分内容，在有的公司，这部分内容根本就不属于前端开发人员的责任范畴。但是笔者认为，表现层是页面与后端程序沟通的桥梁，作为一名出色的前端开发人员必须关注它，这将有助于应用的可维护性。单纯从页面的角度来讨论前端架构是比较片面的，这也常常会造成对于前端设计人员设计的页面或风格，后端开发人员没有办法实现的局面。因此，结合表现层的逻辑来考虑整个前端架构更为合理，比如，在实体设计的时候就可以考虑到未来在页面上要如何展现这些设计，是否能够实现原型的效果。前端开发人员介入表现层开发将有助于解决原来前端开发所存在的一些问题。在软件体系架构中，三层的结构是最常见的，通常客户端不直接访问数据库，而在它们之间加入服务层，用于处理业务逻辑及数据访问。图1-11是最常见的JavaEE三层结构图。（点击查看大图）图1-11JavaEE三层结构图表现层的实现上，在JavaEE领域与.NET领域，主流设计模式是MVC（ModelViewController）模型。它强制性地使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器，它们各自处理自己的任务。MVC模型具有低耦合性、高重用性、便于维护、部署成本低等优点。业内主流的J2EEMVC框架如下所示：Struts：Apache曾经最为流行的MVC组件，目前大量的JavaEE项目仍然在使用。Struts2：Apache用Struts和WebWork组合出来的新产品，目前上升势头强劲，本书的后续章节将以该框架作为表现层逻辑的实现方案。WebWork：老牌的MVC组件，后来组合成了Struts2，不过自身仍在发展。SpringMVC：SpringFramework整合自己Spring的优势推出的MVC组件，其用户也不少。JSF：这个是一个规范，Sun、Apache、Jboss都有各自的实现，用户量很大，被众多IDE支持。Tapestry：最彻底的MVC开发框架，有丰富的组件资源，重用性很高。6.兼容性技术兼容性所引发的问题近年来逐渐引起人们的重视，其实兼容性问题一直都存在，为什么如今才这么引人关注？这是有原因的。首先，IE正在失去一家独大的局面，曾经IE占据浏览器市场90%的日子已经一去不复返了。同时，由于IE6、IE7、IE8对于W3C标准的支持程度都不尽相同，IE体系内部已经存在了兼容性的问题，再加上FireFox、Chrome等浏览器的强势崛起，各厂商与IE间的兼容性问题逐渐显著。其次，在Web2.0时代，随着Ajax技术的普及与发展，时常用大量的脚本与DOM操作来实现页面上的各种特效，在DOM操作、XML解析、创建异步通信对象等常用操作上的浏览器兼容性问题就逐渐显现出来。最后，随着3G时代的到来，手机接入互联网的速度已经有了空前的提升，3G手机用户可以直接访问普通的网页。这时，要解决手机显示屏尺寸与普通显示屏尺寸不匹配而引起的用户体验的问题，需要考虑在布局框架上做相应的调整来实现兼容，然而布局又恰恰是浏览器兼容问题的“重灾区”，在各互联网应用越发重视手机用户的今天，此类问题自然越发引人关注。因此，作为一名前端开发人员，必须掌握以下各个主流浏览器的特性：MozillaFirefoxChromeMicrosoftInternetExplorerOperaAppleSafari在掌握这些浏览器特性的同时，还需要掌握一些常用的Hack技术来解决一些兼容问题。7.开放服务SNS网站的兴起，带动了国内外互联网的新一轮盈利模式的变化。最早将Web应用API开放出来的应该算是Facebook，它通过开放API将自己变成了一个平台，让其他企业或者个人都能基于这个平台开发各种各样的应用。由于Facebook拥有大量的用户，每天都会产生近45个应用，每个人都能在上面找到适合自己的应用。继Facebook后，国内外互联网巨头也相继开放各自的API。设想一下，如果明天我们将要去海南旅行，我们都需要做些什么？我们需要订机票、酒店、地图、导游，还有什么？还要有这样一个应用，打开某个网址，其网页内容中嵌入了各种需要的数据及航空公司提供的出行航班时刻信息，还能快速订票，Yahoo地图会告诉我目的地旅行线路，未来几天目的地的天气，Flickr可以展示网页旅行照片及酒店信息，等等，诸如此类的数据整合，前提是利用各大公司提供的API开发小部件应用，也称做Widget。目前国内的大多数SNS网站也纷纷提供了开放的API，这里我们只是举了几个常用的API的例子来简单地了解一下。希望在Web2.0这样一个大环境下，能为用户提供更多的数据。不管是基于REST还是SOAP，前端技术人员都应该更深入地了解开放服务。8.SEOSEO（SearchEngineOptimization，搜索引擎优化）是一种基于互联网的营销方式，主要作用是增强网站在搜索引擎中的曝光率，从而增加销售机会或信息共享。最直观的反应是网站信息在搜索引擎中的排名。SEO是一项技术，是遵循搜索引擎科学而全面的理论机制，对网站结构、网页文字语言和站点间的互动外交策略等进行合理规划部署来发掘网站的最大潜力，从而使其在搜索引擎中具有较强的自然排名竞争优势，对促进企业在线销售和强化网络品牌起到作用。有人认为SEO很简单，就是做个排名，其实真正的SEO是通过采用易于搜索引擎索引的合理手段，使网站对用户和搜索引擎更友好，从而更容易被搜索引擎收录及优先排序。搜索引擎优化是一种搜索引擎营销指导思想，而不仅仅是对百度和Alexa等的排名。搜索引擎优化工作贯穿于网站策划、建设、维护全过程的每个细节，值得网站设计、开发和推广的每位参与人员了解其职责对于SEO效果的意义。要做好SEO，首先要做的是什么？除了SEO技术本身外，还需要面对的是W3C的技术标准，准确地运用标签，该使用h1的地方不能用h6，该在img元素内增加alt属性的时候应该加上。如果能够做好设计和体验，那么做好SEO也就不是难事了。9.性能及安全对于Web应用，性能与安全都是需要重点关注的问题，因此作为前端开发人员必须具备相关的知识，应该能够熟悉如何在开发高性能的Web应用程序的同时，保证应用的安全可靠，避免那些常见漏洞。在网络安全方面，需要关注OWASP（OpenWebApplicationSecurityProject）这个非营利性组织，其网址为。它致力于提高Web应用程序的安全可视性，帮助开发人员应对应用程序的安全风险。该网站提供了大量有价值的资料，比如一些指南性质的文档、检查表与规范以及大量针对提高应用安全性的开源项目，在这里不再赘述。对于性能这方面，开发人员需要掌握一些基础的原则（比如Yahoo的12条性能准则），保证在开发阶段就能够提供高效的代码。同时还应该掌握多种性能检测工具，确保在应用出现性能问题的时候能够进行准确定位，提供有效的解决方案。10.基本素质上述提到的都是具体的技术概念，作为一名前端开发人员还需具备一些重要的素质：团队合作能力、沟通能力和掌握正确的开发流程。良好的团队合作能力与沟通能力是每一个开发人员都需要具备的素质。与后端的开发人员合作，设计良好的前端架构，与用户接触，得到用户需求，这些都依赖于良好的沟通能力。尤其是需求挖掘，这是一个漫长的过程，如何在与用户的沟通中获取真正的需求，如何引导用户得到他们真正想要的东西，这些都建立在与用户良好沟通与信任的基础上。掌握正确的开发方法和开发流程也至关重要，处理事情的方式的正确性将直接决定产品的质量与流程的可控程度。无论是软件的工具栏还是菜单等，Mac都为其提供了相应的接口调用，操作时只需要执行文本及命令即可。同样的，开发VB应用时，开发库已为你提供了丰富的UI组件，那开发这样的应用软件需要视觉设计师吗？回答是需要，因为视觉设计师的工作不仅是将控件美化，为其加上一些色彩，对于Web视觉设计师来说，他还要将信息架构的内容友好且美观地表现在浏览器上或是PS工作区中，就像传统的海报设计一样，它还需要应用排版和字体。我们常常会发现，UI设计师设计出来的稿子无法进行HTML编码，有些背景根本无法实现，或者只能像十年前的网页一样，通过先使用Photoshop画界面，然后转换到Firework切片，再自动导出为HTML这样一个工作流程来实现，得到的网页中全是图片，这样的效果是不符合目前的Web标准的。所以，在了解色彩设计的同时，我们还需要了解Web的排版艺术及交互艺术。对于Web应用的视觉设计，不仅需要了解诸如Photoshop这类画图工具，还需要了解设计Web应用的一些方法，如布局、排版、色彩、字体、表单等的设计方法，能迅速将PSD文件