# easy-typer-js

> 功能十分强大打字机插件，兼容原生JS和MVVM类框架（Vue,React,angular），随心所欲的输出任何你想输出的内容。 ## 特点（优势） > 与其他相似的打字机插件我们的有点在哪里？ - 1. 我们的打字机不操作DOM，重要的事情讲三遍，不操作DOM！不操作DOM！不操作DOM！ - 2. 我们的打字机与MVVM框架结合性能超棒！ - 3. 我们的打字机只改变数据对象的输出，并不对DOM进行操作！ ## 去我的站点看真正的效果 => [彭小呆的随笔杂谈](https://inner.ink) （失效QAQ）<= => [彭小呆的随笔杂谈](https://redqueen.gitee.io/) (新地址，挂在gitee) <= ## 一、效果展示 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1cdd9299547c4183a5f5de66541f7c83~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a17d0d9d8d76425387698fd7702dc8b1~tplv-k3u1fbpfcp-zoom-1.image) > easy-typer-js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.而且对MVVM框架支持完美，还兼容原生JS. ## 二、使用easy-typer-js ### 2.1 引入easy-typer-js - 方法1: ES6模块化引入(官方推荐) ```js // 安装 npm install easy-typer-js --save 或者 yarn add easy-typer-js ``` ```js // 引入 import EasyTyper from 'easy-typer-js' // 实例化 const typed = new EasyTyper(obj, input, fn, hooks) ``` - 方法2: 常规导入 ```js // 下载至本地 //cdn导入 ``` ### 2.2 使用它作为你最强大的武器吧！ #### 2.2.1 在原生JS中使用 > 首先按照上一小节的**方法2常规导入**，要注意的是如果你导入的是`easy-typer-js@1.0.3`这个版本的js，不支持`sentencePause`这个配置。 > 打开页面你会发现`黎明前的黑暗是最深不见底的黑暗！`这句话被一个一个字`敲`出来！哇哦！是不是很炫酷！ > 具体 `实例EasyTyper` 暴露的方法，在后面几节有文档可以查看。 ```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中使用 > 打开页面你会发现`我将要被打字机输出`这句话被一个一个字`敲`出来! ```html ``` #### 2.2.3 在React中使用 > 打开页面你会发现`我是被React所创造出来的！`这句话上帝所诉说！ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2c7907780cd400095f23a30dcaf76c1~tplv-k3u1fbpfcp-zoom-1.image) ```js 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 (

{this.state.output}

) } } ``` ### 2.3[实战] 实践出真理 ( 完整代码 ) #### 2.3.1 Vue + Vuepress + 一言API === 实现博客首页炫酷文字输出效果 > 以下为完整代码！！！ ```html ``` ```js ``` ```stylus ``` > 效果如下就是首页你们可以看到的啦！:pig: ##### 回滚时间`sleep`设置为0时的效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3b62847048942b6a94b44dac6dd33f0~tplv-k3u1fbpfcp-zoom-1.image) #### 2.3.2 在React中 ```js 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 (

{this.state.output}

上帝

) } } export default showText ``` > 效果如下 ##### 只输出一句话 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42677b308e1e49259e2ee4b011fe6e58~tplv-k3u1fbpfcp-zoom-1.image) #### 2.3.3 原生实例 ```html

``` ```js 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}|` }) // 12秒后停止 let timer = setTimeout(() => { clearTimeout(timer) timer = null typing.close() alert('stop!') }, 12000) ``` > 效果如下！！！ ##### 第一句输出后回滚，后面不回滚！ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a688bfaf4f04b25a6dde4045d1be1f6~tplv-k3u1fbpfcp-zoom-1.image) ## 三、参数解析 ### 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！ > `sentencePause`配置在`1.0.3`（含）以下版本不可使用 ### 3.3 暴露出可直接调用方法 |方法名| 说明 |参数 | |---|-------|-----| |`play`| 开始打字 | 无 | |`close`| 停止打字 | 无 | |`sleep`| 单独可以调用睡眠线程，可以使用在任何地方 | ms(毫秒) | ### 3.4 源码源码都在GitHub上开源了，可以自行查看，后续还会继续更新。 ## 四、原理解析与FAQ ### 4.1 为什么说我们的打字机不进行DOM操作？ > 可以去Github查看我们的打字机源码，你会发现里面没有一行代码有涉及DOM操作的。 ### 4.2 我们怎么做到的不涉及DOM操作的？ > 我们秉承一个概念，数据输入进来，我们拷贝一份数据，然后对数据进行解析，最后使用一个对象进行数据的输出！ ## 五、更多请查阅 - easy-typer-js官网: [https://inner.ink/typer/](https://inner.ink/typer/) - Github文档地址: [https://github.com/pengqiangsheng/easy-typer-js](https://github.com/pengqiangsheng/easy-typer-js) - CDN地址: [https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.3/easy-typer-min.js](https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.3/easy-typer-min.js) ## 六、计划更新内容（暂无空2022） - 1.可以输出不仅是文字还有dom元素 - 2.给输出的文字加动画特效 - 3.输出时加上敲字的声音 ## 七、邀赞👍 如果这篇文章能够帮到你什么，希望能花一点时间帮我点个赞👍b(￣▽￣)d。 =.=[戳我点赞](https://github.com/pengqiangsheng/easy-typer-js)😊 ## 八、更新内容说明 ### 1.1.0 - 更新了输入源可以为一个数组，与原有模式兼容 - 更新了句子暂停模式（在**rollback**模式下生效） ```js 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` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6899fc1dfd25461d934d96f32f28e6b9~tplv-k3u1fbpfcp-zoom-1.image)