浅谈前端

初识

前端是什么？⽆论是带团队还是教学⽣时，都有很多的⼈问过我这个问题。

如果你要问的是 JavaScript 是什么，CSS是什么，HTML是什么，我可能会很快的给你列出个123，并且讲上⼏个钟，它们是具体的语⾔，⼯具，⽽前端是⼀个计算机应⽤技术范畴，英⽂描述是“Front-End”，意思是在前⾯的部分，这并没有提及前端⽤什么技术，以怎样的⽅式去实现。实际上与语⾔⽆关。

要理解前端，我们先要理解什么是“端”。很简单的⼀个例⼦，⼀条线段，它的起点和终点，我们可以都称之为“端”。也就是东⻄的⼀头。

⼴义上来说，我们可以从前后顺序的⻆度观察⼀套软件架构体系，将它看作⼀条线段。把处于靠近⽤户的，能与⽤户交互的那⼀端，称为前端。⽽远离⽤户的，为前端提供数据和服务的，称为后端。

这样来看，你浏览的⽹站，⼿机中的app，电脑上的应⽤程序，⻋载导航，甚⾄家⾥智能家居的数显，都可以叫做前端。换句话说，⼀切⽤户产品与视觉和交互有关的部分，都属于前端。

前端重点解决的是系统好不好⽤的问题。正因为前端⼯程师是最贴近⽤户的⼀群开发者，他们的⼯作就是完成⽤户交互，提升⽤户体验。如果把⼀个应⽤⽐作⼀道美⻝，前端的⼯作就是让这盘“菜”⾊泽诱⼈，⾹⽓扑⿐。

⽽本⽂想要探讨的是狭义上的前端。在这之前，我们要明确⽹站其实也是⼀种软件应⽤，准确的来说是B/S架构的应⽤，它和 C/S 架构的桌⾯程序，安卓/IOS app 没有本质上的区别。

狭义上的前端开发⽬前特指 web前端开发。通俗点说就是做⽹⻚应⽤开发。在浏览⽹站时我们所接触到的所有视觉内容和交互动作–从字体到颜⾊、从轮播图到下拉菜单，从⿏标键盘的点击到触摸的⼿势都是 web 前端开发的内容。

造物

交互动作和视觉内容我们已经在很短的篇幅内提及了好⼏次，它们究竟是什么呢？

其实这两者的重点在于交互。作为软件中信息流的两端，⽤户和服务之间的通信其实就是所谓的交互。单纯的只呈现内容给⽤户，应⽤会跟图⽂⼩说没什么区别，⽐较死板，单纯的只从⽤户身上获取信息，应⽤就跟问卷调查没什么区别，缺乏反馈感。

作为数据流的末端，前端要考虑的其实就是如何把后端的数据更⽣动的呈现给⽤户，并且更友好的从⽤户收集数据并交付给后端。⽽在⽤户没有发起请求的时候，对⼀些⾏为进⾏反馈（⿏标点击，键盘输⼊，⻚⾯滚动等）。

有趣的是，前端程序员⼀直也不能称得上是前端程序员。在 HTML5 出现之前，前端程序员的岗位并没有独⽴出来，web 应⽤的视觉效果是由设计⼈员来完成的，他们在设计应⽤界⾯的同时要完成⻚⾯的构建（HTML/CSS），⽽⾏为（JavaScript）部分则交由善于操作数据的后端程序员处理。这⼀阶段的前端也就是程序员们喜闻乐道的“切图的”。

随着互联⽹的普及，个⼈电脑，移动设备，智能家居的逐步发展，各种操作系统上的 web 应⽤接踵⽽来，设计师的⼯作则逐步前移，专⼼于应⽤⻛格，样式的设计，不再关注具体实现，后端程序员的⼯作则更加后移，关注的是并发，load balance，CDN 缓存静态⽂件，同步，锁等问题。前端岗位随之被独⽴的出来，负责将⻚⾯实现，并于后端交互。但此时的前端拿到了数据，却丢了设计。

可以⻅得，前端是随着web发展，细分出来的⾏业。⽽现在的前端程⼯程师的⼯作，就是根据数据和设计，完成应⽤的⾏为，样式，结构的构建。⽆论你听到了多少关于前端技术的名词，也逃不出这⼏个⽅⾯。

下⾯我们就根据这⼏个点，简单聊⼀聊。

如果说将⼀个 web 应⽤⽐作⼀个⼈，那么作造物主的我们，需要考虑的是她的⻣架，⾎⾁和灵魂。画⻰画⻁先画⻣，⼀个⼈第⼀眼看上去是否漂亮，在于她的身材和⽐例。这也就是⽹站建设需要考虑的“结构”。在前端领域⾥，构建⽹⻚的结构我们通常称为布局。当然现在⼤部分的基础结构设计⼯作都交由 PD/UI完成，不过我们仍需要考虑如何优雅的将设计实现。前端程序员⼀般会使⽤标准结构化语⾔HTML ，辅以表现标准语⾔ CSS ，进⾏⻚⾯构建；通常会采⽤响应式布局，流式布局，flex 布局等技术进⾏布局；同时也会使⽤⼀些成熟的 UI 框架，完成快速搭建。但对 web 应⽤⽽⾔，仅仅完成基本的布局还不够，前端程序员还需要顾及移动端和 PC 端等不同设备，不同浏览器下的布局和适配⽅式。到底是实现⼀处编写，多端适配，还是根据不同的设备定制不同的布局⽅案，这都是在编码之前要⾸先考虑的。

