4

社内の開発者が社内 Web アプリの構築に使用するフロントエンド UI フレームワークを構築しています。カスタマイズされた Bootstrap、jQuery、その他のオープンソース ライブラリ、内部モジュール、およびスタイルシートで構成されています。ユーザー環境は完全に IE9 で、私のサーバーは .NET 3.5 です。私は共有ファイルをホストしています。会社の開発チームは、プロジェクト ページにリンクを配置し、フレームワークをページに適用します。

これを実装する最も簡単な方法を提供したいと思います。これは、1 行のコードを貼り付けてライブラリを構築するものです。Ctrl+Vが押された瞬間に 30 行のコードをカット アンド ペーストするのは古くなっています。

失敗した実験

スクリプトを挿入するためのベスト プラクティスを使用するHead.js とLazyLoadを使用してみました。しかし、それらのそれぞれが、スタイルを適用する前にコンテンツを表示したり、スクリプトがロードされる前にメソッドが呼び出される状況を引き起こしたりしました。私はこのアプローチをあきらめています。不安定すぎる。

シンプルな document.write() ソリューション

週末にかけて、「framework,js」という名前の js ファイルを作成し、スクリプトとリンク ファイルを document.write() 行のスタックで順番に追加してみませんか？開発者にそれを頭に入れるように伝えてください。それだけです。IE9 とモバイルに必要なメタタグを追加することもできます。それはとても厄介でシンプルです...しかし、それはうまくいくかもしれません!

ユーザーベースは内部ネットワーク上にあり、サイズは限られています。帯域幅は問題ありません。これを選択する前に、パフォーマンスをテストします。リンクを配置する場所を開発者チームに指示できます。

これを知っていて実際に機能することを提供すると、これを行うべきではない理由はありますか?

調査する他の唯一のオプションは、サーバーでのバンドルです。私は自分でサーバーを所有しておらず、.NET 開発者でもないので、これに頼る必要がないことを望んでいます。

4

1 に答える 1

5

あなたが提案したアプローチは、あなたの状況に最適です。これには、より洗練されたソリューションに勝るいくつかの利点があります。たとえば、完全に単純であること、完全に予測可能な実行順序、非同期読み込みに向いていないスクリプトとの完全な互換性などです。私は、他の多くの開発者と同様に、本番アプリケーションで何度も使用してきました。

もちろん、他のソリューションにも利点がありますが、あなたがしていることには、古き良きものに何の問題もありませんdocument.write()。

多数のスクリプトとスタイルシートがあり、おそらくそれらを共通のディレクトリ (または共通のルート ディレクトリ) からロードしているようです。ファイル内の繰り返しを減らすために、CSS 用のタグを記述する関数と JavaScript 用のタグframework.jsを記述する関数の 2 つの関数を定義することをお勧めします。したがって、スケルトンファイルは次のようになります。<link><script>framework.js

(function() {
    var scriptBase = 'js/';
    var styleBase = 'css/';

    function writeStyle( name ) {
        document.write(
            '<link rel="stylesheet" href="', styleBase, name, '">',
            '</link>'
        );
    }

    function writeScript( name ) {
        document.write(
            '<script src="', scriptBase, name, '">',
            '</script>'
        );
    }

    writeStyle( 'one.css' );
    writeStyle( 'two.css' );

    writeScript( 'one.js' );
    writeScript( 'two.js' );
})();

</script>を使用するコードで見られるように、テキストの特別なエスケープを行う必要はないことに注意してくださいdocument.write()。<script>これは、このコードをHTML ファイル内のタグ内に直接配置する場合にのみ必要です。そのエスケープの目的は、囲んで<script>いるタグが呼び出し</script>内のテキストによって閉じられないようにすることです。document.write()コードは外部.jsファイルにあるため、これは問題ではありません。</script>このファイル内にテキストが存在しても、ファイルは終了しません.js。

留意すべきもう 1 つの点はdocument.write()、ファイル内で行うすべての呼び出しは、それらを書き込むファイルの後に.jsドキュメントに挿入されるということです。そのため、内部を実行して、作成したばかりのファイルに依存する他のコードを内部に含めることができるとは思わないでください。これらのファイル (および) はすべて の後にロードされ、インターリーブされません。.jsdocument.write()framework.js framework.js.js.js.cssframework.js

もちろん、もう1つの考慮事項はロード時間です。CSS ファイルと JS ファイルを組み合わせて縮小すると、ページの読み込みが速くなる可能性があります。しかし、これらが内部 Web アプリケーションである場合、ページの読み込み時間はほとんど問題にならないかもしれません。信頼性と保守性の方が重要かもしれません。いずれにせよ、いつでもdocument.write()ソリューションを使用してすぐに起動して実行し、後で必要になる可能性が低い場合にのみ最適化することができます。

于 2013-08-05T06:36:40.710 に答える