有限状态机处理字符串

有限状态机

1. 每一个状态都是一个机器：

• 在每一个机器里，我们可以做计算、存储、输出；
• 所有的这些机器接受的输入是一致的；
• 状态机的每一个机器本身没有状态，如果我们用函数来表示的话，它应该是纯函数（无副作用）。

2. 每一个机器知道下一个状态：

• 每个机器都有确定的下一个状态（Moore）
• 每个机器根据输入决定下一个状态（Mealy）

JS中的有限状态机（Mealy）

// 每个函数是一个状态
function state(input) // 函数参数就是输入
{
   //在函数中，可以自由地编写代码，处理每个状态的逻辑
  return next;// 返回值作为下一个状态
}
//////以下是调用//////
while(input){
  // 获取输入
  state = state(input)
}

HTML解析

第一步 拆分文件

1. 为了方便文件管理，先把parser单独拆到文件中
2. parser接受HTML文本作为参数，返回一颗DOM树

第二步 创建状态机

https://html.spec.whatwg.org/multipage/parsing.html#data-state

第三步 解析标签

• 主要的标签：开始标签、结束标签、自封闭标签（暂时忽略属性）

第四步 创建元素

• 在状态机中，除了状态迁移，还需要加入业务逻辑
• 在标签结束状态提交标签token

第五步 处理属性

• 属性值分为单引号、双引号、无引号三种写法，因此需要较多状态进行处理
• 处理属性的方式跟标签类似
• 属性结束时，把属性加到标签Token上

第六步 构造树

• 从标签构建DOM树的基本技巧是使用栈
• 遇到开始时创建元素并入栈，遇到结束标签时出栈
• 自封闭标签可视为入栈后立刻出栈
• 任何元素的父元素是它入栈前的栈顶

CSS解析

第一步 收集CSS规则

1. 遇到style标签时保存css规则
2. 调用现成库css parser分析css规则

第二步 添加调用

1. 创建一个元素后，立即计算CSS
2. 理论上当分析一个元素时，所有CSS规则已经收集完毕
3. 真实浏览器中，可能遇到写在body的style标签，需要重新CSS计算，这里忽略，所以最佳实践是所有的style尽可能写在所有元素之前，避免重新计算、重排、重绘

第三步 获取父元素序列

1. 在computeCSS函数中，我们必须知道元素的所有父元素才能判断元素与规则是否匹配
2. 可通过浅拷贝并转置上一步的stack，获取从自身到父元素的元素序列
3. 因为首先获取的事当前元素，所以获得和计算父元素匹配的顺序是从内向外

第四步 拆分选择器

1. 选择器也要从当前元素向外排列
2. 复杂选择器拆成针对单个元素的选择器，用循环匹配父元素队列

第五步 计算选择器与元素匹配

1. 根据选择器的类型和元素属性，计算是否与当前元素匹配
2. 只实现了三种基本选择器，实际浏览器中处理复合选择器 暂不支持空格的Class选择器

第六步 生成computed属性

1. 一旦选择匹配，就应用选择器到元素上，形成computedStyle

第七步 确定规则覆盖关系

1. 计算并比较优先级specificity