scalajsでevent.dataをパターン化する方法

Question

私はwindow#postMessageハンドラで異なるイベントをマッチさせたいですが、ネイティブの特徴と一致させることはできません。だから、どのように私はこの問題を解決することができます：

@js.native 
trait XY extends js.Object { 
    val x: AnyVal = js.native 
    val y: AnyVal = js.native 
} 

@js.native 
trait DataEvent extends js.Object { 
    val c: String = js.native     // chart 
    val s: String = js.native     // dataSet 
    val d: XY = js.native      // xy data 
    val x: Seq[XY] = js.native     // eXtra data 
} 

object ChartApi extends JSApp { 
    def receiveMessage(event: Any): Unit = { 
    event match { 
     case DataEvent => ??? 
     case _ => println("else") 
    } 

    println(s"lala $event") 
    } 

    def main(): Unit = { 
    // add window event handler 
    dom.window.addEventListener("message", (event: MessageEvent) => receiveMessage(event.data), false) 
    println("Hello world!") 

    } 
} 

を私は別のiframe内の別のチャートを持っていると私は、またはのpostMessageを経由して「データクリア」「このデータを追加」などのイベントを送信する必要があります。

Answer 1

JS特性は実行時にIDを持たないため、任意のオブジェクトがJS特性のインスタンスであるかどうかを直接テストできません。

代わりに、JSの方法を実行して、可能性のある他の選択肢の中から、特性によって表されるインターフェイスを一意に識別するフィールドの有無をテストする必要があります。例：

if (event.hasOwnProperty("d")) { 
    // it must be a DataEvent, because the alternatives do not have a 'd' field 
    val e = event.asInstanceOf[DataEvent] 
    ... 
} else { 
    ... 
} 

通常、私たちはそのようにしたくありません。だから、このようなメッセージのいくつかの種類のメッセージングプロトコルでは、我々は通常、明示的なmessageTypeフィールドまたはそのようなものがあります。

object DataEvent { 
    def unapply(event: Any): Option[DataEvent] = 
    if (event.messageType == "data") Some(event.asInstanceOf[DataEvent]) 
    else None 
} 

あなたは、パターンで使用することができます。

if (event.messageType == "data") { 
    val e = event.asInstanceOf[DataEvent] 
    ... 
} else { 
    ... 
} 

あなたは抽出で、この「タイプテスト」をエンコードすることができます：あなたはすべてのDataEventメッセージmessageType = "data"フィールドは、あなたがすることができることを確認してくださいこのような試合：

event match { 
    case DataEvent(event) => ??? 
    case _ => println("else") 
} 

最後に、あなたの代わりにケースクラスとして、すべてのあなたのメッセージの世話をするためにシリアライズ/酸洗ライブラリを検討する必要があります。このようなライブラリのリストについては、https://www.scala-js.org/libraries/libs.htmlを参照してください。