前端技术架构与工程

组件

结构

表现

行为

缺少与全局隔离的命名空间

iframe 封装了一个完整的执行上下文

Shadow DOM 封装了一个较轻量级的局部作用域

CSS 代码和 HTML 结构混在在组件的内部逻辑中，
长字符串令代码过于臃肿，缺乏良好的可读性和可复用性

slot 机制

使用时，要引入 JS 文件并在 HTML 文档中编写 <template> 结构才能使用自定义元素 <my-dialog>。
组件源码和业务代码耦和在了一起。

将组件源码和业务代码分离，外层业务代码只需要引入一个 JS 文件即可使用对应的组件

对于组件本身，基于结构、表现和行为分离的原则，保持其 CSS、JS 和 HTML 代码的相对独立性

compile.js

runtime.js

多文件组件

单文件组件

DOM 自身的一些钩子函数，如 onload、onerror 等，在对应事件完成之后被触发

前端途径

其他途径

前端途径

其他途径

开发的保质高效产出

bug 的保质快速解决

实现了前后端的绝对解耦，接口是两个领域唯一的关联。
与前后端分离在架构与工程方面所有的关注点几乎完全契合

动态性优势？？

弱 SEO

首屏时间长

Hash 模式

History 模式

更好的 SEO

无代理 Node.js 服务器

有代理 Node.js 服务器

将渲染从后端解耦

为前后端（这里的后端指 Node.js 中间层）
同构 JavaScript 编程提供了可行性（对前端的革命性影响）

目的

三层含义

主要功能

工作本质

接下来的内容没有看懂，工作中要用到 SSR 时先看 Vue 的 SSR 文档，之后再来理解此书的内容

PC

平板

手机

CPU

内存大小

Windows

Android

iOS

光纤

WiFi

4G

尽快完成首屏呈现

视觉角度
提高网站内容的渲染速度

交互角度
缩短从打开网站到可交互之间的时间间隔

业务性能指标

反馈速度

动画帧率

业务指标

书签管理器

窗口管理器

...

历史记录管理

...

HTML、CSS、SVG 等语言的解释器

JS 引擎

布局、绘制等与渲染相关的模块

多媒体解码器

图形库

...

减少 RTT
（Round-trip delay time，
通信往返时间）
总数量

缩短 RTT 时长

HTTP 2.0
（HTTP 脑图中的“演变”部分）

网络优化策略

查看性能脑图中的
“浏览器如何工作/4. 渲染”与
“js 的 async 与 defer attribute”

指前端代码逻辑而非浏览器本身的运算能力

内存管理

成本超标

性能不理想或功能不稳定

开发过程混乱无序难以管理

代码不规范，维护成本高

软件架构的两个基本要素

在充分了解语言特性的前提下 制定适用于业务类型的开发规范和技术栈

HTML 与 CSS

JavaScript

内容

原则

质量指标

分类

目标

方案

用户角度

技术角度

前端角度

跨团队协作消耗的沟通成本非常昂贵

个人独立开发

团队协作开发

跨团队协作开发

• 减少重复性体力劳动
  
• 建立统一的技术规范
  
• 辅助跨团队并行开发
  

将源代码转换为客户端可执行代码

压缩混淆、自动生成 CSS Sprite、动态模块按需加载

给静态资源 URL 加入 Hash 指纹和 CDN 路径？？？等

文档生成、动态构建？？？等

规范审查、性能评估等

GUI（图形用户界面（Graphical User Interface）） 应用普遍难以测试

前端技术过于灵活

前端本身的交互逻辑

数据接口

借助于服务端编程语言或框架搭配的 HTML 模板引擎将数据编译为 HTML 文档，比如适用于 Java 的 FreeMarker、适用于 PHP的 Smarty 以及适用于 Node.js 的 Pug 等。

模板引擎可以被理解为一个功能强大的字符串处理工厂。

优势

适用场景

优势

劣势

适用场景

服务器的硬件配置通常优于个人终端设备，同时搭配模板引擎的缓存功能，SSR在速度上的优势要远远大于CSR。

随着个人终端设备硬件性能的不断提升，CSR与SSR在速度上的差距逐渐减小；
网络传输速度和浏览器性能的提升也缩短了首屏等待时间。

预渲染与其缺点

如何构建骨架屏

通过 webpack 将骨架屏打包到项目中

构建阶段预渲染SPA的静态内容到 index.html

服务器判断请求来源，
将爬虫请求重定向到预渲染服务器，
使用 Headless Chorme 预渲染 index.html

