écrivez-vous votre JavaScript dans une vue ASP.NET MVC ... ou dans un fichier JavaScript distinct ?

Question

J'essaie d'améliorer mon style de codage. J'ai essayé différentes solutions mais je n'arrive pas à trouver la meilleure.
J'ai commencé à mettre du JavaScript dans mes vues mais je n'aime pas particulièrement cette solution.
C'est difficile à déboguer avec Visual Studio, et cela "pollue" en quelque sorte la page.
Ma nouvelle "tendance" est de mettre les scripts de la page dans un fichier séparé.
Le seul problème auquel je suis confronté concerne le code.
Pour résoudre le problème, j'ai défini des variables JavaScript comme ceci :

<script type="text/javascript">
    var PriceListFetchAction = '<%=Url.Action("Fetch", "PriceList")%>';
    var UploaderAction = '<%=Url.Action("UploadExcelPriceList", "PriceList")%>';
    var ModelId = '<%=Model.id%>';
    var ImportType = '<%=Model.Type%>';
    var customerCodeFetchAction = '<%=Url.Action("FetchByCustomerCode", "Customers")%>';
    var customerNameFetchAction = '<%=Url.Action("FetchByCustomerName", "Customers")%>';
    var ImportErpAction = '<%=Url.Action("ImportPriceListErp", "PriceList")%>';
    var imageCalendar = '<%=Url.Content("~/Content/Images/calendar.png")%>';
</script>  

et j'utilise ensuite les variables dans mon fichier JavaScript. Quelle est la meilleure solution en termes de performances, de débogage et de style pour vous ?

Answer 1

Je suis une poignée de règles :

1. N'attachez pas une variable directement au DOM, sauf si cela est absolument nécessaire.
2. Placez autant d'informations que possible dans les fichiers js. Moins il y a de fichiers js, mieux c'est.
3. Version de vos fichiers js. Lors de la publication, minifier et mash via Chirpy ou SquishIt.
4. En js, minimisez votre dépendance aux valeurs dynamiques côté serveur (identifiants générés, etc.) lorsque vous le pouvez.

Donc, voici un exemple :

Je vais ajouter jQuery et les métadonnées de jQuery à mon projet : http://plugins.jquery.com/project/metadata

Ensuite, dans mon fichier maître js, je vais étendre jQuery avec mon propre espace de noms :

$.extend({
   fatDish : {
     url : {},
     urls : function(a) {
        $.extend($.fatDish.url, a);
     }
   }
});

La quasi-totalité de ma logique js personnalisée se trouve dans le répertoire $.fatDish espace de noms.

Maintenant, disons que je veux passer une Route MVC a $.fatDish . Dans ma page aspx, j'écrirais ce qui suit :

<script src="@Url.Content("~/path/master.js")" type="text/javascript"></script>
<script type="text/javascript">
   $.fatDish.urls({
      path1 : '@Url.Action("Index", "Home")'
   });
</script>

Dans un fichier js, je peux maintenant écrire :

window.location = $.fatDish.url.path1;

Une deuxième approche consiste à utiliser les métadonnées jQuery (dont j'ai parlé plus haut). Sur votre page aspx, vous pourriez écrire quelque chose comme :

<div class="faux-link {act:'@Url.Action("Index", "Home")'}">Go Somewhere</div>

Ensuite, dans votre fichier js, vous pouvez récupérer la valeur de la route comme suit :

$('.faux-link').click(function() {
   var $this = $(this);
   var href = $this.metadata().act;
   window.location = href;
});

Answer 2

Je crée des javascripts distincts pour les calculs/la logique, mais je les appelle depuis ma vue. De cette façon, je ne dois pas créer de variables globales et il est plus facile de réutiliser les javascripts.

exemple javascript :

function doSomeCoolProcessing(modelId, fetchAction)
{
    //some stuff
}

et dans la vue

<script type="text/javascript">
    $('document').ready(function() {
        doSomeCoolProcessing('<%=Model.id%>', '<%=Url.Action("Fetch", "PriceList")%>');
    )};
</script>

Cela rend également beaucoup plus clair ce qui se passe (et le débogage lorsque vous revenez à votre projet après six mois), puisque rien ne se passe à moins que vous ne le lui demandiez explicitement.

Answer 3

Personnellement, je mets toujours le javascript dans des fichiers séparés. Les variables globales qui dépendent du routage ou de certaines informations côté serveur à l'intérieur de la vue. Exactement comme vous le faites. Comme alternative au stockage des variables globales, vous pourriez utiliser des éléments d'ancrage ou de formulaire qui contiennent déjà l'url et les ajaxifier. En ce qui concerne les valeurs du modèle, elles peuvent être stockées dans des éléments du DOM tels que les champs cachés, les classes CSS, les attributs HTML5 data-*, ... mais cela ne s'applique pas à toutes les situations.

Answer 4

Vandalo,

J'ai emprunté une situation dans laquelle le javascript se trouve dans un fichier séparé. Cependant, en utilisant un résultat d'action personnalisé sur le contrôleur, le javascript est invoqué comme une fonction htmlhelper et a un contexte avec la page. Le htmlhelper sert en fait le code comme un fichier et il est donc mis en cache, ce qui accélère l'exécution/livraison.

Je sais que vous serez curieux de voir comment cela fonctionne, donc je mettrai à jour la réponse pour montrer la mécanique de ceci un peu plus tard.

jusqu'à ce que... (voici un lien vers l'endroit où j'ai trouvé mon inspiration. j'ai ensuite adapté ce texte à mes propres besoins)

Routage ASP.NET MVC et chemins d'accès aux fichiers js

ok, voici mon exemple travaillé (un projet mvc 2 simple qui contient les aides et les classes nécessaires) - appréciez :

http://www.gatehousemusic.com/downloads/ServeJsExample.zip

Answer 5

Un dossier séparé, pour le moins ordonné. Moins vous mettrez de langues dans chaque fichier, plus il sera facile de lire ce qu'il fait en un coup d'œil.