picodomでリアルDOMを作ってみた
すべてを仮想DOM化して運用する状況なら別ですが、ブラウザJavaScriptでいろいろ操作していると、どうしてもDOMノードを作らないといけないことがあります。そんなときにもpicodomを使ってみてもいいんじゃないか、ということをちらっと思った次第です。
従来のやり方
JavaScriptでDOMノードを作ろうと思えば、大きく分けて2つの方法があります。
-
innerHTML
にHTML文字列を代入する -
createElement
やsetAttribute
などのDOM APIを駆使する
ただ、文字列から生成するとパースのコストが発生しますし、文字列を変化させようとすればXSSの危険もあります。一方、DOM APIを直接使うとコードが冗長になって、どんなDOMを生成しているのか見えづらくなってしまいます。
jQueryがあれば、$('<elem />', {属性オブジェクト})
の形で作ることもできますが、さすがにこのためだけにjQueryを入れるのもアホらしい話です。
既存のものの活用
で、プロジェクトにすでにpicodomを使っていたので、そこから起こす、という方法を取ってみることにしました。
import {patch} from 'picodom';
const toRealDom = vdom => {
const div = document.createElement('div');
patch(null, vdom, div);
return div.firstChild;
}
もちろん設定すればJSXでも動かせます(jsFiddle)。簡潔・高速・安全、そしてライブラリも軽量ということで、仮想DOMでない環境でも便利かもしれない、と少し思いました。
Author And Source
この問題について(picodomでリアルDOMを作ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/jkr_2255/items/fb7913b0aff1b515a480著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .