À l'aide de code java script dans MVC5 - où le mettre

L'approche que j'ai écrit ci-dessous est ma façon de l'extraction de code JavaScript complètement à partir de votre point de vue.

• mieux pour maintenir (js questions -> rechercher dans les fichiers js et pas dans les vues)
• approche modulaire
• séparation claire
• de mieux comprendre par la conception

En HTML5, utilisez le data attribut de transmettre des variables à partir de la Model.
Cette aide énormément dans le transfert des variables à partir de MVC (votre viewmodel) de javascript.
Cela vous permet également de conserver javaScript stockées dans des fichiers distincts que vous pourrez probablement dans un MVC environnement.

1.1 Liaison c# HTML

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

1.2 JS fonctions d'aide à convertir les données en objets littéraux

Bien que construit sur jQuery, j'ai écrit 2 petites fonctions qui peuvent aider portage querystring des variables dans les littéraux d'objet et à l'arrière. - Je les utiliser tout au long de mes fichiers js:

//@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 Convertir HTML en js objet littéraux

Avec ces fonctions à l'esprit que vous pouvez passer toute la chaîne de requête comme les variables dans un objet littéral.

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

1.4 Exemple: JS modulaire de l'installation d'étendre et de remplacer l'objet littéraux

Combiné avec du jQuery $.extend() fonction, vous pouvez maintenant remplacer les objets javascript dans une approche modulaire (en tenant compte de toutes les fermetures un fichier js/module ressemble à ça):

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 de l'Initialisation d'un module js

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

2.1 Ajout de scripts/css à vos points de vue

Vous avez deux options pour la fixation des scripts pour vos points de vue/pages/blocs:

• l'article défini dans le baselayout (uniquement pour les vues partielles, directement incluses dans le baselayout)
• c# ClientResources (pas la meilleure approche dans le MVC, mais reste faisable, vous permet d'inclure des fichiers externes dans une vue partielle -> afficher dans la vue)
• faisceaux (de bon ou de minification et approche modulaire)

2.2.1 baselayout d'installation pour les sections

@RenderSection("AdditionalJS", false)

2.2.2 utilisation de la vue partielle

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

2.3.1 baselayout de configuration pour affichage dans la vue

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

2.3.2 utilisation de la vue en vue

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

2.4.1 BundleConfig d'installation pour les scripts

///<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 installation

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

OriginalL'auteur

Si vous avez et HTML 5 de modèle il vraiment n'importe pas où vous placez le code JavaScript, Si vous haver un modèle XHTML vous devez mettre votre code à l'intérieur de la <head></head> balises.

Maintenant avec les meilleures pratiques, pour l'instant, la meilleure pratique consiste à mettre tout votre code JS juste avant votre </body> balise de fermeture. De cette façon, vous vous assurez que vos éléments html les balises ont été d'analyser par le navigateur.

Pour aller à un environnement de production, le mieux est de concaténer tous vos JS en un seul .fichier js et ensuite il rapetisser, de cette façon, vous avez un seul petit fichier js que le navigateur du client a besoin pour récupérer.

Rapetisser votre code

Le terme rapetisser en frontend code (css/js) est un processus où vous découpez tous vos espaces et les sauts de ligne, et aussi la portée de la fonction de variables d'obtenir le remplacer avec un nom plus court, habituellement seulement une voyelle.

function foo(someVar){
   return someVar;
}

quand minifiés sera remplacé à:

function foo(e){return e}

Dans MVC4 il y a le Regroupement et la Minification du dispositif qui peut vous aider avec ceci. Dans MVC5 je ne suis pas sûr.

Pour En Savoir Plus: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

OriginalL'auteur