关于前端:写给后端开发工程师的H5前端开发知识

一、引言

web 倒退到目前为止曾经有将近 30 年的历史，在 web 衰亡的晚期，并没有前端这个概念。最后所有的开发工作都是由后端开发工程师实现，随着业务越来越简单，工作量逐步的减少，我的项目中的可视化局部和一部分交互性能的开发工作逐步从业务中剥离进去，造成了前端开发。大概在 2000 年左右，雅虎等公司开始设立前端工程师职位，从 2005 年开始，正式的前端工程师角色被行业所认可，到了 2010 年，互联网开始全面进入挪动时代，前端开发的工作越来越重要，前端畛域的技术倒退也越来越快，各种新的思维、设计模式、工具和平台都疾速倒退，对前端工程师的技能要求也越来越高。此时国内各大互联网厂商也都设立了前端开发工程师的岗位。

那么 什么是前端工程师？ 这里能够拆分“前”和“端”来了解，“前”很好了解，绝对于“后”的概念，而“端”则有不同的含意，如下图所示：

狭义上讲，所有负责在端布局、排版、展现页面的工程师，都能够称为前端工程师。不同的端应用不同的语言，其中：

• 在浏览器端，应用 JavaScript、HTML 和 CSS 语言开发
• 在 IOS 端，应用 Swift 或 Objective- C 语言开发
• 在 Android 端，应用 Java 语言开发
• 在微信端，应用小程序开发

因为 浏览器是历史最长远、最闻名的端，所以将应用 JavaScript 、HTML 和 CSS 语言，在浏览器端负责展现页面的工程师，称为前端工程师。

二、入门阶段 –web 根底

1、web 三层构造

在 web 1.0 信息共享时代，web 倒退的第一个阶段就是动态技术阶段，在这个阶段，HTML 语言就是 Web 向用户展现信息的最无效载体。此时常见的写法就是将 HTML、CSS 和 JavaScript 代码掺杂到一个独自的文件中，命名为 index.html，并称其为网页。明天依然有很多网页将 HTML、CSS 和 JavaScript 代码写在一个文件外面，然而当网页内容逐步简单之后，不同的代码写在一个文件外面会使文件内容变得越来越臃肿，难以保护，于是呈现了 web 三层构造的概念。web 的三层构造如下图所示：

• 结构层： 即 HTML 标签，标签相互组合，构建了网页的根本构造；
• 体现层： 即 CSS，为标签增加款式，比方标签的色彩、大小、地位等等；
• 行为层： 即 JavaScript，用来实现网页上的特效成果，能够在 script 标签中动静批改页面。

在同一个网页中，对不同层的代码进行拆散，能够在不同的我的项目中共用通用的代码模块，缩小代码的冗余。当然如何更加正当的对不同层的代码进行拆分，须要依据不同的我的项目具体分析并探寻代码拆分的最佳计划，这里就不过多的去论述了。

2、DOM 与 BOM

在前端畛域 DOM 和 BOM 这两者的概念十分重要。DOM 是文档对象模型，即把文档当做一个对象来对待，次要解决网页内容的办法和接口；BOM 是浏览器对象模型，即把浏览器当做一个对象来对待，与浏览器交互的办法和接口。两者的关系如下：

BOM 的外围对象是 Window，比方拜访屏幕物理分辨率的宽和高，如下：

// 屏幕物理分辨率的高 
window.screen.height 
// 屏幕物理分辨率的宽 
window.screen.width 
// 获取以后残缺的 url 链接 
window.location.href 

DOM 的基本对象是 document，这个对象是 window 对象的属性，即 window.document，能够通过 document 对象获取文档中的节点同时也能操作节点，如下是一棵简略的文档对象树：

能够通过属性 id 获取 a 标签文档节点对象，如下

// 通过 id 为 aLink 属性获取标签 a 的文档对象 
const eleDomObj = document.getElementById('aLink')  

也能够间接给 a 标签增加属性，如下：

const eleDomObj = document.getElementById('aLink')  
eleDomObj.setAttribute('href', '******') 

3、前端根底体系

上图次要展现做为前端开发在前端的根底体系外面须要相熟的根底内容，理论前端根底体系相干内容的细分或者扩大远比上图汇总的多。

