前端体系大局观(Java开发了解专用）

前端体系大局观(Java开发了解专用） 前端三要素

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

表现层（CSS）

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

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

什么是 CSS 前处理器

CSS 前处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成档案，然后开发者就只要使用这种语言进行 CSS 的编码工作。 转化成通俗易懂的话来说就是"用一种专门的编程，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 档案，以供项目使用"。

常用的 CSS 前处理器有哪些

• SASS：基于Ruby，通过服务端处理，功能强大。 解析效率高。 需要学习Ruby语言，上手难度高于LESS。
• LESS：基干 NodeJS，通过客户端处理，使用简单。
  功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。

行为层（Javascript）

Javascript 一门弱型别指令码语言，其源代码在发往客户端执行之前不需经过编译，而是将文字格式的字符代码传送给浏览器由浏览器解释执行。

Native 原生 JS 开发

原生 JS 开发，也就是让我们按照【ECMAscript】标准的开发方式，简称是 ES，特点是所有浏览器都支持。

区别就是逐步增加新特性。

Typescript 微软的标准

Typescript 是一种由微软开发的自由和开源的程式语言。 它是Javascript 的一个超集，而且本质上向这个语言添加了可选的静态型别和基于类的面向对象编程。 由安德斯海尔斯伯格（C#、Delphi、Typescript 之父;.NET 创立者）主导。

该语言的特点就是除了具备ES 的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持 Typescript 语法，需要编译后（编译成 JS）才能被浏览器正确执行。

Javascript 框架

• jQuery:大家熟知的 Javascript 框架，优点是简化了 DOM *** 作，缺点是 DOM *** 作太频繁，影响前端效能：在前端眼里使用它仅仅是为了兼容IE6、7、8：
• Angular: Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念，与微软合作，采用 Typescript 语法开发; 对后台程序员友好，对前端程序员不太友好：最大的缺点是版本迭代不合理（如：1代 ->2代，除了名字，基本就是两个东西; 截止发布博客时已推出了 Angular6）
• React:Facebook 出品，一款高效能的 JS 前端框架：特点是提出了新概念 【虚拟 DOM】用于减少真实 DOM *** 作，在内存中模拟 DOM *** 作，有效的提升了前端渲染效率; 缺点是使用复杂，因为需要额外学习一门【JSX】语言;
• Vue:一款渐进式Javascript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。 其特点是综合了 Angular（模块化） 和 React （虚拟 DOM）的优点;
• Axios:前端通讯框架; 因为Vue的边界很明确，就是为了处理DOM，所以并不具备通讯能力，此时就需要额外使用一个通讯框架与服务器互动; 当然也可以直接选择使用 jQuery 提供的AJAX通信功能

UI框架

先来说下 UI，这俩字母是 User Interface 的缩写，一般翻译成“用户界面”。UI 最主要的功能就是建立用户和系统后台之间的联系，系统后台通过 UI 把数据转换成可视化的内容展示给用户，同时用户也要通过 UI 把 *** 作指令（包括数据）传给系统后台。

对 UI 不太熟悉的同学一听到这个概念，可能会觉得它的作用就是怎么把一个产品做的漂亮，所以 UI 设计师经常被人叫成美工。而事实上 UI 应该是负责“交互”和“**视觉”**这两方面的工作，这两部分内容构成了产品的用户体验。

• Ant-Design:阿里巴巴出品，基于Reeact的UI框架
• ElementUl：饿了么出品，基于 Vue 的 Ul 框架iviewice
• Bootstrap:Twitter 推出的一个用于前端开发的开源工具包。
• AmazeUl:又叫"妹子 UI"，一款 HTML5 跨屏前端框架

Javascript 构建工具

• Babel:JS 编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译 Typescript
• WebPack:模块打包器，主要作用是打包、压缩、合并及按序加载

三端统一

目前主流的客户端（前端）主要包含 PC 浏览器以及移动应用 APP。移动应用 APP 可以通过原生页面、或内置的 WebView 等插件渲染 H5 页面向用户展示 UI 信息。

混合开发（前后端未分离）

主要目的是实现一套代码三端统一（PC、：.apk、iOs：ipa）并能够呼叫到装置底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

• 云打包：HBuild ->HBuildX，DCloud 出品; API Cloud
• 本地打包：Cordova（前身是 PhoneGap）

互联网系统架构

上图，是一个典型的互联网分层架构：
（1）业务站点层：web-server；
（2）业务服务层：biz-service；
（3）基础数据服务层：data-service；
（4）数据存储层：db+cache；

（1）端：是PC，Mobile，APP；
（2）站点应用层：是PC站，M站，APP站；
（3）服务层：通用的业务服务，以及基础数据服务；

上述分层架构，可能存在什么问题呢？

PC/H5/APP的web-server层大部分业务是相同的，只有少数的逻辑/展现/交互不一样：

（1）一旦一个服务RPC接口有稍许变化，所有web-server系统都需要升级修改；

（2）web-server之间存在大量代码拷贝；

（3）一旦拷贝代码，出现一个bug，多个子系统都需要升级修改；

增加一层NodeJS（前后端分离）

引入 NodeJS 层作为服务桥接层，NodeJS 层由前端工程师负责搭建完成。通过 NodeJS 服务器在服务器端运行 JS 脚本，可以让前端人员快速入门搭建自己的服务器。引入 NodeJS,可以预先在服务端的内网环境完成大量的前端逻辑计算和页面渲染工作，提升前端的访问性能。

通过前后端分离分层抽象：
（1）站点展示层：node.js，负责数据的展现与交互，由前端维护；
（2）站点数据层：web-server，负责业务逻辑与json数据接口的提供，由Java工程师维护；

Backend For Frontend（服务于前端的后端）

NodeJS作为前端人员开发需要掌握的后端技术

我们可以使用一个BFF层提前将页面渲染好，发送给浏览器，那么BFF层可以提前将多个服务的数据聚合起来。

增加NodeJS中间层后的前后端职责划分

NodeJS 框架及项目管理工具

既然是后台技术，那肯定也跟java一样，有框架及项目管理工具

• Express：NodeJS 框架
• Koa：Express 简化版
• NPM：项目综合管理工具，类似于 Maven
• YARN：NPM 的替代方案，类似于 Maven 和 Gradle 的关系