详解前端开发人员的职业规划和自身定位

前面发表了很多关于前端开发的消极言论，比如，提到前端开发人员费力不讨好、前端开发的一些不规范现象、前端开发的学习曲线比较特殊等。这些是否暗示这个职业没有发展前途呢？答案是否定的，虽然目前前端开发领域确实存在这样那样的不足，但是笔者认为这个行业的未来是光明的。那作为一名前端开发人员要如何对自己进行定位呢？他们的职业规划又是如何呢？下面是一些建议，和大家分享一下。

第一，这是份很有前途的职业。选择新行业，选择新企业，选择新部门，这很适合一些刚入行的朋友们。互联网行业相对于传统行业算是新行业；如今的互联网公司也在蓬勃发展，公司的种类与数量都在上升；前端开发这块领域也正被业内重新认识，一些中高端和一些崭新的前端职业的出现就是一个可喜的标志。

第二，想一下自己是否适合和喜欢这份工作。Web 前端工程师并不是设计师，笔者更倾向于将这个岗位定位为开发人员。在这个岗位上每天接触到的更多的仍然是代码。如果你喜欢的是设计，那么应该适当调整自己的学习重点。Web 前端工程师应该是那种完美主义者。术业有专攻，多想想自己的职业规划，要有长远的打算，不能总是停留在网页设计这个初级阶段，要逐步地涉及用户体验、前端架构等领域。

第三，通过努力找到好的雇主。如果你将自己定位为 Web 前端工程师，那么去投靠对该岗位有一定认识的公司比较合适。现在国内的很多互联网公司已经逐渐开始重视中高端前端开发人员的培养，这是一个良好的契机。在这样的公司里会有明确的职位说明和职责范围，以及完善的培养计划。

也许你已经摩拳擦掌，想要投身到这个充满活力的行业了。在这之前，先让我为你梳理一下前端开发的知识体系，看看一名前端开发人员需要掌握哪些技术。

网站前端工程师（Front-end Web developer）

工作职责：

负责网站前端设计及开发。

职位要求：

计算机相关专业，本科以上学历。

精通Java/Ajax/JavaScript/XML/CSS，有至少3年相关工作经验。

了解不同浏览器之间的差异，写出的代码具有良好的兼容性。

熟悉页面架构和布局，对Web标准和标签语有深入了解。

对用户体验、交互操作流程及用户需求有深入了解。

能根据设计效果图严谨落实界面，精确到像素意识。

有丰富的网站前端工作经验。

笔者认为上面这段招聘信息仅仅列出了一些基本的要求，一个优秀的前端工程师需要掌握很多与之相关的技术，绝大部分的团队都需要一个真正理解及应用这些技术的人才。正确地深入理解前端所应用到的各项技术和技能，并且能做到有的放矢，这对于个人及团队都是有利的。下面我们进行整体的概括。

1. 业内标准

关于业内标准，首先必须了解的是W3C的一系列标准，前面的章节中已经详细地介绍了，这里不再赘述，需要重点关注的有：HTML、XHTML、XML、CSS、JavaScript。

其次，根据你所归属的阵营熟悉一些标准，比如需要Java EE的相关标准或者是.NET的相关标准。

最后，需要掌握一些常用的前端设计的思路以及最佳实践。

2. 语言

在众多的开发语言中，属于前端技术的语言并不多，除了W3C所发布的HTML、CSS、XML等描述性语言外，还包括客户端脚本语言JavaScript等。另外还有一种语言也是非常重要的，即ActionScript，它是开发Adobe RIA的基础语言，Flex、Flash和AIR都采用它作为脚本语言。为什么这里要提到Flash？Flash并不是W3C标准，但它在目前的互联网领域中扮演着非常重要的角色。相比以前，如今声音、图像、动画、视频已遍布大大小小的网站，不管它们是以JavaScript实现的还是以Flash

为基础实现的，今后的互联网都将是RIA的天下。而且目前90％的计算机都已安装Flash Player，基于Flash的应用将会越来越丰富。即使不知道如何设计一个Flash广告，你也要知道如何修改里面的字体，它与后台数据层如何交互。它的ActionScript编程是非常有趣的，它也是基于EMACScript这一标准的脚本语言，与JavaScript相似。本书不详细介绍Flash，有兴趣的读者可以关注Adobe实验室网站：.。

3. 视觉设计

视觉设计最早被应用于印刷宣传，电影海报、报刊杂志等传播媒体都可以理解为平面设计或图形设计，它们是利用视觉符号来传递各种信息的。随着科技的日新月异和互联网的发展，视觉设计在互联网这个大媒体中的作用越来越重要。不管是静态的网页还是画面炫丽的Flash动画或魔兽世界中的游戏画面，它们都离不开视觉设计。在软件系统领域中一般称视觉设计为UI（User-Inteface）设计。如果仅从UI来理解，那么它就是指界面设计，即在网页上看到的效果。

