[小白学前端01] 必备知识

1. 前端工程师是做什么的

• 其实不管是前端工程师还是后台工程师要做的工作无非就是软件开发
• 软件主要分两种架构 C/S 架构，和 B/S 架构
• 我们主要从事的是 B/S 架构的软件开发

2. 软件的架构

C/S 架构：客户端 / 服务器架构： 首先，一般我们使用的软件都是 C/S 架构，比如：QQ、微信、office等，这里面的C 表示客户端，用户通过软件的客户端来使用软件，S 表示服务器，服务器负责处理软件的业务逻辑，这类软件有如下特点：① 软件使用前必须安装；② 软件更新时，服务器与客户端需要同时更新；③ C/S 架构的软件不能跨平台使用，想要跨平台必须在每个平台开发对应平台的软件；④ C/S 架构的软件客户端和服务器通信采用的是自由协议，相对来说比较安全

B/S 架构：浏览器 / 服务器架构： 首先，我们需要明确 B/S 架构本质也是 C/S 架构的软件，只不过 B/S 架构的软件，使用浏览器作为软件的客户端，B 表示浏览器，用户通过浏览器访问网页的形式来使用软件，S 依然表示服务器 ，用来处理软件的业务逻辑，比如：京东，淘宝，天猫，微博，知乎等均为 B/S 架构的软件，这类软件有如下特点：① 软件使用前不需要安装，直接使用浏览访问对应的网址即可；② 软件更新时，客户端不需要更新，只需要更新服务器；③ 软件可以跨平台使用，只要系统中有浏览器就可以使用，开发成本相对 C/S 架构软件较低；④ B/S 架构的软件浏览器和服务器之间的通信采用的是通用的 http 协议，安全性相对较低

前端开发只要是制作 B/S 架构的软件

3. 软件开发的流程

网页设计师根据需求设计网页，得到网页的 PSD 文件，之后由前端工程师将设计图，通过前端技术制作成网页，此时得到的是一个静态页面，里面的内容都是固定的，无法修改的，故此时需要后端工程师介入，为网站构建数据库与后台的业务逻辑，此时即可将静态页面转化为动态页面，所以犹豫前端工程师正好介于网页设计师与后端工程师之间，故就需要前端工程师，对设计的知识要有一定的了解，同样对后台的知识也要有一定基础，所以简单总结一下前端工程师的工作：

首先我们需要将设计师的设计转换为代码，然后交给后台工程师，再由他们去编写服务器代码；
同时我们需要和设计师沟通，需要和产品经理沟通，需要和后台工程师沟通；
最后我们编写的网页会在整个项目的最前端由用户查看

其中在上述流程中，我们前端工程师的工作时最轻松的，因为我们只需要写出静态页面，剩下的工作给后台工程师一丢，OK，前端的任务结束，但是我们思考一下，这种开发模式有什么问题，在你制作好的页面交到后台工程师手中是，他们会怎么方便怎么来，不会管你前端页面如何，他会按照自己的代码风格与代码习惯，去编写他后台的代码，这样有些情况下，势必或多或少会影响到你制作好的页面，无论是页面结构还是页面的功能，而在大众什么日益提高的现在，我们越来越注重用户体验，但刚刚说过，在整个项目中前端工程师编写的网页会在整个项目的最前端由用户查看，故后台代码无论你写成什么样，用户都是看不到的，所以用户一眼看到的只有前端页面，为了解决这样的问题，我们就产生的一种新的开发模式，就是前端编写完页面后，不在交给后台工程师，而由前端向后台工程师提需求，我要实现什么什么功能，你来给我提供接口，然后我在我的前端页面中调用你的接口，这样整个页面可以完全控制在前端工程师手中，以给用户最佳的用户体验，

除此之外还有一种比较常见的开发模式，在前端技术体系中有一种语言是 JavaScript 然后有一个基于这个语言的框架叫 node.js 这个框架是用来编写服务器的一个框架，而 js 是前端工程师相对熟悉的一种语言，故此时就不在需要后台工程师来为我们编写服务器，也就是说前端工程师自己编写完页面之后，直接去构建服务器，当然这种情况对前端工程师来说要求是最高的，不光要编写前端页面，还要构建服务器，当然这时也就不能成为前端工程师了，应该称为全栈工程师了

4. 前端技术好学嘛

前端技术简单好学，其实这是我们的一个误区，首先，可以肯定的是前端技术不想 Java、Python 这些编程语言那样有较高的门槛，它入门很容易，但是，Java 这种东西，一旦入门后面将会是一马平川，而刚刚也说过了，对于前端工程师，他们需要和设计师还有后台工程师进行衔接，这两方面技术我们都需要懂一些，再来，前端技术虽然入门简单，但是深入起来也不是谁都能玩好的，所以学习前端技术必须要努力、努力、在努力

5. 前端主要学什么

根据W3C标准，一个网页主要有但部分组成：结构、表现还有行为，分别对应三种编程语言：HTML、CSS还有JavaScript，结构图如下：

W3C标准

结构

表现

行为

HTML

CSS

JavaScript

• 结构：HTML用于描述页面的结构，拿人来说，整个人的骨架好比网站的结构
• 表现：CSS用于控制页面中元素的样式，对于人来说，这个人长多高，男的女的，长头发短头发好比网站的表现形式
• 行为：JavaScript用于响应用户的操作，也就是人的各种行为举止，对于计算机来说就是人机之间交互行为

而前端工程师与传统的网页工程师相比较，最重要的区别就在JavaScript上，故整个前端体系中无论是学习的重点，还是以后找工作过程中面试的重点都在JavaScript上

6. 学习前端用到的工具

• 浏览器：Chrome、Firefox、Edge、IE等主流浏览器
• 编辑器：记事本、NotePad++、Sublime（三者任选其一）
• 开发工具：Hbuilder、VS Code、WebStorm、Dreamweaver（任选其一，不推荐使用Dreamweaver）
• 图片工具：PhotoShop
• W3C离线手册