2009-03-24 16 views
4

asp.netプロジェクトで.jsファイルと.cssファイルをすべて管理するにはどうすればいいですか?特に彼らはお互いの間に多くの依存関係がありますか?javascriptとcssファイルを処理するベストプラクティス

私はすべてのスクリプトを1つにまとめました。しかし、それは重くなっており、90%は特定のページで使用されていませんでした。私が望むのは、このページに必要なJSとCSSだけをページに含めるのに役立つ、すべてのスクリプト、単純な依存関係管理を管理する手段または指針です。

また、ScriptManager nutを使用すると、多くのコントロールを使用すると非常に便利です。おそらく私は間違った方法で使用しています。

答えて

0

私は自分のJSファイルをその機能に基づいて分割することを好みます。たとえば、すべてのAJAXベースの対話用に1つのJSファイルを持つことができます。すべての検証用に1つ、JSライブラリ全体を共通にする共通のJSライブラリウェブアプリケーション。 JSスクリプト全体を1つのファイルにまとめる単一のファイルを持つことは、たとえ小さな部分だけが関連していても、各ページがファイル全体をロードするため、アプリケーションを確実に遅くします。

CSSファイルの場合、アプリケーション全体で使用可能な一般的なスタイルを含む単一の共通スタイルシートを使用することをお勧めします。非常に特定のレイアウト構造を持つページ用の個別のCSSファイルを作成することもできます。

この依存関係を自動的に処理できるツールはありませんが、関数ごとにファイルを分割すると、ほとんどの場合不要になります。

+0

jQuery用にいくつかのプラグインを使用している場合はどうすればよいですか? – AlfeG

+0

パフォーマンス面では、単一のJSファイルを作成する方がはるかに優れています。ブラウザは最初の読み込み時にファイルをキャッシュするので、サイズはいくらか重要ではありません。ファイルを分割することでアプリの処理速度を落としているのは、各ファイルにクライアント/サーバーのラウンドトリップが必要で、通常はHTTP 304を取得するだけなので、この処理を遅らせることになります。 – Bryan

+0

はい、わかりました。しかし時々それらのファイルは非常に大きくなる...とにかく答えのおかげで。私は今日、正解をマークします。 – AlfeG

2

私たちのプロジェクトでは、スクリプトとCSSをクラスのリソースとしてタグ付けし、通常はPreRender()でページのライフサイクル中に登録します。例えば

// Css 
[assembly: WebResource("Assembly.Class.MyClass.css", "text/css")] 
// Javascript 
[assembly: WebResource("Assembly.Class.MyClass.js", "text/javascript")] 
namespace OurNamespace 
{ 
    public class MyClass... 

私たちは、その後、埋め込みリソースであることを私たちのスクリプトやCSSファイルのそれぞれのプロパティを設定します。

このアプローチを使用すると、スクリプトを個別のUIコンポーネントに分けて保存することができます。同じリソースを複数のクラスに登録すると、ScriptManagerは適切なリソースがページに表示されるようにします。

次に、すべてのCSSリソースを1つのファイルに圧縮してストリームアウトするHTTPハンドラレベルで、IE6用の32個のCSSファイル制限に達していないことを確認するクラスを作成しました。また、javascriptの出力を最適化するために、スクリプトから空白、コメントなどを取り除きます。

1

これは私が通常それを行う方法です:

CSS:最初は5ファイルです。 reset.css(YUIから)、structure.css、general.css(枠線、背景、Z-インデックスなど)、typography.css、base.cssの4つのCSSファイルをインポートします。

Javascript:私が行ったことは、ASP.NETのアイデアの背後にあるコードを採用して、名前付けに関してJSファイルに適用したものです。例:home.aspxのページ固有のJSファイルは、home.aspx.jsと呼ばれます。次に、プラグインまたは機能に基づくJSファイルと、すべてのグローバル変数を含むcommon.jsファイルを別々に用意します。

これはみんなのお茶の杯ではないかもしれませんが、あなたにいくつかのアイデアがあることを願っています!

+0

私はこのメソッドが好きです。これまでの私が作業していたプロジェクトでは、さらに一歩進んで、ページごとに「スクリプトビハインド」を自動的に発行するPageクラスを実装しました。 – Bryan

+0

5つのCSSファイル?すべてのページ(それを使用する)の外部JS?これは大量のHTTPリクエストです。 –

+0

はい、これはTyですが、これは開発者向けです。 jsとcssを1つのファイルにまとめて展開するビルドプロセスがあります –

0

JSファイルを機能別に分割します。ほとんどどこでも使用され、一つのファイルに行く

ほとんどの一般的な機能、

他のクラスとメソッドは、自分のファイルになります。

Cssの場合、サイト全体で共通のファイルが1つあります。

他のセクションと視覚的に異なるセクションがある場合は、セクションごとに別々のCSSファイルを作成します。また、私はタブ付きdivコントロールを持って、それは別のCSSファイルがあります。私はファイルを混在させません。

コンポーネントの場合、埋め込みリソースは見た目がよくなりますが、JSファイルのデプロイのみでバグを修正するとよい場合もあります。

関連する問題