前端架构有哪些核心问题？
极客时间编辑部
讲述：初明明大小：4.92M时长：05:22
如今，前端框架是面向组件的。除此之外，在实际工作中，前端架构师还要面临新的环境与挑战。此前，极客时间专栏《重学前端》的作者 Winter 提炼了前端架构中的核心问题，在此分享给你，希望对你的理论认识与实践有所帮助。
一、组件化
组件化讲起来是个非常简单的概念，前端主要的开发工作是 UI 开发，而把 UI 上的各种元素分解成组件，规定组件的标准，实现组件运行的环境就是组件化了。
具体来说，Web Component 是 W3C 推行的规范，理论上是未来的选项，但实际上这份标准的状态堪忧。Shadow DOM 的设计比较复杂，一般的前端掌握起来都比较困难。不过它的优势也非常明显：不需要任何额外的运行时支持，就能在现代浏览器环境运行，也可以跟 HTML 无缝结合。
Vue 是目前最受欢迎的框架（从 Github star 来看），由华人程序员尤小右开发和维护。它有两个主要特点：一个是比较符合原本的 JS/CSS/HTML 书写习惯；另一个是它绑定了 MVVM 模式，直接确定了 UI 架构，通过 DSL 的支持，数据交互非常简洁。
React 是 Facebook 推行的新一代 Web 框架。它利用 JSX 模式，把 HTML、CSS 和 JS 都放进了 JS 文件中，对于不喜欢 CSS 和 HTML 的前端工程师来说，是很理想的。它还可以迁移到 React Native，直接编写简单的客户端应用。
Angular 是谷歌推出的 Web 框架，它是比较标准的 MVVM 模式。Angular 曾经因为大版本兼容性而饱受诟病，目前它的核心竞争力是与 TypeScript 结合得较好。
上面是 Winter 对几种方案的简单介绍。但是实际上，在做技术选型时的主要依据是团队的现状，开发移动端还是桌面端、是否跟 Native 结合、团队成员的技能分布都是需要考虑的因素，这些框架本身的特点，Winter 认为其仅仅是一种偏好选项，而不是关键因素。
二、兼容性和适配性
前端开发的特有问题就是兼容性，到了移动时代，需要面对不同的机型，又需要解决适配性问题。
兼容性问题到 2011 年左右都是前端的主旋律，但是在之后，随着现代浏览器的逐渐普及，兼容性问题逐渐减小，所以这里就不多谈兼容性问题了。
适配问题主要适配的是屏幕的三个要素：
其一，单位英寸像素数（Pixel Per Inch，PPI）：现实世界的一英寸内像素数，决定了屏幕的显示质量。
其二，设备像素比率（Device Pixel Ratio，DPR）：物理像素与逻辑像素（px）的对应关系。
其三，分辨率（Resolution）：屏幕区域的宽高所占像素数。
在当前环境下，分辨率适配可以使用 vw 单位解决，DPR 适配则需要用到 CSS 的 viewport 规则来控制缩放比例解决，而 PPI 主要影响的是文字，可以采用 media 规则来适配。
三、单页应用
单页应用是把多个页面的内容实现在同一个实际页面内的技术，因为失去了页面的天然解耦，所以就要解决耦合问题。也就是说，前端架构师要在一个“物理页面”内，通过架构设计来实现若干个“逻辑页面”。逻辑页面应该做到独立开发和独立发布，一种思路是，每个逻辑页面一个 JS，用一个 SPA 框架加载 JS 文件。从交互的角度，这并不困难，但是，这里还有一个隐性需求：保持前进后退历史。
一般来说，前进后退历史使用 URL 的 Hash 部分来控制，但是 onhashchange 事件并没有提供前进或者后退信息，目前还没有完美的解决方案，只能牺牲一部分体验。实现单页应用的逻辑页面发布需要改造发布系统，在工程上，这也是一个比较大的挑战。
四、扩展前端新边界
除了解决现实问题，Winter 认为前端架构的职责还包括扩展前端的边界，所以前端架构还包含了很多 Native 开发任务：如客户端和前端结合的方案 Weex 和 React Native、前端和图形学结合的方案 GCanvas、前端的 3D 框架 Three.js，这些都是试图用架构的手段赋予前端新的能力的尝试。
这些具体的尝试涉及很多领域知识，这里就不做详细介绍了，但是如果你成为了一个前端架构师，希望你也把“拓展前端边界”当做团队的核心目标之一。
以上就是今天的内容，我们从宏观的角度介绍了前端架构相关的知识，重点介绍了“组件化”“适配性”“单页应用”三个前端架构需要解决的核心问题，组件化在社区有很多现成的方案，需要注意框架选型。适配性需要用到 CSS 的几种特性，即 vw 单位、viewport 规则和 media 规则。单页应用重点是逻辑页面解耦、独立开发和发布及保持前进后退历史。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(1)
- 最新
- 精选
giteebravo
观点明确，切中要害1
收起评论