文章目录
浅谈前端
初识
前端是什么？⽆论是带团队还是教学⽣时，都有很多的⼈问过我这个问题。
如果你要问的是 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 改变⻚⾯的⾏为和样式，不需要后端服务器参与。
