0

Javascript を使用して 2 番目の論理構造を作成するにはどうすればよいですか。

ウェブページであり、読み込み中 (DOM はまだ完全に準備ができていません) に javascipt コードを実行しています。

<script>
if(window.innerWidth>900){

 /* show huge HTML with javascript stuff here */

} else {

 /* show huge HTML with javascript stuff here */

}
</script>

PHP 言語の 2 番目のコード例と同様のものが必要です。

<? if(true){ ?>
/* show huge HTML with javascript stuff here */
<? } else { ?>
/* show huge HTML with javascript stuff here */
<? } ?>

ページの読み込み時にウィンドウ幅を初期化する際に、HTML を使用して異なる JavaScript コードを使用する可能性が必要です。

4

3 に答える 3

1

それはJSの仕組みではありません。もちろん、ここで html をインラインで印刷することもできますが、これではコードがめちゃくちゃになります。私はこれを強く思いとどまらせます。この種のテンプレート機能が必要な場合は、何らかのテンプレート エンジンを使用することをお勧めします。

たとえば、JS を含む個別の html テンプレートを作成できる EJS があります。基本的に、テンプレートをロードし、それにデータを渡し、html をレンダリングして DOM ツリーに挿入します。これにより、コードをきれいに保つことができます。

http://embeddedjs.com/

于 2012-12-12T08:46:10.570 に答える
1

残念ながら、Vanilla Javascript はこの種のテンプレート機能を提供しません。ただし、この目的のために存在する多くのライブラリがあります。リンクについては、このページを参照してください。

于 2012-12-12T08:28:24.370 に答える
0

私の直感に従って、画面/ウィンドウサイズに基づいてページをテンプレート化することをお勧めします。画面の大きさに基づいて異なるレイアウトを表示しています...そしてこれを「動的」にしたい（私はその言葉が嫌いです）、つまりリアルタイムで更新されます。

これは一般に「レスポンシブデザイン」と呼ばれ、多少異なる方法で行われます。さまざまなウィンドウサイズに固有のさまざまなCSSスタイルシートに（可能な場合のみ）依存します。画面サイズXにはスタイルシートAを使用し、画面サイズYにはスタイルシートBを使用します。

これは、メディアクエリを使用して実現されます。

もちろん、これにはクリーンでセマンティックなHTMLコードが必要です（テーブルレイアウトなどはありません）。

レスポンシブデザインを使用するサイトの例： リンク（これらのサイトにアクセスして、ブラウザーウィンドウのサイズを変更します）

于 2012-12-12T09:03:35.057 に答える