嵌套语法

变量、混合、模块、继承等特性

大而全，导致代码规范难以约束？？ 没有一些类似 jsLint 的工具来检测？？

难扩展

原生 CSS 和 SASS、LESS 的模块实质上仅仅是子文件，并非真正意义上的模块。
将 JS 的模块体系带入 CSS 开发领域可以有效弥补 CSS 模块体系的补不足。

CSS-in-JS 在编译时（有些是在运行时）为组件产生唯一的 classname 以及对应的选择器规则，
将组件及其内部元素的样式限制在唯一的命名空间内，从而实现样式的隔离

依据我目前的了解，这和“命名空间”的优点，CSS Modules 都有

大概率指的是 webpack 中对 js 的 tree-shaking 功能

非常适用于组件化架构

指的是不好移植其他 CSS 技术方案的项目中？？
不好进行CSS代码的复用？？
这需要对此方案有更深入的了解，以后需要用到时再研究

编程过程中需要在 HTML、CSS、JS 三种上下文语境之间频繁切换，
在某种意义上背离了关注点分离原则。

关注点分离

css-in-js 库我都没有实际用过，以后需要了再好好调查选择与实践

1. 首先，styled-components 所有语法都是标准 css 语法，同时支持 scss 嵌套等常用语法，覆盖了所有 css 场景。
   
2. 在样式复写场景下，styled-components 支持在任何地方注入全局 css，就像写普通 css 一样
   
3. styled-components 支持自定义 className，两种方式，一种是用 babel 插件, 另一种方式是使用 styled.div.withConfig({ componentId: "prefix-button-container" }) 相当于添加 className="prefix-button-container"
   
4. className 语义化更轻松，这也是 class 起名的初衷
   
5. 更适合组件库使用，直接引用 import "module" 即可，否则你有三条路可以走：像 antd 一样，单独引用 css，你需要给 node_modules 添加 css-loader；组件内部直接 import css 文件，如果任何业务项目没有 css-loader 就会报错；组件使用 scss 引用，所有业务项目都要配置一份 scss-loader 给 node_modules；这三种对组件库来说，都没有直接引用来的友好
   
6. 当你写一套组件库，需要单独发包，又有统一样式的配置文件需求，如果这个配置文件是 js 的，所有组件直接引用，对外完全不用关注。否则，如果是 scss 配置文件，摆在面前还是三条路：每个组件单独引用 scss 文件，需要每个业务项目给 node_modules 添加 scss-loader（如果业务用了 less，还要装一份 scss 是不）；或者业务方只要使用了你的组件库，就要在入口文件引用你的 scss 文件，比如你的组件叫 button，scss 可能叫 common-css，别人听都没听过，还要查文档；或者业务方在 webpack 配置中单独引用你的 common-css，这也不科学，如果用了3个组件库，天天改 webpack 配置也很不方便。
   
7. 当 css 设置了一半样式，另一半真的需要 js 动态传入，你不得不 css + css-in-js 混合使用，项目久了，维护的时候发现某些 css-in-js 不变了，可以固化在 css 里，css 里固定的值又因为新去求变得可变了，你又得拿出来放在 css-in-js 里，实践过就知道有多么烦心。
   

厂商真实意图

技术选型

代码规范

TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.

Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly.

Writing types can be optional in TypeScript, because type inference allows you to get a lot of power without writing additional code.？？

是 JS 的超集，一种编译性编程语言

JS 核心概念脑图中的 JS 引擎

缺点

优点

缺点

async 函数返回值

在简洁性和错误处理上都优于 Generator

针对应用架构

针对工程体系

src

dist

vendors

config

test

assets

不同类型文件归类到一起，html 文件放一起，css、js 文件分别放一起

随着交互逻辑复杂度的提升、业务和组件数量的增长，
在一定程度上限制了架构的可伸缩性，并且会对开发者的工作效率产生负面影响

规范

优点

保证团队成员使用统一的编码风格

在版本迭代中保持风格一致

使用既定的格式对代码的元素进行说明，比如函数参数和返回类型

在语义化之外，通过自然语义描述以帮助开发者更容易理解源码

数组循环操作

Object Oriented CSS（面向对象的 CSS ）

理念

UI 组件和 CSS 组件

优点

缺点

不适合常规的前端项目

是 Block、Element、Modifier 的简称，是 OOCSS 方法论的一种实现模式

三种实体

命名格式

优点