HTML DOMを管理する簡単な方法

16818 ワード
dom template javascript html テキストリンク
最後の手段としてHTMLコード生成方法を使用する理由
トレーニング
我々は、新入生を雇って、Freshbitsで家で彼らを訓練します.私たち自身の学習の多くは、私たちがそれらに基本的なものを教えるときに発生します.
その中で、私が今日共有したいランダムbasic stuffの一つはJavaScriptを使ったHTMLコード生成についてです.
例
JavaScriptを使用して構築されたHTMLページにいくつかの対話を追加する初心者を取得します.可能性があります.
  • は、電子商取引ページ
    • の上でカート機能を増します
  • 製品リストの項目機能を削除するページ
  • はチェックアウトページなどにアドレス機能を追加する
    反応、Vue、または角度のようなJavaScriptフレームワークは、まだ彼らのシラバスでありません.これらの開発のためにjqueryやvanilla jsを使用します.

    手の上の新鮮な機会と限られた労働経験で、彼らは一般的にそれのために行って、次のようなものを思い付くことに興奮しています.
    古い道を行く💩
    私は、例として、我々の最新のチームメンバー、UTSAVによってされるコードをとります.彼は追加のカート機能をコーディングするタスクを与えられた.このようにして機能をコーディングしました.
    function displayCart() {
    // Abbreviating other stuff to focus on the core topic...

    for (let i = 0; i < cart.length; i++) {
        var imageTag = document.createElement('img');
        imageTag.src = cart[i].img;
        imageTag.setAttribute('class', 'w-10 h-10 object-cover rounded-md');
        document.getElementById('cart-item-' + i).appendChild(imageTag);

        var nameTag = document.createElement('span');
        nameTag.setAttribute('class', 'ml-4 font-semibold text-sm');
        nameTag.innerHTML = cart[i].name;
        document.getElementById('cart-item-' + id).appendChild(nameTag);

        var priceTag = document.createElement('div');
        priceTag.innerHTML = cart[i].price;
        document.getElementById('cart-item-' + id).appendChild(priceTag);

        var deleteTag = document.createElement('span');
        deleteTag.setAttribute('class', 'px-3 py-1 rounded-md bg-red-300 text-white');
        deleteTag.setAttribute('onclick', 'removeFromCart(' + cart[i].id + ')');
        deleteTag.innerHTML = "x";
        document.getElementById('cart-item-' + id).appendChild(deleteTag);

        // ...
    }
}
    このアプローチには何の問題もない.それはちょうど読みやすく、維持可能です.このカートにもっと多くの要素を追加したい場合はどうすればよいですか?どのようなスタイルを変更したい場合は?
    jQueryはそれをより良くすると主張するかもしれません.コードのそれらの長い行がより短くなる間、主な問題はまだそこにとどまります
    HTMLの読み取りと変更を直接簡単です.見てみましょう.
    アナザーウェイ🙅
    以下の例を書き換えることができます.
    function displayCart() {
    // Abbreviating other stuff to focus on the core topic...

    for (let i = 0; i < cart.length; i++) {
        var cartItemHtml = [
            '<div id="cart-item-' + i + '">',
                '<img class="w-10 h-10 object-cover rounded-md" src="' + cart[i].img + '" />',
                '<span class="ml-4 font-semibold text-sm">' + cart[i].name + '</span>',
                '<div>' + cart[i].price + '</div>',
                '<span class="px-3 py-1 rounded-md bg-red-300 text-white" onclick="removeFromCart(' + cart[i].id + ')">x</span>',
            '</div>'
        ].join("\n");

        // ...
    }
}
    今よりはるかに良い読みやすさです.最終的なHTMLがどのように見えるかを見ることができます.しかし、HTMLコードはJavaScriptにマージされますので、これらの引用符で遊ぶ必要があります.さらに一歩はHTMLコードを独立させることです.
    ベターウェイ🤗
    デフォルトではページに表示されないtemplate HTMLタグがあります.このようにHTMLコードをホストするために使うことができます.
    <template id="cart-item">
    <div>
        <img class="w-10 h-10 object-cover rounded-md" />
        <span class="ml-4 font-semibold text-sm"></span>
        <div></div>
        <span class="px-3 py-1 rounded-md bg-red-300 text-white">x</span>
    </div>
</template>
    我々が簡単に維持することができるコードのように見えます?今、JavaScriptでどのように使用するのですか?
    function displayCart() {
    // Abbreviating other stuff to focus on the core topic...

    for (let i = 0; i < cart.length; i++) {
        var template = document.getElementById('cart-item');
        var cartItemTag = template.content.cloneNode(true);

        cartItemTag.querySelector("img.w-10").src = cart[i].img; 
        cartItemTag.querySelector("span.ml-4").innerHTML = cart[i].name;
        cartItemTag.querySelector("div").innerHTML = cart[i].price;
        cartItemTag.querySelector("span.px-3").onclick = function() { removeFromCart(cart[i].id) };
    }
}
    このように、JavaScriptはテンプレート内の各要素を直接対象にし、それぞれの属性と内容を設定することができます.
    この一歩をさらに踏み出す方法はありますか.何かアイデアがあれば、共有してください.
    巻く
    この学習は主に初心者のためのHTMLとJavaScriptを始めている.彼らが進歩するように、templating enginesを使用するか、データを管理して、フレームワークが反応性を通してDOM最新版の世話をする本格的なJS frameworksと一緒に行くようなより多くのオプションがあります.
    それです.あなたがHTMLを生成するいくつかのJSコードを持っている場合は、今日のテンプレートタグを試してみて、それがどのように行くか教えてください.フリップ側であなたを参照してください.
    クレジット:Hal GatewoodのUnsplashによるカバー写真
    • [1章]開発者が理解すべき作文の基本知識
    プロトタイプ