th:replaceでパーツ化したい
HTMLをパーツ化したい。
partsA.html
<div id="parts" th:fragment="parts-fragment"> パーツ </div>
このパーツを読み出す
BaseB
<div th:replace="partsA::parts-fragment">
このとき、 id="parts" を使ったJavaScriptがあった。
JavaScriptもパーツ化する
partsA.html
<div id="parts" th:fragment="parts-fragment">
パーツ
</div>
<script th:fragment="parts-js-fragment">
$('#parts').addClass("add-class");
</script>
このパーツを読み出す
BaseB
<div th:replace="partsA::parts-fragment"></div> <script th:replace="partsA::parts-fragment"></script>
切り分けなくてもよくないか
partsA.html
<div id="parts" th:fragment="parts-fragment"> パーツ </div>
このパーツを読み出す
BaseB
<div th:replace="partsA::parts-fragment"></div>
<script>
$('#parts').addClass("add-class");
</script>
この状態でもプログラムは動きます。でもなぜ切り分けるか
JSはなぜ切り分ける？
- このパーツがいろんなファイルで読まれてるとき
- HTMLの内容が変わったとき
このとき、もしスクリプトを切り出してなかったら、
パーツの変更が起こったときに、読み出しているHTMLを全部チェックして、全部間違えてないかを確認する必要がある。
IDが変わったときには、確実に全部書き換える必要がある。
見極めは？
読み出し側のBaseB.htmlが、パーツの中身を把握しないと使えない状態の時があやしい。
今回だと、JavaScriptでIDを指定しているが、「本当にそのIDが存在しているのか？」というのは、呼び出し元はわかっていない。
従って、ID名が変わったらやばいというのが気がつけます。
このように、不要な知識を外部に漏れ出さないようにしましょう。
この意識をすることで、急な仕様変更とかにも耐えやすく、のちの開発時間が少なくなったりします。
