2

前奏曲。私は Haskell と関数型プログラミングはまったく初めてですが、Haskell でのコーディングはとてもエキサイティングなので仕方ありません。したがって、私の質問は非常に単純かつ/または些細なものになる可能性があります。私はまだ "Learn You a Haskell for Great Good" を読んでいますが、モナドはまだ途中です。

次の動作を検討してください。

  • イベントのスタックを作成する (単に配列)
    • イベントをリッスンし、mousemoveイベントが発生したら、それらをスタックにプッシュします
  • レンダリング ループを実行します。
    • requestAnimationFrameループの開始に使用
    • スタックされたイベントがあるかどうかを毎回確認します
    • スタックから最後のイベントを取得し、それを使用して何かを作成し、レンダリングします
    • 空のスタック
    • 次のフレームを要求する

私が理解できないのは、pageX や clientX などのイベントから興味のある値を取得する方法です。データ定義で何かをしなければならないように見えます。助けてください。

PS また、外部関数の結果をチェックする方法も理解できません。たとえば、DOM 要素を取得しようとすると、結果が element またはnullである可能性があるため、getElById不純であり、結果に何が含まれているかを確認する必要があります。それを実現する方法は？私は次のようなものを使用できるようです:data Element = Null | Element ...そして、結果をパターン一致させますが、外部関数に期待される結果を認識させるにはどうすればよいですか?

更新
ここで、必要なロジックの実際の例:

module MouseTracker where

import FFI
import Prelude

data Element
data Event
type EventStack = [Event]
data Frame


consLog :: a -> Fay ()
consLog = ffi "console.log(%1)"


reqFrame :: (Frame -> Fay ()) -> Fay ()
reqFrame = ffi "requestAnimationFrame(%1)"


getDoc :: Fay Element
getDoc = ffi "document"


createEl :: String -> Fay Element
createEl = ffi "document.createElement(%1)"


elById :: String -> Fay Element
elById = ffi "document.getElementById(%1)"


elSetId :: Element -> String -> Fay ()
elSetId = ffi "%1.setAttribute('id',%2)"


elSetHtml :: Element -> String -> Fay ()
elSetHtml = ffi "%1.innerHTML = %2"


docBodyAppend :: Element -> Fay ()
docBodyAppend = ffi "document.body.appendChild(%1)"


elListenWith :: Element -> String -> (Event -> Fay ()) -> Fay ()
elListenWith = ffi "%1.addEventListener(%2, %3)"


winListenWith :: String -> (Event -> Fay ()) -> Fay ()
winListenWith = ffi "window.addEventListener(%1,%2)"


docListener :: String -> (Event -> Fay ()) -> Fay ()
docListener evtType fn = do
    doc <- getDoc
    elListenWith doc evtType fn




createTrace :: Fay ()
createTrace = do
    div <- createEl "div"
    docBodyAppend div
    elSetId div "trace"


createStack :: Fay ()
createStack = ffi "window._eventStack = []"


getStack :: Fay EventStack
getStack = ffi "window._eventStack"


updateStack :: EventStack -> Fay ()
updateStack = ffi "window._eventStack = %1"


emptyStack :: Fay ()
emptyStack = createStack




listenMice :: Fay()
listenMice = docListener "mousemove" trackMouse
    where trackMouse :: Event -> Fay ()
          trackMouse evt = do
              stk <- getStack
              updateStack (evt:stk)


renderFrame :: Frame -> Fay ()
renderFrame frame = do
     stack <- getStack
     if length stack > 0
           then (do
                   let e = head stack
                   traceEventCoord e)
           else (do return ())
     reqFrame renderFrame
     emptyStack
     where traceEventCoord :: Event -> Fay ()
           traceEventCoord e = do
               eX <- pageX e
               eY <- pageY e
               let str = show eX ++ " x " ++ show eY
               trace <- elById "trace"
               elSetHtml trace str


pageX :: Event -> Fay Int
pageX = ffi "%1['pageX']"
pageY :: Event -> Fay Int
pageY = ffi "%1['pageY']"


main = do
    docListener "DOMContentLoaded" $ \ _ -> do
        putStrLn "DOM ready"
        createTrace
        createStack
        listenMice
        reqFrame renderFrame
4

1 に答える 1