开始

• 项目结构

    - src
    |--core
    |--|--index.js
    |--|--typewriter.js
    \--|--|typewriter.scss
    |--react
    |--utils
    - webpack
  

  项目使用webpack打包，使用yarn进行包管理，使用sass作为样式语言，输出两种代码，一种是针对react的，一种是非框架的。同时，提供了好几个例子，这比较完整，可以快速上手。

• 主题

  由于react没有怎么接触，也不在这里记录了，只是一个包装，应该没有多少东西，好，从现在开发

  1. utils下主要是一些工具方法，暂时不讨论

  2. 进入core

     inddex.js没有什么内容，主要是集中导出成员

  3. 正主：typewriter.js

     使用了ES6的语法，难怪有babel。好，开始解剖。

  4. 引入了raf，这是个啥。原来是requestAnimationFrame的垫片，继续
  5. 开始声明了一些事件名称、配置参数、接着是在构造函数里配置，没到重点，重点主要在于打字机效果是怎么实现的，接着往下看
  6. 一系列判断，进入init()，创建容器和光标。
  7. 小细节，使用()=>{}定义成员方法，用处还是有的。
  8. 定义一些API，供调用的，继续
  9. 小细节，为了提供链式调用，每个方法都返回了this
  10. 进入start(), 调用了runEventLoop()， 这应该是核心代码了。
  11. 一个队列，再加上时间序列，应该是主要思路了。
  12. 时间到了，对事件进行判断，执行相应的逻辑
  13. So？整体来看，代码应该是接近尾声了，代码逻辑和结构都很清晰
  14. 每次向document输出文本节点，结束

尾巴

整个代码阅读下来，除了一些细节处理外，整体没有难点，命名和注释对于代码的阅读非常有帮助，学习到了效果的制作基本思路。

后来还发现一个更多star的项目，Typed.js。再读读，有时间再看一下这个代码。