三、进阶阶段 – 单页利用与微前端

1、AJAX 与单页利用

在 Web1.0 阶段，服务器会返回整个页面或者文档，前端页面想要获取后盾数据须要刷新整个页面，这是很蹩脚的用户体验。进入 Web2.0 之后，动静网页逐渐倒退，其中最次要的代表性技术是 AJAX，AJAX 容许客户端的 JavaScript 脚本为部分页面内容提供申请服务，而后能够在无需回到服务器的状况下动静刷新局部页面内容，也就是更新浏览器中的 document 对象，即 DOM。在 Web2.0 阶段增强了网站与用户之间的互动，网站内容基于用户提供，网站的诸多性能也由用户参加建设，实现了网站与用户的双向互动交换。

在 2004 年和 2005 年，Google 别离公布了两款重量级的 Web 产品：Gmail 和 Google Map，都大量应用了 AJAX 技术。随着 AJAX 技术的风行，越来越多的网站应用 AJAX 动静获取数据，这使得动静网页内容变成可能，加上过后 CDN 开始大量用于动态资源存储，于是呈现了SPA（Single Page Application 单页面利用），大抵的模式如下图所示：

如上图所示，在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS，一旦页面加载实现，SPA 不会因为用户的操作而进行页面的从新加载或跳转，取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，防止页面的从新加载。这样 SPA 存在的长处如下：

• 前后端拆散 开发 ： 前后端职责拆散，架构清晰，前端进行交互逻辑，后端负责数据处理，单页 Web 利用能够和 RESTful 规约一起应用，通过 REST API 提供接口数据，并应用 AJAX 异步获取数据；
• 良好的交互 体验 ： 能晋升页面的切换体验，用户在拜访利用页面不会频繁的去切换浏览页面，从而防止了不必要的跳转和反复渲染。

单页利用的开发模式实现了前后端的拆散，使得整个业务零碎架构变得清晰，能够独自开发和测试。然而当中后盾单页利用有多个不同的子模块，并且子模块之间有绝对独立残缺的性能体系时，一旦子功能模块越来越多，那么整个单页利用将变得十分宏大且臃肿，开发和保护老本将大大提高，如果在这种场景下，还在用 SPA 的模式开发，那么我的项目前期的保护将变得不可设想，这个时候微前端的概念应运而生。

2、微服务与微前端

提到微前端就离不开微服务，后端同学对于微服务应该十分的相熟，微服务容许后端体系结构通过涣散耦合的代码库进行扩大，每个代码库负责本人的业务逻辑，并公开一个 API，每个 API 均可独立部署，并且各自在不同的团队领有和保护。其带来的益处是：

• 将一个宏大的单体拆解成多个子服务，大大降低了开发复杂度；
• 工作边界划分明确，每个子服务之间独自开发，不同服务之间可并行由不同的开发人员开发，进步开发效率；
• 更细粒度的增强了模块化过程，可维护性和可读性更高；
• 每个微服务可独立部署公布，使得自动化 CI(继续集成)/CD(继续交付)成为可能。

微前端的思路是把微服务的架构引入到前端，次要利用于浏览器端 ， 其外围是对 web 利用进行拆解，最初将不同子系统或者子模块聚合成一个残缺的利用。在晚期，也能够应用 iframe 嵌套的形式实现单个利用集成多个独立的功能模块，以目前客服域一站式工作台现有的架构所示：

如上图所示，红色局部是通过 iframe 嵌入的模式集成到工作台外面的。通过 iframe 嵌套的形式，在一站式工作台外面遇到了较多的问题，次要问题如下：

• 坐席辅助创立工单模块，一线客服的切换频率与操作流程都十分快，不同模块通过 postMessage 音讯通信的时候，存在提早的景象，导致工单数据串位；
• 工单详情应用的频率十分高，每次关上都须要从新加载动态资源，渲染效率低下，应用体验比拟差；
• 一线客服个别都会同时关上多个工单详情或者订单详情的 iframe，过多的 iframe 占用浏览器内存比拟大，导致音讯发送卡顿，影响用户首响工夫。

基于下面几个问题，目前使用微前端的设计思维正在重构优化的客服域一站式工作台架构如下图所示：