无论是软件的工具栏还是菜单等，Mac都为其提供了相应的接口调用，操作时只需要执行文本及命令即可。同样的，开发VB应用时，开发库已为你提供了丰富的UI组件，那开发这样的应用软件需要视觉设计师吗？回答是需要，因为视觉设计师的工作不仅是将控件美化，为其加上一些色彩，对于Web视觉设计师来说，他还要将信息架构的内容友好且美观地表现在浏览器上或是PS工作区中，就像传统的海报设计一样，它还需要应用排版和字体。

我们常常会发现，UI设计师设计出来的稿子无法进行HTML编码，有些背景根本无法实现，或者只能像十年前的网页一样，通过先使用Photoshop画界面，然后转换到Firework切片，再自动导出为HTML这样一个工作流程来实现，得到的网页中全是图片，这样的效果是不符合目前的Web标准的。

所以，在了解色彩设计的同时，我们还需要了解Web的排版艺术及交互艺术。对于Web应用的视觉设计，不仅需要了解诸如Photoshop这类画图工具，还需要了解设计Web应用的一些方法，如布局、排版、色彩、字体、表单等的设计方法，能迅速将PSD文件内的要素或PNG图片的特殊效果通过HTML、CSS等代码来实现，比如，需要将相册内的所有图片都加上属于自己的印章，则首先应该想到要将印章制作成PNG格式的透明图片，再使用CSS的一些技术给相册图片加上印章。

视觉设计是前端开发的一项基础技能，前端开发的一个重要意义就是给予用户良好的视觉体验。

4. 交互设计

一般做UE的人都会强调可用性的概念，将可用性视作产品设计的最高层次。软件是人与机器的交互，这是软件所体现的“能力”。在ISO中这样定义可用性：某一事物的可用性应当可以以效力、效率、满意度三个维度进行衡量。效力即用户可以完成任务，效率即用户完成任务的快慢，满意度即衡量用户是否很享受完成任务的这个过程。不管是Web软件还是桌面软件，在可用性方面都必须遵守这三个标准。网站的可用性在很大程度上反映了其产品的人性化操作，这是交互设计中

的一个部分。

交互设计必须以用户为中心，应用“以目标为导向的设计”方法。从用户角度来说，交互设计是一种如何让产品易用、有效且让人感到愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在与产品交互时彼此的行为，了解人的心理和行为特点。交互设计体现在小到一个链接的设计，大到一个大的操作流程等的过程都应受到重视。这些年人们对于用户体验及可用性等的研究也越来越多。最后我们要明白，交互设计是一个过程设计，不管是开发DVD播放机还是开发互联网应用，都需要交互设计。

5. 表现层逻辑

很多前端开发人员并不重视这部分内容，在有的公司，这部分内容根本就不属于前端开发人员的责任范畴。但是笔者认为，表现层是页面与后端程序沟通的桥梁，作为一名出色的前端开发人员必须关注它，这将有助于应用的可维护性。单纯从页面的角度来讨论前端架构是比较片面的，这也常常会造成对于前端设计人员设计的页面或风格，后端开发人员没有办法实现的局面。因此，结合表现层的逻辑来考虑整个前端架构更为合理，比如，在实体设计的时候就可以考虑到未来在页面上要如何展现这些设计，是否能够实现原型的效果。前端开发人员介入表现层开发将有助于解决原来前端开发所存在的一些问题。

在软件体系架构中，三层的结构是最常见的，通常客户端不直接访问数据库，而在它们之间加入服务层，用于处理业务逻辑及数据访问。

表现层的实现上，在Java EE领域与.NET领域，主流设计模式是MVC（Model View

Controller）模型。它强制性地使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器，它们各自处理自己的任务。MVC模型具有低耦合性、高重用性、便于维护、部署成本低等优点。

业内主流的J2EE MVC框架如下所示：

Struts：Apache曾经最为流行的MVC组件，目前大量的Java EE项目仍然在使用。

Struts2 ：Apache用Struts 和 WebWork组合出来的新产品，目前上升势头强劲，本书的后续章节将以该框架作为表现层逻辑的实现方案。

WebWork：老牌的MVC组件，后来组合成了Struts 2，不过自身仍在发展。

Spring MVC：SpringFramework整合自己Spring的优势推出的MVC组件，其用户也不少。

JSF：这个是一个规范，Sun、Apache、Jboss都有各自的实现，用户量很大，被众多IDE支持。

Tapestry：最彻底的MVC开发框架，有丰富的组件资源，重用性很高。

6. 兼容性技术

兼容性所引发的问题近年来逐渐引起人们的重视，其实兼容性问题一直都存在，为什么如今才这么引人关注？这是有原因的。

首先，IE正在失去一家独大的局面，曾经IE占据浏览器市场90%的日子已经一去不复返了。同时，由于IE6、IE7、IE8对于W3C标准的支持程度都不尽相同，IE体系内部已经存在了兼容性的问题，再加上FireFox、Chrome等浏览器的强势崛起，各厂商与IE间的兼容性问题逐渐显著。

其次，在Web 2.0时代，随着Ajax技术的普及与发展，时常用大量的脚本与DOM操作来实现页面上的各种特效，在DOM操作、XML解析、创建异步通信对象等常用操作上的浏览器兼容性问题就逐渐显现出来。

