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

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

基本的な説明

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

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

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

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

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

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

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

複数の描画命令

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

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

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

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

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

{"$":"#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)

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

名前	値
alert	alertを表示する

不足してるもの：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))
プロトタイプ