最开始是想将《用原生js写一个"多动症"的简历》这篇文章里的代码全部讲一遍的，但是在读这这段代码的时候，从中学习到了很多，如果将这些代码一行一行的解读，那么会让读者放弃自我思考，基本看完就忘，所以这里只介绍一些基本原理以及如何去读懂这段代码。
多动症简历
闲着无聊逛知乎的时候，看到这么一篇文章《用原生js写一个"多动症"的简历》，对里面的效果挺感兴趣，于是去github上下载了作者的源代码，代码分支为promise，想去看一下这个多动症简历的原理以及具体是如何实现的，在都源代码的过程中，学习到了不少东西，所以特地做个笔记整理一下学习心得。
基本原理
其实这个效果原理还是比较简单的，就是将要输出的内容放到一个字符串中，然后设置一个定时器，每隔一秒输出一次。具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>resume</title>
</head>
<body>
<div id="style-wrap"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var styleWrap=$("#style-wrap");
var resume="大家好，我是我爱萨摩耶";
function showResume(content) {
var i=0;
clearInterval(timer);
var timer = setInterval(function () {
if(i<content.length){
var char=content.slice(0,i);
styleWrap.text(char);
console.log(char);
i++;
}else{
clearInterval(timer)
}
},100)
}
showResume(resume);
</script>
</html>
理解了基本原理后，再实现这个效果就比较简单了。
代码变色以及markdown
先说说css的效果，在示例中，我们在屏幕上输出样式的同时，页面上的效果也随着我们输出的样式而改变了，其实这个效果比较简单。先看html结构：
<style>
</style>
<div id="sryle-wrap">
</div>
我们在页面的body中创建了style和div这两个标签，然后将样式的字符串。比如"body{background:#fff }"同时添加到style标签和div标签中就可以了，原理和上面的基本一样，唯一的区别是上面的代码只将字符串添加到div中，而我们这里除了添加到div中外，还添加到了style标签中。还不懂的话自己写个demo就清楚了。
除了这些基本的效果外，示例中还展示了css字符串变色和markdown字符串转html。这两个效果是借助了外部的库实现的，分别是prism和markdowntohtml，在package.json中可以找到。
如何看懂源代码
简单说下我的学习历程吧，希望对你有帮助，因为源代码是用es6+webpack写的，所以需要先了解es6的基本特性语法以及模块化，因为一开始对webpack不熟悉，不知道如何打包运行，所以我是采用一个很粗暴的方法，把这些互相依赖的模块按照顺序，全部放到一个js文件中，这样就可以不借助webpack运行了。在看懂代码后，我又尝试着使用require.js重写了一遍，体会一下模块化的好处，使用require.js后，发现js文件比较多，所以使用r.js对代码进行了打包压缩。打包压缩后，又发现es6的代码没有被压缩，网上查询后，需要使用bable进行转换，但是有一些方法需要使用bable-polyfill，而使用babel-polyfill需要使用webpack，得，又绕回来了，重新学下webpack打包吧，打包成功，但是代码没有压缩，算了，一步到位，再学下怎么生成模板html，babel吧，以达到和示例中一模一样得效果，webpack这一块踩了不少坑，具体可以去看《学习webpack前，你需要了解的那些事》这篇文章。
总结
从代码中你能学到什么？
- promise
- bind
- 变量命名
- webpack
- jslint
所以，老老实实去啃吧。
网友评论