3

私はMVCプロジェクトのJavaScriptコードを管理するための最良の方法を見つけようとしています。私のサイトのいくつかのページは、ページのワークフローのために、ユーザーインターフェイス用のjavascriptで非常に重いです。

開発とデバッグを容易にするために、すべてのjavascriptを4つの.jsファイルに分割します。このファイルにInitializations.jsは、あらゆる形式のjquery制御とフィールドの初期化を処理するDataRetrieval.jsすべての機能があり、ajaxを介してデータを取得および表示するすべての機能がDataModification.jsあります。 ajaxを介してサーバーにデータ変更を送信するためのすべての関数。これらのUtilities.js関数には役立つユーティリティ関数があります。

このように構造化することで、関数の機能に基づいて特定の関数がどのファイルに含まれているかがわかるだけでなく、JavaScriptファイルを小さく保つことができるという点で開発作業に役立ちました。また、Chromeのデバッガーからスクリプトを直接表示し、どのファイルを選択して、デバッグする必要のある関数を簡単に見つけることができるため、デバッグにも役立ちます。私が読んでいることから、ほとんどのブラウザは複数の.jsファイルを同時にダウンロードできるため、ページの読み込みが速くなるため、これも役立ちます。これにより、後で縮小することも簡単になります。

私が気付いている問題は、.jsファイルを使用すると、ビューではないため、C＃コードを埋め込むことができないことです。つまり、すべてのURLにマジックストリングが必要であり（したがって、後でルートを変更する場合は、すべてのURLを手動で変更する必要があります）、C＃で設定した定数を使用して、すべてを全面的に管理できるようにすることはできません（プロジェクトが非公開であることを意味する整数などの定数を変更すると、JavaScriptファイル内のすべての参照を検索して手動で変更する必要があり、バグが発生する可能性があります）。

今私が考えた1つの可能性は、JavaScriptファイルを部分的なビューに変換することです。ただし、これでも、ページのソースコードにjavascriptが散らばっているため、Webブラウザでのページのデバッグはかなり複雑になります。これにより、後でjavascriptを縮小することも困難になります。

では、JavaScriptを管理し、サイトのc＃/ MVC部分と一致させ、変更が必要なときにDRYに違反する必要がないようにするために、他にどのような戦略を使用できますか？

私のサイトのWebアプリケーションの部分はまだ開発が進んでいるので、作成するJavaScriptはまだまだたくさんあります。そして、物事が手に負えなくなる前に、戦略を立てたいと思っています。

4

4 に答える 4

0

JSをそのままの構造に保ちますが、マジックストリングを使用する代わりに、重要なものを渡します。

可能な限り最小限のデータをJSに渡し、Site.Masterで使用するHTMLヘルパーを作成します。たとえば、これは非常に単純化された例です。

public MvcHtmlString ScriptData(this HtmlHelper helper)
{
    var scriptData = "window.Routing.ImportantRoute = '" + Url.Action("ActionName", "ControllerName") + "'; ";
    // etc.
    return MvcHtmlString.Create("<script type = 'text/javascript'>" + scriptData + "</script>");
}

このテクニックは、通過する量を制限する傾向があるので便利です。

于 2010-07-28T14:00:17.997 に答える
0

Pithyというアプリケーションをチェックアウトする必要があります：http：//github.com/clearwavebuild/Pithy

私はMVCアプリケーションでそれをかなり排他的に使用しています。以下のようにマスターPithy.jsファイルを作成します。

 "print.css": [
    "~/static/css/print.css"
],

"login-page.css": [
    "~/static/css/pages/page_login.css"
],

"login-page.js": [
    "~/static/js/pages/cw.page-login.js"
],

"changePassword-page.css": [
    "~/static/css/pages/page_changepassword.css"
],

"changePassword-page.js": [
    "~/static/js/pages/page-changepassword.js"
],

"encounter-list.css": [
    "~/static/css/encounter-list/encounter-list.print.css",
    "~/static/css/encounter-list/encounter-list.table.css"
],

次に、C＃ビューで、次のように呼び出すことができます。

    <%= Pithy.Javascript.Render("changePassword-page.js") %>

これにより、対応するすべてのJSファイルがそのタグとともに読み込まれ、縮小および圧縮されます。

必要なファイルにC＃変数を取り込む限り、部分ビューを使用しますが、部分ビューにはC＃からの変数宣言しかなく、通常のJSファイルはそれらの変数を参照します。

例えば：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script type="text/javascript">
    var BehaviorReduction = {

};

BehaviorReduction.loadingImage = "<%= Url.Content(Links.Static.img.ajax_loader_gif) %>";
BehaviorReduction.behaviorOverviewUrl =  "<%=Url.Action(MVC.BehaviorReduction.RenderBehaviorOverview()) %>";
BehaviorReduction.addNewBehaviorUrl = "<%=Url.Action(MVC.BehaviorReduction.AddNewBehavior()) %>";
</script>

それで：

<asp:Content runat="server" ID="Content3" ContentPlaceHolderID="JavaScript">
    <% Html.RenderPartial(MVC.BehaviorReduction.Views.BehaviorReductionJavascript);%>
    <%= Pithy.Javascript.Render("BehaviorReduction.js")%>
</asp:Content>

このプロセス全体により、JavaScriptの管理が非常に簡単になりました。本番リリースではクリーンで縮小化され、圧縮されたままであり、開発中はファイルが決してキャッシュされないようにすることができるため、頭痛の種を減らすことができます。

于 2010-07-29T04:27:10.680 に答える
0

最後に、コメント（この投稿）でUvitaによってリンクされたソリューションを使用します。これまでのところ、うまく機能しているようですが、ミニファイを実行できるだけでなく、ビューを整理するのと同じ方法でJavaScriptを簡単に整理することができます。全体として、アセット管理と私のjavascriptファイルへのMVC統合の両方にとって最もクリーンな方法のようです。

于 2010-07-29T12:40:25.390 に答える
-1

私がやったこと、そしてそれは最善の方法ではないかもしれませんが、それは私にとってはうまくいきます、私はアセットマネージャーを使用しています。宣伝しようとはしていませんが、MVC製品でTelerikのWebAssetManagerを使用しています。私が過去に使用したオープンソースのアセットマネージャーがあり、これも機能する可能性があります。

http://weblogs.asp.net/rashid/archive/2009/05/02/script-and-css-management-in-asp-net-mvc-part-2.aspx

これで、アセットを次のように構成します。

Assets\
        Scripts\
                 Shared\  <--Jquery etc
                 ControllerName\
                                ViewName\

        Css\
            CssStuffGoesHere.css

マスターページとビューは、それらを機能させるために必要なJavaScriptファイルを指定し、アセットマネージャーはそれらをすべてまとめて、キャッシュ用のバージョンと組み合わせます。私が言ったように、それが完璧かどうかはわかりませんが、それは物事をかなり簡単にします。

jsファイル内の動的変数に関する限り。〜\ Scripts \ Dynamic.jsを指すルートを宣言するだけで、必要なJavaScriptに動的変数を挿入できます。

于 2010-07-28T14:07:17.450 に答える