前端系统课程 - 41. 会动的简历

特效原理

效果页面
使用循环定时器 setInterval() 方法，结合字符串截取方法如 substring() 或 split()，在相同的间隔时间，改变页面显示的文字，就有逐个打字的效果。
使用 <pre> 标签（preview），可以保留文字原始的格式。
页面中写入代码的同时，将代码也写入到相应的标签中，这些代码就会生效。

代码高亮

将代码写入页面上后，用替换的方式，将关键字换成用带有特殊类名或行内样式的标签包裹的字符串。例如：

1
2
3

htmlBox.innerHTML = str.slice(0, round);
htmlBox.innerHTML = htmlBox.innerHTML.replace('html', '<span style="color: #f00;">html</span>');
// 下面这行代码成功执行的条件是页面中需要有目标字符；当页面中完整出现目标字符，证明这段字符在CSS中已经写完了，所以不会影响样式

使用专门的库来实现更加完整的代码高亮功能，例如：Prism.js。

支持 Markdown

可以使用 marked.js 等相关的库。
将替换完成的 <div> 标签使用 replaceWith() 方法将原来的 <pre> 标签替换掉；但这是一个比较新的替换 DOM 元素的方法，可能有兼容性问题

灵活使用回调函数

右侧的 markdown 写完之后，左侧提示转换为 HTML，再进行转换，然后左侧再进行提示；这些流程都需要通过回调函数来衔接，例如：
1
2
3
4
5
6
7
8
9
left('', str1, () => {
right(str0, () => {
left(str1, str2, () => {
mark(str0, () => {
left(str1 + str2, str3);
});
});
});
});
要理清代码执行的思路，主要是要想清楚代码的执行顺序（操作符的优先级），例如：
1
cssBox.innerHTML = str1 + str2.slice(0, round);
上面的代码中是从右往左赋值，要先得到最右面的 str2.slice(0, round) 的值，再用这个值和 str1 拼接，最后赋值给 cssBox.innerHTML。