Mit java-script-code in MVC5 - wohin damit

Den Ansatz habe ich schon geschrieben, unten ist meine Art der Gewinnung von JavaScript vollständig von Ihrem Blick.

• besser zu pflegen (js-Probleme - > schau in js-Dateien und nicht in views)
• modularen Ansatz
• klare Trennung
• besser zu verstehen, die durch design

In HTML5, verwenden Sie die data Attribut zu übergeben Variablen aus der Model.
Dies hilft enorm bei der Portierung Variablen von MVC (der viewmodel) zu javascript.
Dies erlaubt Ihnen auch, halten Sie javaScript in separate Dateien abgelegt, als würde man wahrscheinlich wie in einer MVC-Umgebung.

1.1 Bindung c# , HTML

<div class="news" data-js-params="[email protected]()&amp;languageName=@languageName&amp;page=0&amp;[email protected]">

1.2 JS-Helper-Funktionen zum umwandeln von Daten in Objekt-literalen

Obwohl gebaut, auf jQuery, die ich geschrieben habe 2 kleine Funktionen, die helfen kann, die Portierung querystring-Variablen in objektliteralen und zurück. Diese benutze ich in meinem ganzen js Dateien:

//@param (qs): a query string of key value pairs (without ?)
//@param (keyDelimiter): string : character between values and keys
//@param (valDelimiter): string : character between keys and values
//@return (obj): an object literal
//@example: key1=val1&key2=val2&key3=val3
convertQsToLiteral: function (qs, keyDelimiter, valDelimiter) {
    var arrParams, obj = {};

    if (qs && qs.length) {
        keyDelimiter = keyDelimiter || '&';
        valDelimiter = valDelimiter || '=';
        arrParams = qs.split(keyDelimiter);

        $.each(arrParams, function (i, pair) {
            var arrPair = pair.split(valDelimiter),
                key = arrPair[0],
                val = arrPair[1];
             obj[key] = val;
        });
    }
    return obj;
},

//@param (literal): an object literal key value paired of one level deep
//@param (keyDelimiter): string  character between values and keys
//@param (valDelimiter): string : character between keys and values
//@return (string): array string representation
//@example: { key1: val1, key2: val2, key3: val3 }
convertLiteralToQs: function (literal, keyDelimiter, valDelimiter) {
    var arrQs = [],
        arrPairs, key;

    keyDelimiter = keyDelimiter || '&';
    valDelimiter = valDelimiter || '=';

    for (key in literal) {
        if (literal.hasOwnProperty(key)) {
            arrPairs = [];
            arrPairs.push(key, literal[key]);
            arrQs.push(arrPairs.join(valDelimiter));
        }
    }

    return arrQs.join(keyDelimiter);
},

1.3 Konvertieren von HTML-Daten in js-Objekt-Literale

Mit diesen Funktionen im Hinterkopf können Sie übergeben, query-string, wie Variablen in ein Objekt-literal.

var dataParams = convertQsToLiteral($('.news').data('js-params')); //get data attr
var urlParams = convertQsToLiteral(window.location.search.substr(1)); //get url query string

1.4 Beispiel: JS modularer Aufbau erweitern und überschreiben von object-literalen

Kombiniert mit jQuery $.extend() - Funktion können Sie jetzt überschreiben, javascript-Objekte in einem modularen Ansatz (unter Berücksichtigung aller Verschlüsse eine js-Datei/Modul sieht wie folgt aus):

window.ProjectName = (function($, projectname){
    //default object literal
    var cfg = {
        //your default options
        idea: 'great'
    };

    //@param (options): something like the cfg object
    projectname.Module = function (options) {

        this.settings = $.extend(true, {}, cfg, options); //deep copy
        this.init();

    };

    projectname.Module.prototype = {
        init: function(){
            this.idea = this.settings.idea;
            console.log(this.idea);
        }
    };

    return projectname;
}(window.jQuery, window.ProjectName));

1.5 Initialisieren eines js-Modul

var module = new ProjectName.Module({ idea: 'even better' });

2.1 Hinzufügen von Skripten/css-zu Ihren Ansichten

