😺

宣言的なJSフレームワーク 非同期プロパティをやってみた

2022/05/14に公開約1,000字

概要

非同期プロパティの仕組みを組み込んでみた。

フレームワーク

https://github.com/mogera551/data-x.js/

デモ概要

郵便番号を入れると、住所検索して表示する

解説

main.html

https://github.com/mogera551/data-x.js/blob/v0.5.3/demo/asyncZipcode/index-spa/html/main.html

main.js

https://github.com/mogera551/data-x.js/blob/v0.5.3/demo/asyncZipcode/index-spa/module/main.js

"@address#get"に郵便番号から住所を取得する非同期関数を設定。
https://github.com/mogera551/data-x.js/blob/v0.5.3/demo/asyncZipcode/index-spa/module/main.js#L6-L12

"@message#get"に住所からメッセージを取得する非同期関数を設定。
await addressでaddressの取得を待ってから、メッセージの文字列を作る。
addressの値は、キャッシュされており、"@address#get"を再度実行しない。
https://github.com/mogera551/data-x.js/blob/v0.5.3/demo/asyncZipcode/index-spa/module/main.js#L13-L16

プロパティ間の依存関係を記述。それぞれ、

  • inputZipプロパティが更新されたら、zipcodeプロパティの値をhtml要素へ反映
  • zipcodeプロパティが更新されたら、addressプロパティの値をhtml要素へ反映
  • addressプロパティが更新されたら、messageプロパティの値をhtml要素へ反映

を意味する。

https://github.com/mogera551/data-x.js/blob/v0.5.3/demo/asyncZipcode/index-spa/module/main.js#L19-L23

Discussion

ログインするとコメントできます