Web开拓已经有近30年的历史，在Web发展的早期，并没有前真个观点，最初所有的开拓事情都是由后端开拓工程师完成的，随着业务越来越繁芜，事情量逐渐增大，项目中可视化部分以及一些交互功能的开拓逐渐从业务等分离出来，形成了前端开拓。
2000 年旁边，雅虎等公司开始设立前端工程师岗位，从 2005 年开始，正式的前端工程师角色被业界认可。到 2010 年，互联网开始全面进入移动时期，前端开拓事情变得越来越主要，前端领域的技能发展也越来越快，各种新思想、设计模式、工具、平台飞速发展，对前端工程师的技能哀求越来越高。此时海内各大互联网厂商也纷纭设立前端开拓工程师岗位。
那么什么是前端工程师呢？这里我们可以把“前端”和“端”拆分开来理解。“前端”比较随意马虎理解，相对付“后端”这个观点，而“端”的含义就不一样了，如下图所示：
广义上来说，凡是卖力布局、排版、在客户端展示页面的工程师都可以称为前端工程师。不同的客户端利用不同的措辞，包括：
由于浏览器是最古老、最著名的终端，因此利用JavaScript、HTML、CSS措辞，卖力在浏览器端显示页面的工程师被称为前端工程师。
2.入门阶段的《Web根本》2.1 Web三层构造
在 Web 1.0 信息共享时期，Web 发展的第一个阶段是静态技能阶段。在这个阶段，HTML 措辞是 Web 向用户展示信息的最有效载体。此时常见的编写办法是将 HTML、CSS 和 JavaScript 代码稠浊到一个单独的文件中，命名为 index.html，并称之为网页。时至今日，仍旧有很多网页将 HTML、CSS 和 JavaScript 代码写在一个文件中，但随着网页内容越来越繁芜，将不同的代码写在一个文件中会使文件内容越来越臃肿，难以掩护，因此就涌现了 Web 三层构造的观点。Web 的三层构造如下图所示：
在同一个网页中，通过分离不同的代码层，可以让公共的代码模块在不同的项目中共享，减少代码冗余。当然，如何更合理地拆分不同的代码层，须要根据不同的项目详细剖析，探索代码拆分的最佳方案，这里就不再赘述了。
2.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 工具可以获取 document 中的节点，也可以对节点进行操作。下面是一个大略的 document 工具树：
可以通过属性id获取a标签文档节点工具，如下
// 通过id为aLink属性获取标签a的文档工具 const eleDomObj = document.getElementById('aLink')
您也可以直接向 a 标签添加属性，如下所示：
const eleDomObj = document.getElementById('aLink') eleDomObj.setAttribute('href', '')
2.3 前端根本举动步伐体系
上图紧张展现了前端根本体系中前端开拓职员须要熟习的根本内容，前端根本体系中干系内容的实际细分或者扩充远不止上图中的总结。
3.“单页面运用、微前端”进阶阶段
3.1 AJAX 和单页运用程序
在Web 1.0阶段，做事器会返回全体页面或者文档，前端页面如果想获取后台数据，就必须刷新全体页面，用户体验非常不好。进入Web 2.0之后，动态网页逐渐发展起来，个中最主要的代表技能便是AJAX。AJAX许可客户真个JavaScript脚本为本地页面内容供应要求做事，然后动态刷新部分页面内容而不须要返回做事器，也便是更新浏览器中的文档工具，即DOM。在Web 2.0阶段，网站与用户的交互得到加强，网站内容基于用户供应，网站的很多功能也是由用户构建的，实现了网站与用户之间的双向交互沟通。
2004 年和 2005 年，Google 发布了两款重量级的 Web 产品：Gmail 和 Google Map，这两款产品都大量利用了 AJAX 技能。随着 AJAX 技能的盛行，越来越多的网站利用 AJAX 来动态获取数据，这使得动态网页内容成为可能。加之当时 CDN 开始大量用于静态资源存储，于是涌现了 SPA（Single Page Application，单页运用）。其大致模型如下图所示：
如上图所示，网页初始化时会加载相应的 HTML、JavaScript 和 CSS。页面一旦加载完成，SPA 就不会由于用户操作而重新加载或跳转页面，而是利用路由机制来实现 HTML 内容的变换以及 UI 与用户的交互，避免重新加载页面。SPA 的上风有以下几点：
单页运用的开拓模式实现了前后端分离，使得全体业务系统架构清晰，可以单独开拓和测试。但是当后端单页运用有多个不同的子模块，且子模块之间又有相对独立完全的功能体系时，一旦子功能模块增多，全体单页运用就会变得非常弘大臃肿，开拓和掩护本钱就会大大增加。如果在这种场景下依然采取SPA模式，项目后期的掩护将变得弗成思议。这时候，微前真个观点就应运而生了。
3.2 微做事和微前端
说到微前端，就少不了微做事。后真个同学该当对微做事非常熟习。微做事许可通过松耦合的代码库来扩展后端架构。每个代码库卖力自己的业务逻辑并暴露一个 API。每个 API 都可以独立支配，由不同的团队拥有和掩护。好处有：
微前真个思想是将微做事架构引入前端，紧张运用于浏览器端。其核心是将 Web 运用拆开，终极将不同的子系统或子模块聚合成一个完全的运用。早期也可以利用 iframe 嵌套的办法将多个独立的功能模块整合到一个运用中，现在朝客服领域一站式事情台的架构图所示：
如上图，赤色部分是通过iframe嵌入的办法集成到事情台中的，通过iframe嵌入的办法，一站式事情台碰着了很多问题，紧张问题如下：
基于以上问题，目前正在利用微前真个设计理念对客服领域一站式事情台架构进行重构和优化，如下图所示：
通过上图，将各个单独的功能模块拆分身分歧的子运用。例如工单事情台为子运用，热线做事为子运用。不同子运用独立运行，互不影响。子运用共享主运用的资源，无需每次重新加载静态资源。各个子运用可以独立发布支配。
4. 高等阶段：“向全栈转型”
在 Web 技能兴起的很长一段韶光里，前端开拓者如果想开拓做事端代码，就必须学习 JAVA 或者 PHP 等后端措辞。自 2009 年 Node.js 兴起以来，JavaScript 开始可以在做事端运行。很多以前须要后端工程师利用传统后端措辞才能完成的事情，在 Node.js 打造的运行环境中，前端工程师利用 JavaScript 理论上都可以完成。此时全栈开拓者也逐渐得到了业界的认可。自 Node.js 兴起以来，凭借其高性能、易支配等上风，在前端领域呈现出了很多明星项目，比如 BFF、前端工程化的实践等。
4.1 什么是 BFF
BFF，全称 Backend For Frontend，意思是做事端在设计 API 的时候会考虑前真个利用，直接在做事端处理业务逻辑，又称为用户体验适配器。BFF 只是逻辑上的分层，并不是一项技能。BFF 的涌现为前端运用调用业务做事供应了一个聚合点，屏蔽了繁芜的做事调用链，让前端可以专注于须要的数据，而不用关注供应这些数据的底层做事。
设想如了局景：一个页面须要向做事 A、做事 B、做事 C 发送要求，不同的做事返回值用于渲染页面中不同的组件模块，也便是一个页面有很多要求，此时每次访问该页面都须要发送 3 个要求。同时为了知足 Android、iOS、Web 不同的需求，须要针对不同平台编写不同的 API 接口，每当值发生变革时，我们须要在每个客户端（Android、iOS、Web）上单独实现，这个本钱显然是比较高的。当我们有了 BFF 层，就不须要考虑系统后真个迁移了，后真个变革在 BFF 层做相应的修正即可，如下：
如上图所示，随着BFF层的加入，原来每次访问三个要求缩减为一个要求，BFF层会提前把多个做事的数据聚合起来，返回给前端。
注：以上只是大略举例解释BFF分层的好处，实际繁芜的业务场景会让BFF的设计变得繁芜很多。
4.2 前端工程化实践
前端工程化紧张基于 Node.js 开拓，适宜开拓各种前端工具，例如包管理工具 npm 集成了各种工具模块，包括各种前端预编译工具、构建工具、脚手架、命令行工具等，其紧张运用处景如下图所示：
5. 事前事后相互鼓励——总结
以上只因此多年前端开拓履历的角度，讲解了后端同学须要理解的干系内容，实际前端内容远不止文中先容的这些，例如移动端、布局排版、Hybrid、小程序、PWA与Serverless等等都属于前端技能领域，路漫漫其修远兮，吾将高下而求索。希望本文能给后端开拓同学带来一些帮助和启示，也能让前端开拓同学对前端知识有更深入的理解。
参考文件：
文：毛元军
关注德物科技，每周一、三、五18:30更新技能资讯
如果以为文章对你有帮助的话，欢迎评论、转发、点赞哦~