通过上图 将每个独自的功能模块拆分成不同的子利用 ，如 工单工作台是一个子利用 ， 热线服务是一个子利用，不同的子利用独立运行，互不影响，子利用共享主利用的资源，不须要每次从新加载动态资源，每个子利用都能够独立公布和部署。

四、高阶阶段 – 向全栈转变

在 web 技术衰亡的很长一段时间里，前端开发工程师想要去开发服务端的代码，就必须去学习 JAVA 或者 PHP 等后端语言，自从 2009 年，Node.js 衰亡之后，JavaScript 开始有能力运行在服务端，之前须要后端工程师应用传统后端语言实现的很多工作，实践上前端工程师都能够在 Node.js 发明的运行环境中应用 JavaScript 实现，此时全栈开发工程师也逐步被行业所认可。在 Node.js 衰亡至今，凭借其高性能、易部署等特点在前端畛域怀才不遇了很多明星我的项目，比方 BFF 和在前端工程化上的实际。

1、什么是 BFF

BFF，即 Backend For Frontend（服务于前端的后端），也就是服务器设计 API 时会思考前端的应用，并在服务端间接进行业务逻辑的解决，又称为用户体验适配器。BFF 只是一种逻辑分层，而非一种技术 。BFF 的呈现为前端利用 提供了一个对业务服务调用的聚合点，它屏蔽了简单的服务调用链，让前端能够聚焦在所须要的数据上，而不必关注底层提供这些数据的服务。

试想下如下场景： 某个页面须要向服务 A、服务 B 以及服务 C 发送申请，不同的服务返回值用于渲染页面中不同的组件模块，即一个页面存在很多申请的场景。此时，每次拜访该页面都须要发送 3 个申请。同时为了保障 Android，iOS 以及 Web 端的不同需要，须要为不同的平台写不同的 API 接口，而每当值产生一些变动时，咱们须要在每一个客户端（Android，iOS，Web）别离实现一遍，这样的代价显然相当大。而当咱们有了 BFF 这一层时，咱们就不须要思考零碎后端的迁徙，后端产生的变动都能够在 BFF 层做一些对应的批改，具体如下：

如上图所示，退出 BFF 层，本来每次拜访发送 3 个申请，变成了一个申请，BFF 层会提前将多个服务的数据聚合起来，返回给前端。

备注：下面只是通过一个简略例子来论述 BFF 分层带来的益处，理论简单的业务场景对 BFF 的 设计 会简单很多。

2、前端工程实际

前端工程化次要基于 Node.js 开发，Node.js 适宜用于开发前端方向的各种工具。如包管理工具 npm 上集成了各种工具模块，包含各种前端预编译工具、构建工具、脚手架以及命令行工具等。其次要的利用场景如下图所示：

五、前后共勉 – 总结

• 前端不要局限于 html、css 和 javascript，须要理解服务器和数据库相干的常识，这样和后端评审技术计划的时候，能力提出一些正当的倡议；
• 前端须要理解数据，把控数据之外的业务逻辑，而不仅仅只是聚焦于页面的展现；
• 后端须要理解前端相干的常识，思考页面渲染须要什么样的数据结构，这样在设计 REST API 的时候，能力输入正当的数据结构给到前端页面渲染；
• 后端须要具备肯定的前端技能，在前端实现组件化输入到物料库之后，后端能基于物料库的业务组件实现页面的搭建，晋升研发效率。

以上只是站在多年前端开发的视角，论述了后端同学须要理解的相干内容，理论前端内容远比文章形容的多，比方挪动端、布局排版、Hybrid、小程序、PWA 以及 Serverless 等等都属于前端技术畛域，路漫漫其修远兮，吾将上下而求索，心愿本文能给后端开发同学带来一些帮忙和启发，也能让前端开发同学对前端常识有更好的意识。

六、参考文档

• 在我的项目中后端开发所须要把握的前端常识
• 淘宝玉伯引发 Web 前后端研发模式探讨
• WEB 倒退简史，Web1.0 到 Web3.0 的倒退历程
• 「科普」前端工程师简史
• JavaScript 的 Dom 和 Bom
• 微前端架构初探以及我的前端技术盘点
• 狼叔：Node 全栈为前端带来更多可能

文 /Bill

关注得物技术，做最潮技术人！