Haben Sie ein paar Optionen für die Zuweisung von Skripts zu Ihren Ansichten/Seiten/Blöcke:

• Abschnitt definiert, in dem baselayout (nur für die teilweise den Blick, direkt in den baselayout)
• c# ClientResources (nicht der beste Ansatz in MVC, aber immer noch machbar, können Sie externe Dateien in eine teilweise Ansicht -> Ansicht im Stadtplan)
• bundles (gut oder Verkleinerung und modularen Ansatz)

2.2.1 baselayout-setup für die Abschnitte

@RenderSection("AdditionalJS", false)

2.2.2 Nutzung Teilansicht

@section AdditionalJS
{
    <script>
        var module = new ProjectName.Module({ idea: @Model.idea });
    </script>
}

2.3.1 baselayout-setup-Ansicht in der Ansicht

@Html.Raw(Html.RequiredClientResources(RenderingTags.Header))

2.3.2 Verwendung Ansicht anzeigen

ClientResources.RequireScript("/Design/js/projectname.module.js").AtHeader();

2.4.1 BundleConfig setup-Skripts

///<summary>
///Register the Javascript bundles
///Separated in libJs, projectJs and polyfillJs
///</summary>
///<param name="bundles"></param>
private static void RegisterScripts(BundleCollection bundles)
{
    //usage for libraries
    bundles.Add(new ScriptBundle(
            "~/bundles/libJs").Include(
            "~/Design/js/lib/*.js"
    ));

    //project object
    bundles.Add(new ScriptBundle(
            "~/bundles/projectJs").Include(
            "~/Design/js/project.dev.js",
            "~/Design/js/classes/*.js",
            "~/Design/js/components/*.js"
    ));

    //usage for browser support
    bundles.Add(new ScriptBundle(
            "~/bundles/polyfillJs").Include(
            "~/Design/js/polyfills/*.js"
    ));
}

///<summary>
///Render scripts inside conditional comments
///http://stackoverflow.com/questions/12865939/mvc4-bundling-minification-with-ie-conditional-comments
///</summary>
///<param name="ie"></param>
///<param name="paths"></param>
///<returns></returns>
public static IHtmlString RenderConditionalScripts(string ie, params string[] paths)
{
    var tag = string.Format("<!--[if {0}]>{1}<![endif]-->", ie, Scripts.Render(paths));
    return new MvcHtmlString(tag);
}

2.4.2 baselayout-setup

...
<head>
    ...
    @BundleConfig.RenderConditionalScripts("lte IE 9", "~/bundles/polyfillJs")
    @Scripts.Render("~/bundles/libJs")
<head>
<body>
    ...
    @Scripts.Render("~/bundles/projectJs")        
</body>

InformationsquelleAutor Tim Vermaelen

Wenn Sie haben, und HTML 5-Vorlage ist es eigentlich egal ist, wo Sie platzieren den JavaScript-code, Wenn Sie haver eine XHTML-Vorlage, die Sie sollten Ihren code innerhalb der <head></head> tags.

Nun mit den besten Praktiken, jetzt die beste Vorgehensweise ist, um alle Ihre JS-code direkt vor Ihre </body> schließenden tag. Auf diese Weise stellen Sie sicher, dass Ihre html-Elemente, - tags wurden Parsen durch den browser.

Wenn man in einer Produktionsumgebung das beste ist, zu verketten alle Ihre JS in einer einzigen .js-Datei und dann haben Sie es verkleinern, so würde man eine nur kleine js-Datei, die den client-browser abrufen muss.

Verkleinern Ihres Codes

Den Begriff minifizieren in frontend-code (css/js) steht für einen Prozess, wo Sie schneiden Sie alle Ihre Leerzeichen und Zeilenumbrüche, und auch der Umfang der Funktionen Variablen ersetzen, mit einem kürzeren Namen, in der Regel nur ein Vokal.

function foo(someVar){
   return someVar;
}

wenn minified wird ersetzt zu:

function foo(e){return e}

In MVC4 es war die Bündelung und Verkleinerung feature, das Ihnen helfen könnte. In MVC5 bin ich nicht so sicher.

Weiter Lesen: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

InformationsquelleAutor gpopoteur