《重学前端》学习笔记Day134

前端架构：前端架构有哪些核心问题？

为什么桌面软件开发需要架构师和架构设计呢？因为桌面开发啊具有高度的复杂性，如果没有架构，就没法分解成相互耦合低的模块来分工。
简单来说，架构是为了分工而存在的。但是到了前端领域，这个问题是否还存在呢？但是不存在。
前端不存在分工问题，但是在多人协作的同时，仍要解决质量和效率问题，这就需要组件化了。除此之外还有前端特有的兼容性问题，也是需要架构去解决的。

组件化

组件化是非常简单的概念，前端最主要的开发工作是UI开发，而把UI上的各种元素分解成组件，规定组件的标准，实现组件运行的环境就是组件化了。
现行的组件化方案：

• Web Component
• Vue
• React
• Angular
• 自研

Web Component是W3C推行的规范，理论上是未来的选项。但这份标准现状堪忧，Shadow CSS的设计比较复杂，一般的前端掌握起来都比较困难。
此外，CSS也比较难以应用，需要依靠CSS Houdini。目前，还没有前端团队真正使用Web Component组件化方案。当然，它的优势也非常明显，不需要任何额外的运行时支持，就能在现代浏览器环境运行，也可以跟HTML无缝结合。
Vue是目前最受欢迎的框架（从github star 数），它有两个主要特点，一个是比较符合原本的JavaScript/CSS/HTML 书写习惯；另一个是它绑定了MVVM模式，直接确定了UI框架，通过DSL的支持，数据交互非常简洁。
React利用JSX模式，把HTML、CSS和JavaScript都放进了js文件中，对于不喜欢HTML和CSS的前端工程师来说，时很理想的。它还可以迁移到React Native，直接编写简单的客户端应用。

兼容性和适配性

前端开发特有的问题就是兼容性，到了移动时代，需要面对不同的机型，我们又需要解决适配性问题。
兼容性问题到2011年左右都是前端的主旋律，但在这之后，随着现代浏览器的普及，兼容性问题逐渐减少，所以就不多谈兼容性了。
适配问题主要适配的是屏幕的三要素：
单位英寸像素数(PPI)：现实世界一英寸内像素数，决定了屏幕的显示质量。
设配像素比率(DPR)：物理像素和逻辑像素的对应关系
分辨率(Resolution)：屏幕区域的宽高所占像素数。
当前环境下，分辨率适配都可以使用vw单位解决，DPR适配则需要用到CSS的viewport规则来控制缩放比例解决，而PPI主要影响的是文字，可以采用media规则来适配。

单页应用

前文已经说过前端解耦问题不大，因为页面是天然解耦。但是浏览器加载HTML时有时候会出现白屏过程的，对追求极致体验的团队来说，希望能够进一步提升体验，于是就有了“单页面（SPA）”的概念。
单页面应用是把多个页面的内容实现在同一实际页面内的技术，因为失去了页面的天然解耦，所以就要解决耦合问题。也就是说，我们要在一个“物理页面内”，通过架构设计来实现若干个“逻辑页面”。
逻辑页面应该做到独立开发和独立发布，一种思路是，每个逻辑页面一个JS，用一个SPA框架加载js文件。
从交互的角度，这并不困难，但是这还有隐形需求：保持前进后退历史。
一般来说，前进后退历史使用URL的Hash部分来控制，但是onhashchange事件并没有提供前进或后退信息，目前还没有完美的解决方案，只能牺牲一部分体验。实现单页应用的逻辑页面发布需要改造发布系统，在工程上，这也是比较大的挑战。

扩展前端新边界

除了解决现实问题，前端架构的职责还包括扩展前端的边界：
Native 开发任务：如客户端与前端结合的方案Weex和Rect Native；
如前端和图形结合的方案 GCanvas;
如前端的3D框架Three.js;
这些都是试图用架构的手段赋予前端新的能力的尝试。

此文章为8月Day6学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