学习Vue之前-快速了解前端体系和前后端分离的演变史

前端体系

想要成为真正的互联网Java全栈工程师，前端是绕不开的一门必修课。
接下来我们就来认识前端、了解前端、掌握前端，为成为互联网Java全栈工程师而前进。

前端三要素

前端三要素为：

• HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。
• CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
• Javascript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为。

结构层（HTML）比较简单，省略。

表现层（CSS）

CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持。
它的主要缺陷如下：

• 语法不够强大，例如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器。
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

因为这些缺陷导致我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为CSS 预处理器的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。
什么是CSS预处理器？
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。
简单来说就是：用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。
常用的CSS预处理器

• SASS，基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于LESS。
• LESS，基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了，所以后台人员一般建议使用 LESS。
  一些大型的网站每到一些节日的时候都有一套不一样的皮肤。其实是因为他们在后台已经编写好了多套主题，要使用的时候通过LESS一键切换。

行为层（Javascript）

JavaScript 一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
Native原生JS开发
原生JS开发，也就是让我们按照ECMAScript标准的开发方式，简称是 ES，特点是支持所有浏览器。ES 标准已发布如下版本：

• ES3
• ES4（内部，未正式发布）
• ES5（全浏览器支持）
• ES6（常用，当前主流版本，webpack打包成为ES5支持）
• ES7
• ES8
• ES9（草案阶段）

从ES6开始每年发布一个版本，以年份作为名称，区别就是逐步增加新特性。
微软的标准：TypeScript
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格（C#、Delphi、 TypeScript 之父，.NET创立者）主导。

Javascript框架

jQuery

大家最熟知的Javascript库。优点是简化了 DOM 操作，缺点是DOM 操作太频繁，影响前端性能。在前端眼里使用它仅仅是为了兼容 IE6、7、8。

Angular

Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript 语法开发。对后台程序员友好，对前端程序员不太友好。最大的缺点是版本迭代不合理，如：1代 -> 2代，除了名字，基本就是两个东西，已推出了Angular6。

React

Facebook出品，一款高性能的 JS 前端框架。特点是提出了新概念虚拟 DOM