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

前言

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

最簡單的打字機

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)

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

1. 新增向后刪除動效

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

當 state 為 "typing" 的時候代表向前打字，相反為向后刪除，

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

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

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

3. 輸入文字可以為單個字符串也可以為字符串數(shù)組

并且支持傳入一個字符串數(shù)組而不是單個的字符串，因為實際的需求可能是多個字符串之間一直輪換

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

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

4. 開啟延遲

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

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

5. 停止打字

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

通過在實例上綁定一個函數(shù)來停下當前打字機的進行，當調(diào)用的時候，會將下一個定時器賦值為 null，從而停下打字機的運行。

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

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

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

這里那我自己的 uniapp 項目做一個示例

效果：

第三方 typed.js 庫

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

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