本文章同步更新于我的HEXO博客:
我的HEXO博客
本项目Fork地址(欢迎Star)：
https://github.com/ZQ-jhon/resume
本项目预览地址(Preview Address)
Preview : 多动症简历
项目起因
因为在网上看到一个大神做的动态简历，如连接所示：
炫不炫？酷不酷？其实这个项目其实很简单，整个代码中，js的API超不过10个。
引用的第三方库
1.jQuery 实际用到的地方只有1%
2.prism 代码高亮库。用到30%
3.marked.js markdown语法转html的库，实际用到20%
技术概要
通篇中使用的技术难度并不大，主要有：
核心原理：同时向一个style标签和pre标签吐代码，pre中显示源码，而style中直接可以变成样式。
字符串提取、拼接。
setInterval定时器控制整个代码的吞吐节奏/速率。
在setInterval中设定一些if，用来控制总字符串的吞吐位置。
避坑指南
1.注意字符串拼接 ： 要注意字符串拼接的时候，往styleTag里面吐的代码，一旦包含注释//，要对/进行转义，如下`\/这里填写你的内容\/。**
2.字符串的命名一定要切实合理： 如图所示：
3.代码高亮渲染 ： 中途加入代码高亮渲染的时候，通过判定字符串循环的 n ++ 达到多少，从而用if(n>123&&n<321)这种方法来进行区域渲染。prism的渲染代码如下：
官方js库地址：[http://prismjs.com/](http://prismjs.com/)
语法:prism.heihlight(渲染的字符串,渲染的代码格式)
Prism.highlight(str.substring(0,n), Prism.languages.css);
4.MarkDown ⇒ HTML渲染 ： 同样根据n的值，来使用if()来进行循环。
marked.js官方库地址：https://www.npmjs.com/package/marked
渲染代码如下:
drawBoard.innerHTML =marked(str.substring(929,1885));
5.动态创建Pre标签（id=”drawBoard”） ： CSS代码版是一开始写在HTML的，但是之后的简历板子（id=”drawBoard”，本质上是个pre标签）是通过判断n的值，来动态创建的，如图所示：
6.已经创建的元素无法在另外的循环中获取 ：
在刚才的【5】中，动态创建的pre标签(id=”drawBoard”)会在if()的区域内无法document.getElementById(‘drawBoard’)，此时需要在if里面再次获取并且赋值，如图所示：
7.动态下拉 同样通过n的值来让元素的溢出自动下拉
如图：
8. 动态简历最后的魔术环节 ： 还是通过n的值来进行判断，从而渲染
其实这个环节就是故弄玄虚，通过判断CSS代码板 的 最后结尾字符串的n值，来进行渲染。
代码如图：
核心原理代码
//注意事项，往style标签里面吐字符串时，要注意对/**/注释标签进行转义
var styleTag = document.getElementById('styleTag');
var sourceBoard = document.getElementById('sourceBoard');
var str = '\/*大家好...今天我给大家做一个在线简历...\/*';
var n = 0;
window.setInterval(function(){
n++;
styleTag.innerHTML = str.substring(0,n);
sourceBoard.innerHTML = str.substring(0,n);
},100);
//此时，用户观看字符串轮番出现的同时，程序也已经向style标签吐了代码，这样，当用户看完一个CSS样式结束后，对应的样式可以立马通过浏览器渲染出来。Demo部署到GitHub详细过程
本来还不知道Demo可以直接在Github上预览。。。直到发现这样的功能：
在Demo的仓库里，点击Settings，然后找到GitHub Pages，设置源为master主分支（此项目只有一个分支，所以也没得选），点击Save保存，即可出现预览地址，一般保存后会稍有延迟。
整个部署的环节大致如下：
在本地的项目根目录下，
$ git init加入当前所有文件到暂存区
$ git add .(后面有个“·”，代表全部文件)连接远程仓库
$ git remote add origin "your repository address"提交所有文件到git版本控制系统
$ git commit -m "create Demo resume"push到你的远程仓库
$ git push origin master打开浏览器，进入这个目录的respository，点击settings,设置GitHub pages为 master,稍等片刻，即可预览。
PS:学会这个骚操作，我把以前做的好多Demo都给部署了一遍，目前都可以预览，感谢GitHub
反思与不足
在快速预览模式下，例如，将setInterval的间隔时间设为0，整个页面跑完，容易出现两个代码版的下拉滚动条“假死”,拉不动，但是将间隔时间设定为正常的90ms或者100ms，整个页面跑完没有任何问题。我初步总结的原因是，因为每次下拉的值是1000，这个下拉的动作很可能重复几百次，几千次。所以当间隔时间极小，重复次数极高，下拉值极大，那么这种现象就越容易出现。
我在向一些前端前辈请教这个Demo的不足之处时，大神告诉我：面试官只关心页面上的信息，而不是如何呈现，更不能忍受长达200s的等待。这个Demo算是炫技，但是又没有什么核心的技术点，还不如老老实实的写一份干净清爽的简历实在。
我的反思是，这个Demo由于大量的字符串以及转义字符拼接，因而没有像原作者：http://strml.net/的页面那样，呈现的美轮美奂，这也是我在写Demo之初没有全局考虑的结果，导致现在如果加一些CSS代码，会带来极大的工作量。
整个页面没有加速或者暂停的功能，其实这个倒是简单，设置三个按钮：慢，中速，快速，在setInterval中的if里，对点击事件进行监听，一旦点击，就修改setInterval的时间间隔，然后return当前的n值。
整个Demo代码过于混乱，没有进行封装，因为自己现在对面向对象还是有些手生，希望以后进行封装，以便提高运行效率，以及复用。