easy-typer-js

功能十分强大打字机插件，兼容原生JS和MVVM类框架（Vue,React,angular），随心所欲的输出任何你想输出的内容。

本文档并不是最新的，有些缺失，无关大雅，最新文档在掘金=》点击即达

博客文档也不是最新的，我修改好了提交上去，但是gitee pages服务无法更新，原因复杂不细说。

特点（优势）

与其他相似的打字机插件我们的有点在哪里？

1. 我们的打字机不操作DOM，重要的事情讲三遍，不操作DOM！不操作DOM！不操作DOM！
1. 我们的打字机与MVVM框架结合性能超棒！
1. 我们的打字机只改变数据对象的输出，并不对DOM进行操作！

去我的站点看真正的效果

=> 彭小呆的随笔杂谈 <=

Vue3的支持

很多小伙伴说vue3运行不来，在这里说明一下，是可以完美运行的。配置如下。

<script setup>
import { reactive, onMounted  } from 'vue'
// 引入
import EasyTyper from 'easy-typer-js'

// 计算属性
const obj = reactive({
  output: '',
  isEnd: false,
  speed: 80,
  singleBack: true,
  sleep: 0,
  type: 'normal',
  backSpeed: 40,
  sentencePause: false
})

// 实例化
onMounted(() => {
  const typed = new EasyTyper(obj, `我是Vue3输出的内容`)
})

</script>

<template>
  <div>{{ obj.output }}</div>
</template>

<style scoped>
</style>

一、效果展示

easy-typer-js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.而且对MVVM框架支持完美，还兼容原生JS.

二、使用easy-typer-js

2.1 引入easy-typer-js

方法1: ES6模块化引入(官方推荐)

// 安装
npm install easy-typer-js --save
或者
yarn add easy-typer-js

// 引入
import EasyTyper from 'easy-typer-js'
// 实例化
const typed = new EasyTyper(obj, input, fn, hooks)

方法2: 常规导入

// 下载至本地
<script src="./easy-typer-js"></script>

//cdn导入
<script src="https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.3/easy-typer-min.js"></script>

2.2 使用它作为你最强大的武器吧！

2.2.1 在原生JS中使用

打开页面你会发现黎明前的黑暗是最深不见底的黑暗！这句话被一个一个字敲出来！哇哦！是不是很炫酷！

  const typing = new EasyTyper(obj, `黎明前的黑暗是最深不见底的黑暗！`, 
    instance => {
      // 回调函数
      // 此回调一般用于获取新的数据然后循环输出
      // instance { 实例EasyTyper }
      console.log(instance) // 打印出实例对象
    }, (output, instance)=>{
      // 钩子函数
      // output { 当前帧的输出内容 }
      // instance { 实例EasyTyper }
      // 通过钩子函数动态更新dom元素
      document.getElementById('output').innerHTML = `${output}`
  })

2.2.2 在Vue中使用

打开页面你会发现我将要被打字机输出这句话被一个一个字敲出来!

<template>	
  // 动态绑定
  <div>{{ obj.output }}</div>
</template>
<script>
import EasyTyper from 'easy-typer-js'
export default {
  name: 'home',
  data() {
    return {
      obj: {
        output: '',
        // 其他参数省略，实际你需要完整配置哦T^T
      }
    }
  },
  mounted() {
    const typed = new EasyTyper(this.obj, `我将要被打字机输出`)
  }
}
</script>

2.2.3 在React中使用

打开页面你会发现我是被React所创造出来的！这句话上帝所诉说！

import EasyTyper from 'easy-typer-js'

class showText extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      output: '',
      typer: null
    }
    this.initTyper = this.initTyper.bind(this)
    this.changeOutput = this.changeOutput.bind(this)
  }

  initTyper() {
    // 配置对象
    const obj = {
      output: '',
      isEnd: false,
      speed: 80,
      singleBack: false,
      sleep: 0,
      type: 'normal',
      backSpeed: 40,
      sentencePause: false
    }
    // 实例化
    this.typer = new EasyTyper(obj, '我是被React所创造出来的！', this.completeAsentence, this.changeOutput)
  }

  // 输出完毕后的回调函数
  completeAsentence() {
    console.log('输出完毕！长官！')
  }

  // 钩子函数和setState结合
  changeOutput(output) {
    this.setState(state => ({
      output: output
    }))
  }

  render() {
    return (
      <p>{this.state.output}</p>
    )
  }
}

2.3[实战] 实践出真理 ( 完整代码 )

