JavaScriptから使いやすいWebAPIを考える 2

JavaScriptから使いやすいWebAPIを考える記事の第二弾
第一弾ではRPC風のAPIを紹介しましたが、今回はサーバ側に焦点を当てます

基本的な説明

WebAPIといえばデータやHTMLを返すのが普通ですが、今回のWebAPIは描画命令を返します

サーバが返すのは描画命令

{"$":"#sample", "append":"<li>〇〇</li>"}

サーバは描画命令をJSONで返します。

ブラウザ側では次のように実行される

$("#sample").append("<li>〇〇</li>")

描画命令はブラウザ側でJavaScriptに変換されて実行されます。

複数の描画命令

[{描画命令1}, {描画命令2}]

描画命令は複数同時に送れます。配列に入れるだけです

以上が基本的な説明です。

全体的な流れは次の通りになります。

1. ユーザがリンクを踏んだりフォーム投稿を行う
2. jsonr属性があれば、当プログラムが代理でサーバに送信
3. サーバは描画命令を返す
4. 当プログラムが描画命令を実行する

まだプロトタイプ状態ですが、感触は良好なので記事にしてみました。
以下は命令のリファレンスです。

タグ選択

タグ選択

{"$":"#sample"}    //$("#sample")
{"$":"*.sample"}   //複数選択
{"find":".sample"} //$(this).find(".sample")

名前	値
$	セレクタに一致するタグを1つ選択する 省略時は自分自身(イベントが発生した要素)になる
find	セレクタに一致する子孫を1つ選択する
closest	セレクタに一致する一番近い親を選択する

セレクタの頭に*を付けると複数選択できる

タグ追加

タグ追加

{"$":"#sample", "inner":"〇〇"}                //$("#sample").html("〇〇")
{"$":"#sample", "inner":"〇〇", "escape":true} //$("#sample").text("〇〇")

名前	値
inner	選択タグの内部を変更する
append	選択タグの内部の最後に追加する
prepend	選択タグの内部の最初に追加する
before	選択タグの前に追加する
after	選択タグの後に追加する
replace	選択タグを置換する。空文字なら削除になる
escape	trueを指定すると、文字列をエスケープする 初期値はエスケープしない

属性

属性

{"$":"#sample", "attr":{"href":"〇〇"}} //$("#sample").attr("href","〇〇")
{"$":"#sample", "attr":{"onclick":"console.log(event)"}} //イベントを登録する唯一の方法

名前	値
attr	{名前:値}で属性を変更できる 値がnullなら、その属性は削除される

値はエスケープされるので安全です

プロパティ

プロパティ

{"$":"#sample", "prop":{"disabled":true} //$("#sample").prop("disabled",true)

名前	値
prop	{名前:値}でプロパティを変更できる
document	{名前:値}でdocumentのプロパティを変更できる
window	{名前:値}でwindowのプロパティを変更できる

値に関数は指定できません

その他

名前	値
alert	alertを表示する

📝ToDo

• 不足してるもの：classAdd,classRemove,dispatch,click
• ブラウザ側の状態をサーバに送るには？ → リンクを検知してhrefを書き換える
• history
• text/htmlの時は全面的に書き換え
• ShadowDOM (composed, event.composedPath()[0], node.getRootNode())
• eval (new Function('target', "use strict";${json.function}).bind(json)(target))
• プロトタイプ