2009-05-20 7 views
8

私は6ヶ月間ASP.NET MVCを使用していて、これらのマイクロソフトのユーザーが作成したNerd Dinnerの例をチェックしています。 AJAXを夕食にしてAJAXを有効にしたときに気付いたことの1つは、RSVPingに使用されているユーザコントロールのJavaScriptリファレンスが置かれていることです。
(FILE:RSVPStatus.ascx)ユーザーコントロールでJavaScriptライブラリをリンクする

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Models.Dinner>" %> 

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>  

私はログオン認証のように、他の場所でこれらの同じライブラリを使用されるだろう本当に良いチャンスがあるので、これは、私に権利いないようです。さらに、スクリプトのバージョンを変更すると、ライブラリへの参照をすべて削除する必要があります。

私は自分の思考が正しいのか、これらの参照が実際にマスターページのようなより中央の場所にあるのかと尋ねます。

この場合のベストプラクティスとプロとそれがある場合はどうなるかを教えてください。

+1

を要求したとして、部分的に1回だけ使用します。私が2度それを使ったら、私はそれを動かすだろう。私が複数回使用していない場合は、複数使用のためにビルドする必要はありません。 –

+1

@Scott、どこに移動しますか?私はそれが本当にここの質問だと思います。すべてのビューページでそれらを必要としない場合は、それらをマスターページに含めるのは無駄です。 –

答えて

7

私は間違いのためのパーシャルの内側にそれらを置くことに対して助言しますまさにあなたが言及する理由。あるビューが同じjsファイルへの参照を持っている2つの部分集合を引っ張る可能性が高くなります。また、残りのhtmlをロードする前にjsをロードすることでパフォーマンスが低下しました。

ベストプラクティスについてはわかりませんが、マスターページ内に共通のjsファイルを含めてから、特定のまたは少数のビューに固有のいくつかの追加のjsファイル用に個別のContentPlaceHolderを定義します。

ここに、マスターページの例があります。それはかなり自明です。

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> 
<head runat="server"> 
    ... BLAH ... 
    <asp:ContentPlaceHolder ID="AdditionalHead" runat="server" /> 
    ... BLAH ... 
    <%= Html.CSSBlock("/styles/site.css") %> 
    <%= Html.CSSBlock("/styles/ie6.css", 6) %> 
    <%= Html.CSSBlock("/styles/ie7.css", 7) %> 
    <asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" /> 
</head> 
<body> 
    ... BLAH ... 
    <%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %> 
    <%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %> 
    <asp:ContentPlaceHolder ID="AdditionalJS" runat="server" /> 
</body> 

Html.CSSBlock & Html.JSBlock明らかに私自身の拡張ですが、再び、彼らは何をすべきかで自明です。

はその後SignUp.aspxビュー言うに私は

<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server"> 
    <%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %> 
</asp:Content> 

HTHS、 チャールズ

Psのを持っているでしょう。私はAndrewに、マスターページ内に直接定義されている共通のJSを連結して縮小する必要があると言っていることに同意します。

EDIT: .JSBlockの私の実装(a、b)は、私がいたので、私はそこに入れ

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName) 
{ 
    return html.JSBlock(fileName, string.Empty); 
} 

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName, string releaseFileName) 
{ 
    if (string.IsNullOrEmpty(fileName)) 
     throw new ArgumentNullException("fileName"); 

    string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", 
           html.MEDebugReleaseString(fileName, releaseFileName)); 

    return MvcHtmlString.Create(jsTag); 
} 

そして魔法が起こる...

public static MvcHtmlString MEDebugReleaseString(this HtmlHelper html, string debugString, string releaseString) 
    { 
     string toReturn = debugString; 
#if DEBUG 
#else 
     if (!string.IsNullOrEmpty(releaseString)) 
      toReturn = releaseString; 
#endif 
     return MvcHtmlString.Create(toReturn); 
    } 
+0

