Web サイトの場合、ヘッダー、フッター、ユーザー列など、多くのページ間に多数の共有モジュールがあります。バックエンド ビュー エンジンを備えたフレームワークの場合、これらの共有は比較的簡単に抽出できます。たとえば、asp.net mvc には、ビュー テンプレート関数を共有できる統合レイアウトの MasterPage、@Section などの関数があります。しかし、HTML の場合、これらの機能は HTML ファイルでは利用できないため、純粋な HTML ページを使用してアプリケーション Web サイトを作成する場合は、IFrame をネストすることはできますが、これらの繰り返しのタスクに直面する必要があるかもしれません。この実装方法は理想的でもフレンドリーでもありません。
実フィールド解析最近、独自のフレームワークをベースにWebサイトを実装したところ、フレームワークにバックエンドのビューエンジンがないため、このようなトラブルに遭遇しました... まずは実際の状況を見てみましょう。
上記 2 つの HTML ページは、コア部分を除いて独自のものであり、他のデータ ブロックは同じです。バックエンドのビュー エンジンがない場合、それを行うことはどう考えられますか? 最初は、すべての変更を他のページに同期する必要があります。後で知ったのですが、これをやると間違いなく死に至ることになります。しばらく考えた後、解決策を思いつきました。
パブリックテンプレート定義考えてみると、次のように公開テンプレートを HTML ファイル (ファイル名は仮に PublicModule.html とします) に抽出できることがわかりました。
<templates> <template id=header> <div class=navbar-header> <button class=navbar-toggle Collapse type=button data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only>ナビゲーションの切り替え</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=/>.Net ライブラリ</a> </div> <div class=navbar-collapse 崩壊 role=navigation> <div style=マージントップ:15px;マージン左:120px;位置:絶対;><スパンstyle=color:white;padding-top:20px;>XXXXX</span></div> <ul class=nav navbar-nav></ul> <ul class=nav navbar-nav navbar-right> <li> <a href=/Blog.html>ブログ</a></li> <li><a href=https://github.com/IKende/FastHttpApi target=_blank>github.com</a></li> <li><a href=/admin/index.html>ウェブサイト管理</a></li> </ul> </div> </template > <template id=doc_tags_navbar> <div class=container-fluid style=padding:0px;> <ul class=nav navbar-nav btn-group-sm id=tagbar> <li><a style=font-weight:bold;padding-bottom:6px;padding-top:6px; href=/index.html>ホームページ</a></li> <li v-for=item in Data><a v-バインド:タイトル=アイテム.コメントスタイル=フォント-重量:ボールド;パディング-ボトム:6px;パディング-トップ:6px; v-bind:href=['/index.html?tag='+item.ID]>{{item.Title}}</a></li> </ul> </div><!-- / .container-fluid --> <script> var tagbarControl; tagbarControl = new Vue({ el: '#tagbar', data: { Data: [] } }); 非同期関数 ListDocTags() { var result = await $ListDocTags(); </script> </template><templates>;template タグを使用してテンプレート ブロックを定義し、ブロックごとに一意の ID を定義します。学生の中には、テンプレートが有効な HTML タグではないのですが、どのように対処すればよいのかと質問する人もいるかもしれません。適切なテンプレート ブラウザでは処理できませんが、JQuery では処理できます。この時点で、一部の学生は原理を理解していると思います。
HTML でテンプレートを適用するモジュールを定義した後、HTML でそれを参照するにはどうすればよいでしょうか?実際、HTML はそのような関数をサポートしていませんが、JQuery によって解釈されるように HTML のいくつかのカスタム属性を定義できます。ここでは、テンプレート ID を指定するスロット属性を定義します。
<div class=navbar navbar-inverse navbar-fixed-top> <div class=container slot=header> </div> </div> <nav class=navbar navbar-default style=padding:0px;margin:0px;min -height:0px; スロット=doc_tags_navbar> </nav>
テンプレートを定義し、ページの HTML も参照します。次に、それらを統合する必要があります。この時点で、JQuery に精通している友人は何をすべきかを理解したはずです:)
JQueryを使用した統合読み込みJQuery の場合、パブリック モジュール ページをロードして DOM に変換し、要素をページ上で定義されたスロットに置き換えることができます。
function moduleLoad(url) { $.get(url, function (result) { var html = $(result); var __templates = html; $([slot]).each(function () { var id = $(this) .attr('slot'); var body = $(__templates).find('#' + id).html(); }); });}$(document).ready(function () { moduleLoad(/PublicModule.html);});コードはシンプルで効果的です。スクリプト全体をファイルに保存し、ページに追加すると、自動的に読み込まれます。
読み込み速度の問題一度にロードできる HTML ページには Ajax のロードが必要になりますか? ロードが遅くなることはありませんか?実際、パブリック モジュールの HTML ページにローカル キャッシュ戦略を使用すると、モジュールのロード時にすべてのページをローカルから直接フェッチできるようになります。これは、パブリック部分が抽出されるため、関連するページの蓄積が小さくなり、読み込み速度が速くなります。
純粋な HTML/JS フロントエンド開発の利点に基づくサーバーサイドのビューエンジンの使用に慣れている人にとって、HTML/JS フロントエンド開発モデルを完全に使用するのは少し難しいかもしれません。しかし、完全に HTML/JS に基づいたフロントエンド開発には明らかな利点があり、ビュー処理にはサービスの解釈が必要ないため、HTML はより適切にローカライズされたキャッシュを実行でき、現在、これを可能にする HTML/JS フレームワークが多数あります。あなたが書くほうが簡単でシンプルです。
要約する上記は、従来の HTML ページのモジュール読み込みを実装するためにエディターが紹介した方法です。ご質問があれば、メッセージを残してください。すぐにエディターが返信します。