TheaterJS是一個用于模擬人輸入行為的JS庫宪卿。

下面是一個簡單完整的Demo畜埋，模擬了兩個角色（Vader缆瓣、luke）的對話翻伺，可以打開看一下運行效果和代碼材泄，然后復(fù)制代碼到自己的項目中，試一試吨岭。

https://codepen.io/Zhouzi/pen/JoRazP

首先進(jìn)行準(zhǔn)備工作：

1拉宗、安裝依賴npm install theaterjs
2、在你要寫代碼的頁面引入theaterjs插件import theaterJS from 'theaterjs'

接下來開始看一下代碼：

HTML:

<div class="body">
    <main class="scene">
      <!-- 此處有兩個角色辣辫，vader和luke -->
      <div class="actor">
        <div class="actor__prefix">-</div>
        <div id="vader" class="actor__content"></div>
      </div>
      <div class="actor">
        <div class="actor__prefix">-</div>
        <div id="luke" class="actor__content"></div>
      </div>
    </main>
  </div>

CSS:(只有一部分)

.dark {
  color: $color-white;
  background-color: $color-black;
}
.actor__content--typing::after {//添加打字和刪除時的光標(biāo)
  content: '|';
  animation: blink 500ms infinite;
}

JS:

mounted(){
    //1,初始化一個theaterJS對象
    var theater = theaterJS()    
    //2,將演員添加到選角中旦事。
    theater
      .addActor('vader', { speed: 0.8, accuracy: 0.6 })
      .addActor('luke')
    //3,將場景添加到場景中，options.autoplay為true急灭，則播放場景姐浮。
    theater
      .addScene('vader:Luke.', 600)
      .addScene('luke:What?', 400)
      .addScene('vader:I am your father.', 400)
      .addScene('luke:Nooo...', -3, '!!! ', 600, 'No! ', 600)
      .addScene('luke:That\'s not true!', 600)
      .addScene('luke:That\'s impossible!', 400)
      .addScene('vader:Search your feelings.', 1600)
      .addScene('vader:You know it to be true.', 1000)
      .addScene('luke:Noooooooo! ', 600, 'No!', 400)
      .addScene('vader:Luke.', 600)
      .addScene('vader:You can destroy the Emperor.', 1600)
      .addScene('vader:He has foreseen this. ', 800)
      .addScene('vader:It is your destiny.', 1600)
      .addScene('vader:Join me.', 800)
      .addScene('vader:Together we can rule the galaxy.', 800)
      .addScene('vader:As father and son.', 1600)
      .addScene('vader:Come with me. ', 800)
      .addScene('vader:It is the only way.', 2000)
      .addScene(theater.replay.bind(theater))
    //4，添加在發(fā)出事件時執(zhí)行的回調(diào)( ( 當(dāng)場景開始/結(jié)束時葬馋、) )卖鲤。
    //效果是當(dāng)打字（type）和刪除（erase）開始時肾扰，顯示光標(biāo)
    //當(dāng)打字（type）和刪除（erase）結(jié)束時，移除光標(biāo)蛋逾。
    //當(dāng)vader打字（type）時白对，
    theater
      .on('type:start, erase:start', function () {
        theater.getCurrentActor().$element.classList.add('actor__content--typing')
      })
      .on('type:end, erase:end', function () {
        theater.getCurrentActor().$element.classList.remove('actor__content--typing')
      })
      .on('type:start, erase:start', function () {
        if (theater.getCurrentActor().name === 'vader') {
          document.body.classList.add('dark')
        } else {
          document.body.classList.remove('dark')
        }
      })
  },

先來了解幾個單詞的意思：

theater：戲劇换怖；
type：打字甩恼；
erase：清除；

1沉颂、TheaterJS

需要提供一些選項來創(chuàng)建一個新的TheaterJS對象条摸。
var theater = theaterJS(<options>)
參數(shù)默認(rèn)描述{autoplay, locale, minSpeed, maxSpeed}

注意：obj1等效于obj2昌屉。

let obj1 = {
  "minSpeed "：80钙蒙，
  "maxSpeed"：450 
}
let obj2 = {
   "minSpeed "：{
     "erase"：80，
     "type"：80
  },
  
  "maxSpeed"：：{
     "erase"： 450间驮，
     "type"： 450
  }
}

TheaterJS對象具有兩個公共（只讀）屬性：