2.3.1 Vue + Vuepress + 一言API === 实现博客首页炫酷文字输出效果

以下为完整代码！！！

<template>	
  <div>
    {{ obj.output }}
    <span class="easy-typed-cursor">|</span>
  </div>
</template>

<script>
import EasyTyper from 'easy-typer-js'
export default {
  name: 'home',
  data() {
    return {
      obj: {
        output: '',
        isEnd: false,
        speed: 80,
        singleBack: false,
        sleep: 0,
        type: 'rollback',
        backSpeed: 40,
        sentencePause: false
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.fetchData()
    },
    fetchData() {
        // 一言Api进行打字机循环输出效果
      fetch('https://v1.hitokoto.cn')
        .then(res => {
            return res.json()
        })
        .then(({ hitokoto }) => {
            this.initTyped(hitokoto)
        })
        .catch(err => {
            console.error(err)
        })
    },
    initTyped(input, fn, hooks) {
      const obj = this.obj
      const typed = new EasyTyper(obj, input, fn, hooks)
    }
  }
}
</script>

<style lang="stylus">
  .typed-cursor
    margin-left: 10px
    opacity: 1
    -webkit-animation: blink 0.7s infinite
    -moz-animation: blink 0.7s infinite
    animation: blink 0.7s infinite
  @keyframes blink
    0%
      opacity: 1
    50%
      opacity: 0
    100%
      opacity: 1
  
  @-webkit-keyframes blink
    0%
      opacity: 1
    50%
      opacity: 0
    100%
      opacity: 1
  
  @-moz-keyframes blink
    0%
      opacity: 1
    50%
      opacity: 0
    100%
      opacity: 1
</style>

效果如下就是首页你们可以看到的啦！:pig:

回滚时间`sleep`设置为0时的效果

2.3.2 在React中

import React from 'react'
import logo from './logo.svg'
import './App.css'
import EasyTyper from 'easy-typer-js'

class showText extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      output: '',
      typer: null
    }
    this.initTyper = this.initTyper.bind(this)
    this.changeOutput = this.changeOutput.bind(this)
  }

  componentDidMount() {
    this.initTyper()
  }

  componentWillUnmount() {
    this.typer.close()
  }

  initTyper() {
    // 配置对象
    const obj = {
      output: '',
      isEnd: false,
      speed: 80,
      singleBack: false,
      sleep: 0,
      type: 'normal',
      backSpeed: 40,
      sentencePause: false
    }
    // 实例化
    this.typer = new EasyTyper(obj, '我是被React所创造出来的！', this.completeAsentence, this.changeOutput)
  }

  // 输出完毕后的回调函数
  completeAsentence() {
    console.log('输出完毕！长官！')
  }

  // 钩子函数和setState结合
  changeOutput(output) {
    this.setState(state => ({
      output: output
    }))
  }

  render() {
    return (
       <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>{this.state.output}</p>
         <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
         >
           上帝
         </a>
       </header>
     </div>
    )
  }
}

export default showText

效果如下

只输出一句话

2.3.3 原生实例

<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.3/easy-typer-min.js"></script>

const obj = {
  output: '', // 输出内容  使用MVVM框架时可以直接使用
  type: 'normal',
  isEnd: false,
  speed: 80,
  backSpeed: 40,
  sleep: 3000,
  singleBack: true,
  sentencePause: false
}
const typing = new easyTyper(obj, `黎明前的黑暗是最深不见底的黑暗！`, (instance)=>{
    // 回调函数 如果这里使用了递归调用会一直循环打印，需要在外部触发停止
    // 此回调用于获取新的数据然后重新输出
    instance.input = [`天不生我彭小呆，万古长青一生狂！`]
    instance.play()
  }, (output, instance)=>{
    // 钩子函数，每一帧的数据获取和实例easy-typer-js的获取
    document.getElementById('output').innerHTML = `${output}<span class="easy-typed-cursor">|</span>`
})
// 12秒后停止
let timer = setTimeout(() => {
  clearTimeout(timer)
  timer = null
  typing.close()
  alert('stop!')
}, 12000)

效果如下！！！

第一句输出后回滚，后面不回滚！

三、参数解析

3.1 new EasyTyper(obj, input, fn, hooks)

