用原生js制作一个动态简历(多动症简历)及在线预览部署过程

本文章同步更新于我的HEXO博客:
我的HEXO博客

本项目Fork地址(欢迎Star)：

https://github.com/ZQ-jhon/resume

本项目预览地址(Preview Address)

Preview : 多动症简历

项目起因

因为在网上看到一个大神做的动态简历，如连接所示：

http://strml.net/

炫不炫？酷不酷？其实这个项目其实很简单，整个代码中，js的API超不过10个。

引用的第三方库

1.jQuery 实际用到的地方只有1%

2.prism 代码高亮库。用到30%

3.marked.js markdown语法转html的库，实际用到20%

技术概要

通篇中使用的技术难度并不大，主要有：

• 核心原理：同时向一个style标签和pre标签吐代码，pre中显示源码，而style中直接可以变成样式。

• 字符串提取、拼接。

• setInterval定时器控制整个代码的吞吐节奏/速率。

• 在setInterval中设定一些if，用来控制总字符串的吞吐位置。

避坑指南

1.注意字符串拼接 ： 要注意字符串拼接的时候，往styleTag里面吐的代码，一旦包含注释//，要对/进行转义，如下`\/这里填写你的内容\/。**<