1

サーバー側インクルード システムを使用して、モジュール方式で Web サイトを整理しようとしています。アイデアは、すべてのモジュールに独自の css と独自の javascript があり、ページに含まれている場合にのみ読み込まれるというものです。そのため、モジュールを持たないページは css/js モジュールも読み込まれません。

私はこのようにしました：

header.html
-----------

<!-- header start -->
<link rel="stylesheet" href="css/header.css">
<header class="module-header">
    <div class="links">
       links...
    </div>
</header>
<script src="js/header.js"></script>
<!-- header end -->


footer.html
-----------

<!-- footer start -->
<link rel="stylesheet" href="css/footer.css">
<header class="module-footer">
    <div class="links">
       links...
    </div>
</header>
<script src="js/footer.js"></script>
<!-- footer end -->

次にindex.htmlで：

<!DOCTYPE html>
    <head>
        <title>Modular page</title>
    </head>

    <body>
        <!--#include virtual="html/header.html" -->
        <!--#include virtual="html/footer.html" -->
    </body>
</html>

これは正常に機能し、各モジュールの後にスクリプトがロードされるため、スクリプトを実行する前にコンテンツが存在することが保証されます。Css は直前に読み込まれ、適切なレイアウトになるようにします。

ただし、ソリューションでいくつかの問題が発生しました。

  1. たとえばproduct.htmlのようにモジュールを数回含める場合、これは20回繰り返されます-cssおよびjsファイルも20回含まれます。良くない。
  2. 一般的に、css が head タグに含まれ、js が body の最後に含まれているのを見てきました。ドキュメントが構築されているときにそれらすべてが来ると、問題が発生しますか?

これらのインクルードは、任意のインクルード、php、asp、または jsp と交換できます...これは Apache SSI を使用しています。

アイデア全体が間違った方向に進んでいますか? 私はこれを開発セットアップ用に想像しますが、ページをロードするある種のスマートな nodejs rhino スクリプトを持っています - ロードされたスクリプトと css を見つけ、連結して縮小し、本番用の単一のインクルードとして追加します。

4

2 に答える 2

0

JavaScript モジュール システムを使用します。Javascript AMD モジュールは、javascript を段階的にロードする必要があるため、非常に優れたオプションです。requirejs.orgは、開始するのに非常に適した場所です。

あなたの文脈での使用のために

//inside header.html
require(['header.js'], function(){
   //call this require() multiple times it will load the javascript only once.

   //user header.js ... once this line is require() line is executed the
   //header.js will be loaded forever

});

フッター

//inside footer.html
require(['footer.js'], function(){
   //call this require() multiple times it will load the javascript only once.

   //user header.js ... once this line is require() line is executed the
   //header.js will be loaded forever

});

ここで、CSS をモジュール方式でロードするという問題が発生します。Requirejs CSS プラグインも利用できます。

この種のシステムを使い始めると、JavaScript を使用してスクリプトの読み込みが非同期に行われます。そのため、スクリプトは画面に少し遅れて表示されます。CSSでさえ少し遅れて到着します。そのため、 のようなグローバル イベント ハンドラを作成しているwindow.onload= func(){}場合、ほとんどの JavaScript がまだロードされていないため、これらは失敗します。動的に読み込まれた CSS の上でスタイリングを行う場合、CSS の読み込みが完了した後に行う必要があります。requirejs で !DomReader を使用することは良いオプションです。いつか、これらについて詳しく説明するブログを書きます。

ミニファイのスマートさは、requirejs にもあります。requirejs オプティマイザー

于 2013-12-09T02:51:28.580 に答える