参数	说明	回调	是否必须
`obj`	配置对象	无	必须一定有且格式要对，十分严格，比起教导主任毫不逊色
`input`	内容输入	无	可以没有，会有小彩蛋
`fn`	完成一次output输出后的回调函数	当前easy-typer-js实例instance	否
`hooks`	钩子钩在每一帧将要完成的时间片段上	当前帧输出的内容、当前easy-typer-js实例instance	否

回调函数与钩子函数使用方法在上面都使用到了哦

3.2 obj配置

参数(params)	含义(meaning)	类型(type)
`output`	输出内容,使用MVVM框架时直接使用 { obj.output }	string
`type`	下一次的行为 'rollback', 'normal', 'custom'	string(有且仅有此三种)
`isEnd`	全局控制是否终止	boolean
`speed`	打字速度	number
`backSpeed`	回滚速度	number
`sleep`	完整输出完一句话后，睡眠一定时间后触发回滚事件	number
`singleBack`	单次的回滚（优先级高于type）	boolean
`sentencePause`	整个生命周期运行完毕后，句子是否暂停显示（仅在回滚模式下生效）	boolean
obj配置对象校验非常严格，对象的字段和类型都要遵从以上格式，否则你会在控制台看到一个非常显眼的error！

3.3 暴露出可直接调用方法

方法名	说明	参数
`close`	停止打字	无
`sleep`	单独可以调用睡眠线程，可以使用在任何地方	ms(毫秒)

3.4 源码

源码都在GitHub上开源了，可以自行查看，后续还会继续更新。

四、原理解析与FAQ

4.1 为什么说我们的打字机不进行DOM操作？

可以去Github查看我们的打字机源码，你会发现里面没有一行代码有涉及DOM操作的。

4.2 我们怎么做到的不涉及DOM操作的？

我们秉承一个概念，数据输入进来，我们拷贝一份数据，然后对数据进行解析，最后使用一个对象进行数据的输出！

五、更多请查阅

easy-typer-js官网: https://redqueen.gitee.io/typer/
Github文档地址: https://github.com/pengqiangsheng/easy-typer-js
CDN地址: https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.3/easy-typer-min.js

六、计划更新内容

1.可以输出不仅是文字还有dom元素
2.给输出的文字加动画特效
3.输出时加上敲字的声音

七、邀赞👍

如果这篇文章能够帮到你什么，希望能花一点时间帮我点个赞👍b(￣▽￣)d。 =.=戳我点赞😊

八、更新内容说明

1.1.0

更新了输入源可以为一个数组，与原有模式兼容
更新了句子暂停模式（在rollback模式下生效）

  const obj = {
    // 其他省略
    sentencePause: true // 最后一句将会暂停回滚，常显示下去
  }
  // 数组模式 根据顺序一句一句输出
  const inputArr = [`黎明前的黑暗是最深不见底的黑暗！`, `世界上本没有无用的齿轮，只有齿轮自身能决定它的用途！`, `天不生我彭小呆，万古长青一生狂！`]
  const typing = new EasyTyper(obj, inputArr, ()=>{
    // 回调函数，easyTyper生命周期结束后执行
    console.log('结束了，我的使命！')
  }, (output, instance) => {
    // 钩子函数，每一帧的数据获取和实例EasyTyper的获取
    document.getElementById('output').innerHTML = `${output}`
  })

2.0.0

重构源码，全面支持TS！

2.1.0

新增测试功能，引入jest测试框架
新增测试单元，测试命令yarn test

pengqiangsheng/easy-typer-js

easy-typer-js

特点（优势）

去我的站点看真正的效果

Vue3的支持

一、效果展示

二、使用easy-typer-js

2.1 引入easy-typer-js

2.2 使用它作为你最强大的武器吧！

2.2.1 在原生JS中使用

2.2.2 在Vue中使用

2.2.3 在React中使用

2.3[实战] 实践出真理 ( 完整代码 )

2.3.1 Vue + Vuepress + 一言API === 实现博客首页炫酷文字输出效果

回滚时间sleep设置为0时的效果

2.3.2 在React中

只输出一句话

2.3.3 原生实例

第一句输出后回滚，后面不回滚！

三、参数解析

3.1 new EasyTyper(obj, input, fn, hooks)

3.2 obj配置

3.3 暴露出可直接调用方法

3.4 源码

四、原理解析与FAQ

4.1 为什么说我们的打字机不进行DOM操作？

4.2 我们怎么做到的不涉及DOM操作的？

五、更多请查阅

六、计划更新内容

七、邀赞👍

八、更新内容说明

1.1.0

2.0.0

2.1.0

回滚时间`sleep`设置为0时的效果