最后，随着3G时代的到来，手机接入互联网的速度已经有了空前的提升，3G手机用户可以直接访问普通的网页。这时，要解决手机显示屏尺寸与普通显示屏尺寸不匹配而引起的用户体验的问题，需要考虑在布局框架上做相应的调整来实现兼容，然而布局又恰恰是浏览器兼容问题的“重灾区”，在各互联网应用越发重视手机用户的今天，此类问题自然越发引人关注。

因此，作为一名前端开发人员，必须掌握以下各个主流浏览器的特性：

Mozilla Firefox

Chrome

Microsoft Internet Explorer

Opera

Apple Safari

在掌握这些浏览器特性的同时，还需要掌握一些常用的Hack技术来解决一些兼容问题。

7. 开放服务

SNS网站的兴起，带动了国内外互联网的新一轮盈利模式的变化。最早将Web应用API开放出来的应该算是Facebook，它通过开放API将自己变成了一个平台，让其他企业或者个人都能基于这个平台开发各种各样的应用。由于Facebook拥有大量的用户，每天都会产生近45个应用，每个人都能在上面找到适合自己的应用。继Facebook后，国内外互联网巨头也相继开放各自的API。

设想一下，如果明天我们将要去海南旅行，我们都需要做些什么？我们需要订机票、酒店、地图、导游，还有什么？还要有这样一个应用，打开某个网址，其网页内容中嵌入了各种需要的数据及航空公司提供的出行航班时刻信息，还能快速订票，Yahoo地图会告诉我目的地旅行线路，未来几天目的地的天气，Flickr可以展示网页旅行照片及酒店信息，等等，诸如此类的数据整合，前提是利用各大公司提供的API开发小部件应用，也称做Widget。目前国内的大多数SNS网站也纷纷提供了开放的API，这里我们只是举了几个常用的API的例子来简单地了解一下。希望在Web 2.0这样一个大环境下，能为用户提供更多的数据。不管是基于

REST还是SOAP，前端技术人员都应该更深入地了解开放服务。

8. SEO

SEO（Search Engine Optimization，搜索引擎优化）是一种基于互联网的营销方式，主要作用是增强网站在搜索引擎中的曝光率，从而增加销售机会或信息共享。最直观的反应是网站信息在搜索引擎中的排名。SEO是一项技术，是遵循搜索引擎科学而全面的理论机制，对网站结构、网页文字语言和站点间的互动外交策略等进行合理规划部署来发掘网站的最大潜力，从而使其在搜索引擎中具有较强的自然排名竞争优势，对促进企业在线销售和强化网络品牌起到作用。有人认为SEO很简单，就是做个排名，其实真正的SEO是通过采用易于搜索引擎索引的合理手段，使网站对用户和搜索引擎更友好，从而更容易被搜索引擎收录及优先排序。搜索引擎优化是一种搜索引擎营销指导思想，而不仅仅是对百度和Alexa等的排名。搜索引擎优化工作贯穿于网站策划、建设、维护全过程的每个细节，值得网站设计、开发和推广的每位参与人员了解其职责对于SEO效果的意义。要做好SEO，首先要做的是什么？除了SEO技术本身外，还需要面对的是W3C的技术标准，准确地运用标签，该使用

的地方不能用

，该在元素内增加alt属性的时候应该加上。如果能够做好设计和体验，那么做好SEO也就不是难事了。

9. 性能及安全

对于Web应用，性能与安全都是需要重点关注的问题，因此作为前端开发人员必须具备相关的知识，应该能够熟悉如何在开发高性能的Web应用程序的同时，保证应用的安全可靠，避免那些常见漏洞。

在网络安全方面，需要关注OWASP（Open Web Application Security Project）这个非营利性组织，其网址为./。它致力于提高Web应用程序的安全可视性，帮助开发人员应对应用程序的安全风险。该网站提供了大量有价值的资料，比如一些指南性质的文档、检查表与规范以及大量针对提高应用安全性的开源项目，在这里不再赘述。

对于性能这方面，开发人员需要掌握一些基础的原则（比如Yahoo的12条性能准则），保证在开发阶段就能够提供高效的代码。同时还应该掌握多种性能检测工具，确保在应用出现性能问题的时候能够进行准确定位，提供有效的解决方案。

10. 基本素质

上述提到的都是具体的技术概念，作为一名前端开发人员还需具备一些重要的素质：团队合作能力、沟通能力和掌握正确的开发流程。

良好的团队合作能力与沟通能力是每一个开发人员都需要具备的素质。与后端的开发人员合作，设计良好的前端架构，与用户接触，得到用户需求，这些都依赖于良好的沟通能力。尤其是需求挖掘，这是一个漫长的过程，如何在与用户的沟通中获取真正的需求，如何引导用户得到他们真正想要的东西，这些都建立在与用户良好沟通与信任的基础上。

掌握正确的开发方法和开发流程也至关重要，处理事情的方式的正确性将直接决定产品的质量与流程的可控程度。