偉大な、応答に感謝、ASP.NET MVC世界でjsファイルを最小化するための良いアプローチは何ですか? – Brettski

+0

良い質問...私は現時点では少し怠惰で、私はすべてのjsを縮小するビルドの一部としてバットファイルを実行します。 jsmin.exeはhttp://www.crockford.com/javascript/jsmin.htmlにあります。そこにはC#コードもありますので、独自のミニアプリケーションを動かすことができます。私は誰でもどのように連結し、そして/またはそれらをオンザフライでビルド時に縮小するかについて聞いてみたいと思うでしょう。 – Charlino

+0

私は、JS(&CSS)ファイルを連結したり縮小したりするのに良いアプローチであることを答えるために別の質問を開いたばかりです - http://stackoverflow.com/questions/890561/concatenate-minify-js-on-the-fly- or-at-build-time-asp-net-mvc – Charlino

0

私のウェブサイトwww.trailbehind.comには、すべてのページに属する一連のjavascriptファイルがあります。そしていくつかのページには追加のライブラリが含まれています。

すべてのページで使用されているJSファイル(数十のファイルがあります)については、連結してビルド時にそれらを縮小します。

設定ファイルには、連結されたjavascriptを使用するかビルド時に別のファイルを使用するかのフラグがあります。これは、開発者のjavascriptをデバッグできるようにするためには重要ですが、本番環境では小さな単一ファイルのjavascriptを使用してください。ここで

は、私たちのPythonコードを組み合わせて縮小化することです。

 
import os 
import thetrailbehind.lib.jsmin as jsmin 

JS_FILES = [ 'lib/json2.js', 
       'lib/markermanager.js', 
       'lib/labeledmarker.js', 
       'lib/rsh/rsh.js', 
       'lib/showdown.js', 
       'lib/yui.js', 
       'lib/dragzoom.js', 
       'gen/attribute_data.js', 
       'gen/national-parks.js', 
       'Widgets/CommentsWidget.js', 
       'Widgets/Search.js', 
       'Widgets/MenuWidget.js', 
       'Widgets/PhotoWidget.js', 
       'Widgets/ReportList.js', 
       'Widgets/help.js', 
       'attributes.js', 
       'rsh.js', 
       'map.js', 
       'mapcontrols.js', 
       'markers.js', 
       'amazon.js', 
       'plan_trip.js', 
       'init.js',] 


def concat(files, base_path, all_file, all_file_min): 
    if os.path.exists(base_path + all_file): 
    lasttime = os.path.getmtime(base_path + all_file) 
    else: 
    lasttime = 0 
    out_of_date = False 
    for file in files: 
    if os.path.getmtime(base_path + file) > lasttime: 
     out_of_date = True 
     break 
    if out_of_date: 
    outfile = open(base_path + all_file, 'w') 
    for file in files: 
     outfile.write(open(base_path + file).read()) 
     outfile.write("\n") 
    outfile.close() 

    alljs = open(base_path + all_file) 
    allminjs = open(base_path + all_file_min, "w+") 
    jsmin.JavascriptMinify().minify(alljs, allminjs) 
    alljs.close() 
    allminjs.close() 



def main(): 
    concat(JS_FILES, '/home/wibge/thetrailbehind/media/javascript/', 'gen/all.js', 'gen/all.min.js') 


if __name__ == "__main__": 
    main() 

そしてここでは、私たちが切り替わりジャンゴ/ HTMLテンプレートです:

 
{% if use_all_js %} 
    script type=text/javascript src=/site_media/javascript/gen/all.min.js> 
{% else %} 
    script type="text/javascript" src="/site_media/javascript/rsh.js"> 
    script type="text/javascript" src="/site_media/javascript/amazon.js"> 
    script type="text/javascript" src="/site_media/javascript/map.js"> 
    A BUNCH OF SEPARATE INCLUDES...etc 
{% endif %} 
関連する問題