ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryのloadメソッドにはどのような欠陥があるのでしょうか?

jqueryのloadメソッドにはどのような欠陥があるのでしょうか?

青灯夜游オリジナル: 2023-01-28 15:17:352738ブラウズ

jquery のロードメソッドの欠点: 1. ロードメソッドは head、body、script タグを自動的に無視します; 2. 動的ロード後にスクロールバーのオフセットの問題が発生します。これは、load メソッドに "$(document).scrollTop(0);" を追加することで解決できます。 3. ネットワーク遅延やその他の問題により、どのコードを最初に実行するかわかりません。 4. キャッシュの問題があります。 ; 5. 構造的な損傷の問題が発生します。

このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。

jquery load() メソッドは、タイトルバーや下部の情報部分など、ページのドキュメント部分を複製するのに役立ちます。テンプレート HTML を抽出し、load メソッドを通じてそれを各ページに動的にロードできます。使用中にいくつかの問題が発生しました

#欠点 1:load メソッドは head、body、および script タグを自動的に無視します#1. ドキュメントのコンテンツをヘッドとボディにロードしたい場合は、コンテンツを div でラップしてからロードできます。

2. スクリプト部分では、コールバックを使用できます。関数は動的に作成され、

3 にロードされます。スタイルシートを動的にロードすることはお勧めできません。動的にロードしないと、ページのフラッシュ、つまりページの更新時に問題が発生します。、スタイルがレンダリングされていない画像が 1 秒間表示され、その後通常の画像に戻ります (理由は以下と同じ)

欠陥 2: 問題スクロールバーのオフセットは、動的読み込み後に発生します。ページを更新するときに発生します。スクロールバーのオフセット。

通常の状況では、js がブラウザーのレンダリングをブロックしないように、スクリプトファイルをドキュメント本文の最後に配置します。これにより、ページがレンダリングされた後に、load メソッドが実行されます。動的にロードされるページは最後です。 1 つです。追加されたばかりです。スクロールバーは最初から上部に固定されています。ヘッダー部分を動的に読み込んだ後、スクロールバーが下に移動し、上部に戻りません。

解決策load メソッドのコールバック関数に $(document).scrollTop(0);

を追加するか、script タグの async 属性を使用して、 js スクリプトを非同期にロードすると、スクリプトが head に配置されます。

欠点 3: 非同期ロードの問題ロードが非同期的にトリガーされると、次のメソッドの 2 行のコードが同時に実行されます。ネットワークの遅延やその他の問題により、どちらの文が最初に実行されるかは不明です。 div id="templateId">init16b28748ea4df4d9c2150843fecfba68 id が templateId の要素が渡され、load が読み込まれます。 3 行目が最初に実行され、その後 $("#templateId") が見つかりません (この div はまだロードされていません)。また、html("hello") 操作は実際には実行されません。

function load(targetId,templateName) {
    $("#"+targetId).load(contextPath+templateName);
    $("#templateId").html("hello");
}

欠陥 4: キャッシュの問題

リクエストサーバーの負荷を軽減するために、多くのブラウザは同じリクエストアドレスを作成し、最適化します。ローカルキャッシュからの履歴データ。したがって、アドレスの後にいくつかの動的サフィックスを追加する必要があります。

        function load(targetId,templateName) {
            var nowDate = new Date();
            var randomId = nowDate.getTime();//防缓存
            $("#"+targetId).load(contextPath+templateName+"?"+randomId);
        }

欠陥 5: 構造損傷の問題

トラップ 1 (キャッシュの問題) に基づいて、より深い問題に遭遇する可能性もあります。問題は、ロードしたデータが 100db36a723c770d327fc0aef2ce13b1 仕様に準拠していない場合、元のデータが破壊されてしまうことです。 dom 構造を変更し、その後 dom や他のノードを取得するときに異常が発生します。たとえば、元の

<html>
 <head>
  
  <title>test</title>
 </head>
 <body>
    <textarea id="mytext"></textarea>
 </body>
</html>

ロードによって取得されたデータが

の場合;< <p></p>
<div class="cnblogs_code">, その後、最終的には不規則な HTML クロージャが生成されます。また次回ください。元の構造が破壊されているため、dom を取得できない可能性があります。</div>
<p><pre class="brush:js;toolbar:false;"><html>
 <head>
  
  <title>test</title>
 </head>
 <body>
    <textarea id="mytext"><textarea><</textarea>
 </body>
</html></pre> <strong></strong>現時点では、これを </p>
<p><pre class="brush:js;toolbar:false;">function load(targetId,templateName) {
            var nowDate = new Date();
            var randomId = nowDate.getTime();//防缓存
            $("#"+targetId).load(contextPath+templateName+"?"+randomId,{},function (responseTxt){
                $("#"+targetId).val(responseTxt);
            });
        }</pre></p>
<div class="cnblogs_code"> に変更して生成できます。html 要素は dom ノードとしてではなく、元のテキストとして挿入されます。テキスト フィールドの値を変更するため、元の dom は破壊されません。したがって、次回からは値が通常になります。</div>
<p><pre class="brush:js;toolbar:false;"><!doctype html>
<html>
 <head>
  
  <title>test</title>
 </head>
 <body>
    <textarea id="mytext">"\<textarea\>\<"</textarea>
 </body>
</html></pre></p>
<div class="cnblogs_code">[推奨学習：</div>jQuery ビデオ チュートリアル <p>、</p>ウェブ フロントエンド ビデオ <div class="cnblogs_code">]</div>

以上がjqueryのloadメソッドにはどのような欠陥があるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS divコンテンツを非表示にする方法次の記事：CSS divコンテンツを非表示にする方法

続きを見る