什么是前端?

发布:elantion 日期:2019-01-30 阅读:208 评论:0

有些同行做了好几年,仍然不知道前端是干啥的,有些人虽然能答上,不就做web面吗?这说法不完全正确,现在前端的工作比以前(2018年以前)可复杂多了。因为JavaScript的能力变得越来越强大,前端的工作就更多。但万变不离其宗,前端工作怎么复杂,但都离不开几个基本的原理。

前端与建筑

前端,广义来说就是呈现给用户的界面,并且能够与用户进行互动,所以会包括安桌前端、苹果前端、运维前端等等,狭义来说就是网站的页面。你看到的网页,狭义来说上面的所有东西都是由前端负责展示,所有的交互都由前端完成。现实中,前端工程师就像建筑工人,他负责把设计师的想法用实物一件一件地搭建起来,最终写好的网页就像房子一样,可以看(呈现),也可以住(交互)。
前端工程师跟建筑工人一样,也需要基本的建筑材料,不过不是水泥砖头,而是HTML、CSS、 JavaScript。有的同学可能学得比较快,还知道HTML5、Sass、TypeScript等新东西,但这些新工具就像起重机和搅拌机一样,只是提升效率的工具,但说到底还是HTML、CSS、JavaScript起作用,万变不离其宗。

HTML

HTML(Hyper text markup language)超文本标记语言,很牛逼的名字,其实它跟房子的骨架一样,房子的布局如何就看骨架的构造了,同理,网页的布局也要看HTML的结构,所以作用也是很牛逼的。下面看看大概的样子,以后会更详细地说明各部分的作用。

<!doctype html>
<html>
    <head></head>
    <body></body>
</html>

一个基本的HTML文件包含两个重要的部分,一个是head,一个是body,head用于告诉浏览器网页的各种信息,如宽度、语言等。body就是网页的主体内容了,导航栏、文章、图片等能看见的东西都放这儿。其它的,第一行doctype就是告诉浏览器这是什么鬼,是HTML。接着html括起来的就是这个网页的所有的html内容了。

CSS

CSS(Cascading Style Sheets)层叠样式表,简称样式表,顾名思义,就是用来给网页化妆的。网页里各个元素的长宽高、颜色、底色、位置等等都由CSS来决定,甚至动画都可以由CSS来实现。所以,CSS有点像油漆,让房子更漂亮,但远比油漆功能多得多。下面是CSS代码片段,定义了网页的字体。

html{
  font-family: 雅黑, sans-serif;
}

JavaScript

JavaScript简称JS,是一门脚本语言,它主要干两件事,一件是处理数据,另一件是反馈用户的操作。例如我们很喜欢逛淘宝,JS可以从服务器中取出商品的信息,然后展示给用户看,这就是处理数据的功能。如果你点击了购买,JS可以判断你是否登录,登录了就打开付款页面,没登录就打开登录页面,这是JS的交互功能。下面就是一个简单的JS代码,打开页面时就会弹框说『你好,比心』。

alert("你好,比心");

静态资源

除了上面三种文件,前端还要处理图片、视频等多媒体文件,这些文件我们常称为静态资源(Static resource),为什么是静态呢?是因为这些文件是直接传输给用户,是『静止不变』的,中间不作任何处理,就像把手中的照片直接递给朋友看,展现给你和朋友的都是同一张照片。因此,更新前端的文件,只需直接替换即可,不需要重启服务器,不会影响服务器运行。

前端与其他端

前端可以说是装配工人,他把其它端的零件装配在一起,最终呈现给用户。所以作为一名前端工程师,必须了解各个方面的知识,才能顺利地完成装配工作。下面简单理解一下,前端与其他端的合作关系。

前端与后端

前端虽然可以直接收到用户的信息,但前端不能持久地保存用户的信息,也不能处理用户之间的信息,例如保存用户的账号和密码、发信息给朋友等等,前端这方面就无能为力了,所以就需要一个叫后端的工程师过来帮忙。后端主要负责响应前端的请求,例如用户想注册账户,前端就会叫后端把用户的账户密码记住,后端就会乖乖地记起来。用户想登录时,前端就会叫后端对比一下账户和密码,后端就会翻出小本本(数据库),对比后告诉前端结果,前端再告诉用户账户密码是否正确。
前端是近几年(2014左右)才有的职业,很多年前,大多数后端一直兼顾前端的工作(或者说前端兼顾后端的工作?),前端与后端的界限并不是很明确,他们之间的关系,并不是简单地一刀切,但从现在的分工来说,大概就是『用户交互与数据存储』这么两个概念。

前端与移动端开发

有些人把移动端开发也称为前端,因为他们也有相当多的工作是负责实现UI的,只是使用的语言不同。移动端开发所做出来的页面都是原生执行,就是编译后的机器码运行,效率极高,用户体验相当好。但由于耗时比较长,更新不方便,维护比较困难,所以一般只在用户体验要求高的地方使用,例如APP首页。前端由于不能直接调系移动设备的功能,例如摄像头、唛克风等,所以移动端会提供接口供前端调用,就像后端一样。例如用户想在网页上贴一张自拍照,前端就可以叫移动端打开摄像头并拍照,拍好之后把照片传给前端,前端就可以呈现给用户了。

前端与视觉设计

这关系比较好理解,视觉设计师负责构思网页的布局、外观,也就是UI,前端工程师就负责用代码实现这些构思。在以前,互联网公司常常是没有设计师,前端工程师必须兼顾设计的工作,即使到现在仍有很多招聘广告要求前端工程师熟练操作PhotoShop,压根不需要好吗,摊手。所以,你能看到以前的网页是相当的丑,不是说设计能力不行,而是压根就没有设计师。

前端与交互设计

交互设计就是别人常说的UX设计师,是近年来比较新颖的工作,你想找个多年工作经验的估计很少,都是血气方刚、青春靓丽的年轻人。扯远了,前端跟他们的关系与跟视觉设计的关系差不多,一个负责画画,一个负责写代码,恕在下短见。

前端与测试

一个优秀的测试工程师除了能理清需求,测试覆盖各个场景,有些还能够写自动化测试代码,有些更专业的还会帮你看代码。有一个优秀的测试工程师跟你配合是一件很舒服的事情,能尽早地发现各种问题,避免上线出现各种bug,然后加班加点去修复。

前端是最后的装配工

当其他端把UI图、UX图、接口文档丢给前端之后,前端就把这些拼装起来,最终呈现给用户。所以,前端可不是仅仅会写JS、CSS就可以了,还需要深刻了解HTTP的原理、用户体验、服务器的基本操作、数据库存储原理和方式,客户端的工作流程等等,可以说是知识面要求最广的工程师了,但由于JavaScript、HTML、CSS都非常容易入门,习惯性认为前端是门技术含量很低的工种,工资一直比不上后端、移动端。所以宝宝们心里都很苦,只是宝宝们不说话。