【读书笔记】用原生js写一个"多动症"的简历

最开始是想将《用原生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中创建了stylediv这两个标签,然后将样式的字符串。比如"body{background:#fff }"同时添加到style标签和div标签中就可以了,原理和上面的基本一样,唯一的区别是上面的代码只将字符串添加到div中,而我们这里除了添加到div中外,还添加到了style标签中。还不懂的话自己写个demo就清楚了。

除了这些基本的效果外,示例中还展示了css字符串变色和markdown字符串转html。这两个效果是借助了外部的库实现的,分别是prismmarkdowntohtml,在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
    所以,老老实实去啃吧。

推荐阅读更多精彩内容