theater.options：對象的選項躬厌。
theater.status：對象的狀態(tài)（“正在播放”，“正在停止”或“準(zhǔn)備就緒”）竞帽。

2扛施、addActor

將演員添加到演員表中。

theater.addActor(<name>, <options>, <callback>)

參數(shù)默認(rèn)描述

注意：actor回調(diào)是在設(shè)置其顯示值時調(diào)用的函數(shù)堆巧。它也可以是字符串妄荔，在這種情況下，TheaterJS將假定它是DOM選擇器并查找相應(yīng)的元素恳邀。然后懦冰，當(dāng)值更改時灶轰，將設(shè)置元素的innerHTML谣沸。如果為目標(biāo)元素指定了具有參與者名稱的id，則可以放心地忽略此參數(shù)笋颤。

theater.addActor('vader')
//在這種情況下乳附，TheaterJS將查找 #vader 元素的元素内地。 另外，當(dāng)使用選擇器字符串時赋除，actor將有一個引用DOM元素的附加 $element 屬性阱缓。

3、addScene

將場景添加到場景中举农，如果 options.autoplay 為 true荆针，則播放場景。

theater.addScene(<scene>)

<scene>有五種類型

theater
.addScene('vader:Luke...') //擦除演員顯示值的當(dāng)前值颁糟，然后鍵入新值航背。
.addScene(800) //在播放下一個場景之前，先中斷800毫秒棱貌。
.addScene('I am your father!') //將值追加到參與者值的當(dāng)前顯示玖媚。
.addScene(-7) //擦除7字符。
.addScene(fn) //調(diào)用fn婚脱，它接收完成的回調(diào)作為第一個參數(shù)( 調(diào)用 done() 將播放場景中的下一個場景)今魔。

注意，addScene實際上接受了無限數(shù)量的參數(shù)障贸，因此你可以執(zhí)行以下操作：

theater
. addScene('vader:Luke... ', 800, 'I am your father!')
. addScene(-7, 'mother!')
. addScene(fn)

4错森、監(jiān)聽事件

添加在發(fā)出事件時執(zhí)行的回調(diào)( ( 當(dāng)場景開始/結(jié)束時的比如 ) )。

theater.on(<eventName>, <callback>)

例子：

theater
      .on('type:start, erase:start', function () {
        theater.getCurrentActor().$element.classList.add('actor__content--typing')
      })
      .on('type:end, erase:end', function () {
        theater.getCurrentActor().$element.classList.remove('actor__content--typing')
      })
      .on('type:start, erase:start', function () {
        if (theater.getCurrentActor().name === 'vader') {
          document.body.classList.add('dark')
        } else {
          document.body.classList.remove('dark')
        }
      })

參數(shù)默認(rèn)描述

注意：
通過使用快捷方式來偵聽所有事件： theater.on('*', callback)。
事件在序列啟動( sequence:start ) 并結(jié)束( sequence:end )嘀粱。
比如 時發(fā)出 theater.addScene('vader:Luke.', 'vader:I am your father.') 是一個序列激挪。
當(dāng)方案開始和結(jié)束時，分別為 scenario:start 和 scenario:end 發(fā)出事件锋叨。
場景是 :end 事件偵聽器中的stoppable垄分。 表示在偵聽場景 :end的回調(diào)內(nèi)調(diào)用 theater.stop() 將停止場景。 這對于異步回調(diào)(娃磺。比如 動畫) 非常有用薄湿。

5、播放

theater.play()

例子：

var theater =theaterJS({ autoplay:false })
theater
. addActor('vader')
.addScene('vader:Luke...')
document.querySelector('button').addEventListener('click', function () {
 theater.play()
}, false)

6偷卧、重播

theater.replay()

例子：

var theater =theaterJS();
theater
. addActor('vader')
. addScene('vader:Luke...')
. addScene(theater.replay)

7豺瘤、停止

theater.stop()

例子：

var theater =theaterJS()
theater
. addActor('vader')
. addScene('vader:Luke... ', 'I am your father...')
document.querySelector('button').addEventListener('click', function () {
 theater.stop()}, false)

8、getCurrentActor

返回當(dāng)前正在播放的演員听诸。

var theater =theaterJS()
theater
. addActor('vader')
. addScene('vader:Luke...')
. addScene(function (done) {
 var vader = theater.getCurrentActor()
 vader.$element.classList.add('dying')
   done()
 })