除此之外，我们还需要让我们创造的⼈“有⾎有⾁”。⼩家碧⽟还是⼤家闺秀，都需要造物主去打扮。这就是“样式”。⻚⾯⻛格和整体设计现在是产品/设计师的⼯作，作为前端程序员，同样也是解决实现的问题。这时候我们⼀般会⽤表现标准语⾔ CSS 对⻚⾯进⾏样式修饰。CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制，并且能⽀持⼏乎所有的字体字号⾊彩样式。也可以完成性能相对较⾼的动画效果。不过在编码的同时，兼容性和性能也是前端程序员需要考虑的。

最后，我们需要给造物注⼊灵魂。⼀颦⼀笑，⼀喜⼀嗔，举⼿投⾜都是对外界的“反馈”。我们通常称之为“⾏为”。在 web 前端中，⾏为⼤概分为两种：服务器参与的响应和前端⾃身的响应。

⼀般情况下，我们的⻚⾯资源（⽂字，图⽚等）是来⾃⼀个或多个后端服务器。⽤户通过⽹站地址可以请求到⻚⾯资源，通常当刷新⻚⾯，点击链接，提交表单时，浏览器会向服务器发送新的请求，跳转到⼀个新的地址，获得服务器返回的新资源。这样就可以做出相应的反馈。同时，程序员也可以借助Ajax，将从⽤户收集到的动作或数据发送给后端服务器，并且根据响应数据，使⽤ JavaScript 动态的改变⻚⾯的结构和样式，减少⻚⾯跳转；或借助浏览器本地存储，HTTP/DNS缓存，内存缓存，减少⽹络请求，提升⽤户体验。

除此之外，在⽤户从停留在当前⻚⾯，到发送请求的这段时间⾥，前端同样也可以控制⻚⾯内容。从⿏标点击、键盘输⼊、滚动⻚⾯的动画效果，到诸如计算器，跳格⼦等应⽤，都可以借助 JavaScript 改变⻚⾯的⾏为和样式，不需要后端服务器参与。

出自：我的老师：@whitsats

【web前端开发】什么是前端？相关推荐

web后端开发需要会前端吗_前端和后端Web开发之间的区别
web后端开发需要会前端吗 In this post I want to help you conceptually make the move from frontend to backend, i ...
什么是HTML5前端开发？HTML5前端要学哪些技术？
什么是HTML5前端开发?HTML5前端要学哪些技术? 什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的.程序员指从事程 ...
eclipese web前端开发教学_Web前端零基础好学吗？新手该怎么学？
众所周知,Web前端是现在很火的行业,找工作的人也多,招聘的公司也多,工作环境也好,各招聘公司给的工资也高,这么火热的行业还是供不应求. Web前端市场的供不应求直接导致前端工程师的待遇提高,另外一方 ...
Web前端开发的十佳前端框架优缺点
用户体验是网站.Web应用程序最重要的部分,再强大的特性和功能,如果没有良好的用户体验,那也只能是个摆设.这需要使用前端框架来简化交互式.以用户为中心的网站的开发.凭借我们作为 Web 开发公司的经验 ...
web前端开发流程，前端微信支付流程
第一个阶段,开发环境和工具准备浏览器 (Google,FireFox,-) 下载,安装前端开发工具vscode, 下载.安装 node.npm.webpack.webpack-cli.cnpm,配置 ...
web前端开发发展前景，前端校招面试题及解析大全
腾讯一面自我介绍简单聊了一下教育背景,问了一下专业学过的课程为什么选择前端开发深挖了一下前端开发的项目经历算法题:给一篇文章,统计文章中出现次数最多的单词,给出单词和次数(注意可能存在多个 ...
web前端开发发展前景，前端开发学习方法
背景我18年本科毕业,年前已有换工作想法,一直没有付诸行动,疫情爆发后回到老家,年后开始找工作,对于自己水平不是很清楚,之前找工作一直都挺顺利的.大学毕业没有留在实习单位继续做前端开发,那时候三大框 ...
乾坤微前端_拥抱云时代的前端开发架构——微前端
微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员.团队的增加,从一个普通应用演变成一个巨石应用(Frontend Monolith),随之而来的应用不可维护的问题.这类问题在企业级 ...
五分钟带你了解前端开发，以及前端开发的发展机会
前端开发前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互 .它从网页制作 ...
哪些人适合做前端开发？HTML5前端发展前景怎么样？
当我们决定学习一个技能的时候,首先会考虑到零基础学不学的会,这个技术的前景怎么样,赚钱多吗?别着急,今天就来为你揭开HTML5前端的神秘面纱,认真看完. 前端开发是什么? 1.首先,了解前端开发 We ...

【web前端开发】什么是前端？

文章目录

浅谈前端

初识

造物

【web前端开发】什么是前端？相关推荐

最新文章

热门文章