【jQuery】機能単位の部品化視点で見る.loadメソッド

お仕事でとあるライブラリを使ってHTML要素を抜き出して印刷する機能だけを部品化することになった。

webで部品化？って思って色々困惑したので忘れる前に備忘録してみる。

jQueryの.loadメソッド

部品を呼び出すjavascript

$("print-component").load("print.html");

部品を配置するhtml

<div id="print-component"></div>

読み込むhtml

<button onclick="print()">レポート出力</button>

結果

<div id="print-component">

    <button onclick="print()"></button>

</div>

部品っぽく書いてみる

.loadで読み込むHTMLには<script><style>タグがそのまま使えるのでより部品っぽく書ける

読み込むhtml

<style>
.print-btn{
    background-color:#fee;
    color:#555;
}
</style>

<script>
function documentPrint(){
    /* ～処理～ */
    print();
}
</script>
<button class=".print-btn" onclick="documentPrint()">レポート出力</button>