Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

easy-typer-js

Package Overview
Dependencies
0
Maintainers
1
Versions
8
Issues
File Explorer

Advanced tools

easy-typer-js

Very powerful JS typewriter plugin, compatible with native JS and MVVM class framework (Vue, React...), whatever you want to output.

    2.1.0latest

Version published
Maintainers
1
Yearly downloads
4,498
increased by265.1%

Weekly downloads

Readme

Source

easy-typer-js

Version License Downloads

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

特点(优势)

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

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

去我的站点看真正的效果

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

一、效果展示

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/[email protected]/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: '', // 其他参数省略 } } }, 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/[email protected]/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下一次的行为 'roolback', '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操作的?

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

五、更多请查阅

六、计划更新内容

  • 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

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc