Array要素をHTMLのさまざまな領域に動的に噴射するチュートリアル

このチュートリアルは、JavaScriptを使用してAPIからデータを取得し、配列（たとえば、最後の2つのコンテンツとして最後の2つ）からHTMLページのさまざまな領域に動的に特定の要素を動的に挿入する方法を詳しく説明しています。この記事では、データの収集、配列セグメンテーション（スプライスを使用）、効率的なDOM操作（IntersADJACENTHTML）、および再利用可能なレンダリング関数の構築方法について説明します。また、開発者が明確な構造とデータ駆動型のWebアプリケーションを構築するのを支援することを目指して、テキストの長さを制御するための実用的なスキルを提供します。

最新のフロントエンド開発では、外部APIからデータを取得し、Webページで動的に提示することが一般的な要件です。たとえば、ページのさまざまな領域に同じデータセットの異なる部分を表示する必要がある場合があります。たとえば、通常のリスト領域にほとんどのデータを表示し、配列の最後にいくつかの要素を表示して、ページの別々の領域に「機能」コンテンツとして表示します。このチュートリアルでは、データ収集、配列セグメンテーション、DOMレンダリング、テキストコンテンツの長さコントロールなど、このプロセスを説明します。

1。データ収集

まず、APIからデータを取得する必要があります。ここでは、「HTML5」に関連する本情報を取得するための例としてGoogle Books APIを採用します。フェッチAPIを使用して、ネットワークリクエストとプロセス応答を容易にします。

 fetch（ 'https://www.googleapis.com/books/v1/volumes?q=html5'）
    .then（response => response.json（））//応答をjson format.then（data => handleresponse（data））// handle function.catch（error => console.error（ 'error fetting data：'、error））を呼び出す; //エラー処理

上記のコードでは、取得したデータのさらなる処理の責任があります。

2。データ処理と配列セグメンテーション

データを受信した後、キーはアレイ内の要素を異なる領域に割り当てる方法です。 array.prototype.splice（）メソッドは、これを達成するための強力なツールです。既存の要素を削除したり、新しい要素を追加したりして、削除された要素を返すことにより、配列の内容を変更できます。

APIから10冊の本を入手し、最後の2冊の本を注目の本として、残りの8冊を通常の本として使用することを期待しているとします。このような配列を分割できます。

 function Handleresponse（data）{
    if（！data ||！data.items || data.items.length === 0）{
        console.warn（ 'データ構造が見つかったか無効なアイテムはありません。'）;
        戻る;
    }

    //元の配列が可変であると仮定するか、最初にコピーをコピーします//注：スプライスは元の配列を変更します。元の配列を変更したくない場合は、最初にコピーする必要があります。
    // const allbooks = [... data.items];
    const allbooks = data.items; //元の配列への参照を直接操作//スプライスを使用して、インデックス8から2つの要素を削除します（つまり、インデックスが0から始まるため）。
    // splice（startindex、deletecount）
    //他のブック変数は、実際にはAllBooksアレイへの参照です。
    //スプライス操作の後、AllBooksには最初の8つの要素のみが含まれます。
    // fouturedbooksは、削除された最後の2つの要素を取得します。
    const fouturedbooks = allbooks.splice（8、2）; //注目の本として最後の2つの要素を抽出しますconst otherbooks = allbooks; //普通の本として残りの8つの要素// domコンテナconst fouturedcontainer = document.queryselector（'。featured-books '）;
    const othercontainer = document.queryselector（ '。他の本'）;

    //レンダリング注目の本と普通の本の場合（foutidcontainer）{
        featuredcontainer.insertadjacenthtml（ 'beforeend'、renderlisthtml（featuredbooks））;
    }
    if（othercontainer）{
        othercontainer.insertadjacenthtml（ 'beforeend'、renderlisthtml（otherbooks））;
    }
}

重要： Splice（）メソッドは、元の配列を変更します。上記の例では、AllBooksはスプライスを呼び出した後に最初の8つの要素のみを残し、formuredbooksには削除された最後の2つの要素が含まれます。他のブック変数は、変更されたAllBooksアレイを指します。

3。HTMLへの動的レンダリング

コードをモジュラーと読み取り可能に保つために、HTML文字列を生成するヘルパー関数を作成します。

3.1 HTML構造準備

まず、HTMLページにこれらの動的コンテンツをホストするための対応するコンテナがあることを確認してください。

 <section>
    <h1>特別な本</h1>
    <ul class="feature-books">
        
    </ul>
</section>

<section>
    <h1>他の本</h1>
    <ul class="other-books">
        
    </ul>
</section>

3.2レンダリングヘルパー機能

2つのレンダリング関数を定義します。RenderListhThTMLは、ブックリストの処理に使用され、RenderItemhtmlは個々の本のアイテムを処理するために使用されます。

 /**
 *ブックリストのHTML文字列を生成* @param {array}アイテム-bookデータ配列* @returns {string} -HTMLすべての本項目を含む*/
関数renderlisthtml（items）{
    if（！items || items.length === 0）{
        '<p>コンテンツはまだありません。 </p> ';
    }
    return items.map（item => renderitemhtml（item））。join（ ''）;
}

/**
 *単一の本のアイテムにHTML文字列を生成し、説明の長さを制限します * @param {object} item-単一の本データオブジェクト * @returns {string} -HTML文字列単一の本項目 */
関数renderitemhtml（item）{
    const title = item.volumeinfo.title || 「不明なタイトル」;
    const Authors =（item.volumeinfo.authors && item.volumeinfo.authors.join（ '、'））|| 「不明な著者」;
    const thumbnail = item.volumeinfo.imagelinks && item.volumeinfo.imagelinks.thumbnail
                      ？ item.volumeinfo.imagelinks.thumbnail
                      ： 'Placeholder.jpg'; //デフォルトの画像を提供するlet description = item.volumeinfo.description || '';

    //説明の長さを140文字に制限if（description.length> 140）{
        説明=説明.substring（0、140） '...';
    }

    `を返します
        

$ {title}

$ {著者}

$ {説明}

ページ数：$ {item.volumeinfo.pagecount || 「不明」}

`; }

3.3 DOM挿入

Handleresponse関数では、InsertAdjacenthtmlメソッドを使用して、生成されたHTML文字列をDOMに挿入します。この方法は、innerhtmlを直接操作するよりも効率的です。これは、要素全体の内容を解析して交換するのではなく、指定された場所に新しいHTML文字列を挿入するためです。

 // ...ハンドラーサンパンス関数の内部...
    const featuredcontainer = document.queryselector（ '。foture-books'）;
    const othercontainer = document.queryselector（ '。他の本'）;

    if（foutidcontainer）{
        featuredcontainer.insertadjacenthtml（ 'beforeend'、renderlisthtml（featuredbooks））;
    }
    if（othercontainer）{
        othercontainer.insertadjacenthtml（ 'beforeend'、renderlisthtml（otherbooks））;
    }
// ...

「前」パラメーターは、ターゲット要素の最後の子要素の後にHTML文字列が挿入されることを示します。

4。スタイルの美化（CSS）

ブックリストをより美しく見せるために、基本的なCSSスタイルを追加できます。

 。本 {
    ディスプレイ：Flex; /* flexboxレイアウトを使用*/
    パディング：10px;
    ギャップ：15px; /*アイテム間の間隔*/
    ボーダーボトム：1px solid #eee;
    Align-Items：Flex-Start; /*トップアライメント*/
}

.book：last-child {
    国境圏：なし; /*最後の要素は底部の境界を表示しません*/
}

.book .thumbnail {
    幅：80px; /*サムネイル幅*/
    高さ：自動;
    オブジェクトフィット：カバー; /*絵の割合を保持します*/
    ボーダーラジウス：4px;
}

.book .book-info {
    フレックスグロー：1; /*残りのスペースを占有*/
}

.book H4 {
    マージントップ：0;
    マージンボトム：5px;
    色：＃333;
}

.bookp {
    マージンボトム：5px;
    フォントサイズ：0.9EM;
    色：＃666;
}

.book p.description {
    フォントサイズ：0.85em;
    ラインハイト：1.4;
    色：＃555;
}

/*特別な本に追加のスタイルを追加できます*/
.featured-books .book {
    バックグラウンドカラー：＃f9f9f9;
    境界線：1px solid #ddd;
    ボーダーラジウス：8px;
    マージンボトム：10px;
}

5。注意事項と要約

• エラー処理：実際のアプリケーションでは、フェッチリクエストのネットワークエラーをキャッチするなど、より堅牢なエラー処理メカニズムを追加したり、API応答を処理するときにデータが存在するかどうかを確認することが重要です。
• データ検証：レンダリングの前に、APIによって返されたデータで必要な検証を実行して、item.volumeinfo、item.volumeinfo.imagelinkなどのプロパティがデータの欠落によるページクラッシュを回避するために存在するようにします。
• パフォーマンスの最適化：大量のデータについては、パフォーマンスを最適化するために仮想スクロールまたはページングロードを使用することを検討してください。
• アクセシビリティ：生成されたHTMLが、画像に意味のあるALT属性を追加するなど、アクセシビリティ基準に準拠していることを確認してください。
• モジュール性：データの収集、処理、およびロジックをさまざまな機能に分離すると、コードの保守性と再利用性が向上する可能性があります。

このチュートリアルを使用して、APIからデータを取得し、Splice（）メソッドを使用して配列を柔軟にセグメント化する方法を習得し、InsertAdjacenthTMLおよび補助レンダリング関数を使用して、異なる部分のアレイ含有量をHTMLページの異なる領域に動的かつ効率的に提示し、表示の長さを制御します。このアプローチにより、建物とデータ駆動型のWebインターフェイスがより明確かつ容易になります。

以上がArray要素をHTMLのさまざまな領域に動的に噴射するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。