ほしかった機能
vanilla jsのみで動作する。
html側で設定、変更が可能なもの。
簡単に導入できること。
なぜ作ろうと思ったか
サーバーにnode.jsが入らなかったから。
レイアウトが複雑な要素を編集するのが大変だから。
かといって、templeteでjsを書くまでもないような場合に、ほしいなと感じていたから。
使用方法
replaceクラスの中に、テンプレートを記述し、その内容を参照し、テンプレートとする。
基本的には、テンプレートの内容を重視し、innerhtmlのみを呼び出し元から参照させる。
テンプレートを使用する物にはp_tempクラスを追加する。
呼び出し側は、p_tempと呼び出し用のクラスを設定する。
そうすると、テンプレートからその要素を探し、置換する。
tailwild cssのようなクラスが大量に記述されるようなものを簡潔に書くのにも使用できる。
基本的に、呼び出し元のタグは無視され、タグごとすべて変更される。inner_htmlとsrc,
hrefは継承される。
呼び出し側は、関数のような構造になっており、中に引数を設定できる。画像のbtnの場合、class bigを引数に取っており、これがtemplateのHELLOを置換し、hhhとなる。
複数設定可能で、かつ、テンプレート側に複数の同一クラスがあった場合、そのすべてが置換される。
テンプレート側の要素の中に、タグが存在しない場合、特別に、呼び出し元のinner_HTMLを取得し、全置換する。
引数がある場合、引数ごとの置換になるため、注意。
基本的に、引数は設定しなくてもよい。
設定しない場合、テンプレートのまま置換される。
中身を書いておけば、そのまま表示されるので、
変更したい要素があったときだけ、引数を記入する方式でもよい。
bodyはdisplay:none;しておくことをお勧めします。ちらつくので。
bodyは処理が終わったら、display:block;するように実装されています。
すべて読み込まれてからの処理になるので、既存のjsコードがある場合は、干渉することが考えられます。そこはお気をつけください。