本篇文章給大家?guī)砹岁P(guān)于前端的相關(guān)知識，其中主要跟大家聊一聊前端是怎么實(shí)現(xiàn)打字機(jī)插件的，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

前言

前端實(shí)現(xiàn)打字機(jī)效果，在網(wǎng)上找到的通過修改dom節(jié)點(diǎn)的方式無法跨端使用，考慮到跨端問題作出兼容方案：使用回調(diào)函數(shù)，在每次打字變化的時(shí)候調(diào)用回調(diào)并且把更新后的字符串拋出，讓用戶自己去處理之后的渲染，這樣就能夠做到跨平臺，在各個(gè)端都能夠正常使用。

最簡單的打字機(jī)

const dom = document.querySelector('.content') const data = '最簡單的打字效果代碼'.split('') let index = 0 function writing(index) {     if (index < data.length) {         dom.innerHTML += data[index]         setTimeout(writing.bind(this), 200, ++index)     } } writing(index)

最簡單的打字機(jī)，簡單的通過定時(shí)器實(shí)現(xiàn)了文字的增加，通過這個(gè)例子我們能夠得到一個(gè)具體的實(shí)現(xiàn)思路，當(dāng)然一些功能或者性能上的問題還需要不斷地優(yōu)化，但是我們可以以此作為基礎(chǔ)來設(shè)計(jì)一款插件。

1. 新增向后刪除動(dòng)效

所以我們新增一個(gè)當(dāng)前的打字狀態(tài)

當(dāng) state 為 "typing" 的時(shí)候代表向前打字，相反為向后刪除，

然后就是處理刪除部分的邏輯，這部分的邏輯和向前新增是一樣的，并且我們也要在刪除到最后一個(gè)字符之后把狀態(tài)改為 "typing"

2. 新增速度，向后刪除速度可控

然后還可以自定義向前新增或者向后刪除的速度，通過當(dāng)前的狀態(tài)來判斷就可以

3. 輸入文字可以為單個(gè)字符串也可以為字符串?dāng)?shù)組

并且支持傳入一個(gè)字符串?dāng)?shù)組而不是單個(gè)的字符串，因?yàn)閷?shí)際的需求可能是多個(gè)字符串之間一直輪換

首先單個(gè)字符的邏輯沒什么好說的，字符串的數(shù)組的話，就需要新增一個(gè)index用于判斷當(dāng)前打字機(jī)進(jìn)行到了哪一個(gè)字符串，

通過 changeTextIndex 這個(gè)函數(shù)，就可以不斷地更新當(dāng)前字符串，做到字符串?dāng)?shù)組循環(huán)播放的效果

4. 開啟延遲

新增字符串開始和結(jié)束的延遲

用于控制每次打字結(jié)束之后，需要等待的時(shí)間

5. 停止打字

打字機(jī)運(yùn)行的過長當(dāng)中，由于底層是通過定時(shí)器實(shí)現(xiàn)的，那么就一定需要在不使用的時(shí)候?qū)⑵潢P(guān)閉，避免造成性能的浪費(fèi)，比方說在首頁實(shí)例化了一個(gè)打字機(jī)，但是進(jìn)入到別的頁面的時(shí)候就不再需要這個(gè)打字機(jī)了，那么就需要將其停下。

通過在實(shí)例上綁定一個(gè)函數(shù)來停下當(dāng)前打字機(jī)的進(jìn)行，當(dāng)調(diào)用的時(shí)候，會(huì)將下一個(gè)定時(shí)器賦值為 null，從而停下打字機(jī)的運(yùn)行。

6. 使用 callback 回調(diào)解決小程序問題

上述的代碼當(dāng)中，我們都去修改了 dom 節(jié)點(diǎn)來實(shí)現(xiàn)打字機(jī)字符的改變，那么在小程序或者是其他不存在 dom 或者是 dom 修改的 api 不再是 innerhtml 的時(shí)候，插件就無法進(jìn)行支持，所以對此進(jìn)行兼容，顯示通過 callBackText 來保存當(dāng)前的字符串，然后在利用一個(gè)函數(shù)來決定，這個(gè)字符串的使用方式

在存在 callback 的情況下，優(yōu)先將字符串通過 callback 回調(diào)出去，讓業(yè)務(wù)拿到這個(gè)字符串并且自己去處理改變的邏輯，這樣在哪都能夠進(jìn)行打字效果，并且不在依賴環(huán)境。

這里那我自己的 uniapp 項(xiàng)目做一個(gè)示例

效果：

第三方 typed.js 庫

大部分邏輯具體參考了 [typed.js]-JavaScript打字動(dòng)畫庫

這里屬于自定義了一款插件，支持的功能不如 typed.js 但是勝在更加輕量，并且可以自己定義