1.1 前端开发是做什么的

前端开发是从网页制作演变而来的，在国内被大家所认知并接受是在2005年之后。在2005年之前，处于1.0时代的Web并没有“前端”这个概念，此时的网页内容主要就是一些文字和图片，用户使用网站的行为也以浏览为主，这样的网页使用几个网页制作软件，诸如Photoshop+Dreamweaver+Flash就能制作出来。所以Web1.0时代的网页开发也叫网页制作。2005年之后，互联网进入Web2.0时代，对网页的开发要求越来越高，比起1.0时代，其开发难度加大，开发方式也有了本质改变，因此网页开发不再叫网页制作，而是叫前端开发。前端开发已经不再是掌握几个制作软件就可以做好的事了，它需要专业的前端工程师才能做好。随着互联网行业的发展，前端开发在产品开发环节中的作用变得越来越重要，因而近几年来前端工程师备受青睐，一般水平的前端工程师平均年薪可达10万元，资深前端工程师年薪高达20万～80万元。但就这样的年薪，很多企业还是很难找到合适的前端工程师。图1-1是从拉勾网（一个专注互联网招聘的平台）随机截取的一段招聘信息截图。

从上述企业的招聘信息来看，前端行业的就业薪资是较为可观的。读者朋友们，如果你对此感兴趣并能潜下心来，花一段时间认真学习前端开发相关技术并不断实践的话，相信有一天你也能成为一名专业的前端工程师，拿到上述月薪将不再是遥不可及的梦想了。

各位读者朋友们，在我们即将踏入前端学习之旅前，我们必须了解一些基本问题，例如，前端开发既然不仅仅是网页制作，那它是什么呢？如何才能做好专业的前端开发呢？下面将为大家一一讲解。

前端开发的主要工作就是开发用户操作界面，通俗来说就是网页。在2005年以前，网页功能比较单一，主要用于展示信息，在那个年代还不太注重交互和用户体验，网页内容也主要是文字和图片，如图1-2所示。2005年以后，网页除了展示信息以外，还需要美观的设计、炫酷的交互、良好的用户体验、复杂的业务逻辑处理、跨终端的适配兼容等，如图1-3所示。

如今这个时代，是讲究“颜值”和个人体验的时代。“高颜值”以及能与用户进行友好交互的网站会极大地吸引用户，用户会更加愿意深入地了解这样的网站。同时，“高颜值”以及交互性好的网站也能极大地提高网站的黏度（即网站黏滞程度，是吸引访客第二次访问或者在网页长时间停留的重要指标）。面对这些较高的要求，专业前端开发人员必须要具备以下能力。

1．复杂炫酷的页面交互设计能力

在进行前端开发时，开发人员除了要将设计图完美还原以外，还需要对交互效果进行编写。当用户打开页面的时候，如果页面风格新颖、交互炫酷，那他就会感觉你的产品技术含量很高。相反如果页面风格老旧、交互呆板，他就会觉得你的产品不行，不买你的账。因此，前端开发工程师要具备设计复杂炫酷页面的能力。例如：妙味官网首页的Logo以及导航，在鼠标悬停和移开时的不同效果，就体现了一种较为炫酷的交互效果，如图1-4所示。

2．良好的用户体验设计能力

用户体验是从用户的角度出发，不仅要把炫酷的视觉效果展现给用户，还要从功能上让用户有所感知。例如当用户注册微博账号时，电话号码提供错误或者没有输入密码，输入框右侧应有相应提示，如图1-5所示。这种用户体验的细节问题是否处理妥当，是判断一名前端工程师是否优秀的因素。

3．复杂的业务逻辑处理能力

现在的前端工程师不仅要制作页面，还需要配合服务端工程师一起去实现某些功能。例如，微博的文章发布、用户搜索、评论留言等内容的开发，前端开发工程师对后端数据接收是否成功、搜索结果状态以及评论留言是否合法等进行逻辑判断处理。因此，前端开发工程师要具备处理复杂业务逻辑的能力。

4．能处理跨终端的适配兼容问题

近年来，智能手机发展迅猛，几乎人手一部，大街上随处可见“低头族”。随着手机、平板电脑等不同移动终端的普及，越来越多的人喜欢移动办公、移动学习、移动娱乐……人们经常会在不同的终端之间进行切换，因此，这就要求一个页面能实现跨终端的适配兼容——即能在不同终端中正确显示。比如域名www.miaov.com，在PC和移动端浏览器中的显示如图1-6所示，该示例给我们展示了该域名跨终端适配兼容的其中一种情况，这种适配兼容运用于网站内容比较复杂的情况，通过后台判断，渲染不同模板进行输出或跳转。

还有一种情况，就是各终端显示的页面内容完全一样，但页面布局等样式会根据终端屏幕的大小进行自动切换，如图1-7所示就是响应式设计。响应式网页开发主要是基于一套代码来适配不同尺寸的终端，有关响应式网页开发技术请阅读本系列丛书的响应式开发。

综上所述，前端开发的工作主要是开发用户操作界面，其中涉及的内容包括实现炫酷的页面交互、提供良好的用户体验、配合服务端工程师处理复杂的业务逻辑和实现Web的跨终端适配兼容。至此，我们已经大致了解了前端开发到底是做什么的。现在的问题是如何成为一名合格的前端开发工程师？怎样才能将前端开发的各项工作做好？要成为专业的前端开发工程师、做好前端开发的各项工作，需要掌握哪些相关的技术呢？下一节我们将就这些内容进行介绍。