Вы пишете свой JavaScript в представлении ASP.NET MVC... или в отдельном файле JavaScript?

Ответ 1

Я следую нескольким правилам:

• Не присоединяйте переменную непосредственно к DOM, если это абсолютно необходимо.
• Поместите как можно больше информации в js файлы. Чем меньше js файлов, тем лучше.
• Верните свои js файлы. При публикации, минимизации и смятии через Chirpy или SquishIt
• В js минимизируйте зависимость от динамических значений на стороне сервера (сгенерированные идентификаторы и т.д.), когда сможете.

Итак, вот пример:

Я добавлю метаданные jQuery и jQuery в свой проект: http://plugins.jquery.com/project/metadata

Затем, в моем основном файле js, я буду расширять jQuery своим собственным пространством имен:

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

Почти вся моя настраиваемая js-логика будет жить в пространстве имен $. fatDish.

Теперь, скажем, я хочу передать маршрут MVC на $. fatDish. На моей странице aspx я бы написал следующее:

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

В js файле я могу теперь написать:

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

Второй подход заключается в использовании метаданных jQuery (о чем я упоминал выше). На странице aspx вы можете написать что-то вроде:

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

Затем в вашем js файле вы можете получить значение маршрута следующим образом:

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

Ответ 2

Я создаю отдельные javascripts для вычислений/логики, но вызываю их из своего представления. Таким образом, мне не нужно создавать глобальные переменные и проще использовать javascripts.

Пример javascript:

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

и в представлении

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

Это также значительно облегчает то, что происходит (и отлаживается, когда вы возвращаетесь в свой проект через шесть месяцев), поскольку ничего не происходит, если вы явно не говорите ему об этом.

Ответ 3

Лично я всегда помещаю javascript в отдельные файлы. Глобальные переменные, которые зависят от маршрутизации или некоторой информации на стороне сервера внутри представления. Точно так же, как и вы. В качестве альтернативы хранению глобальных переменных вы можете использовать элементы привязки или формы, которые уже содержат URL-адрес, а затем ajaxify. Что касается значений модели, они могут храниться также в элементах DOM, таких как скрытые поля, классы CSS, атрибуты данных HTML5,..., но это может быть неприменимо ко всем ситуациям.

Ответ 4

vandalo,

Я занял ситуацию, когда javascript находится в отдельном файле. однако, используя результат пользовательского действия на контроллере, js вызывается как функция htmlhelper и имеет контекст со страницей. htmlhelper фактически выполняет код как файл и поэтому кэшируется, тем самым ускоряя выполнение/доставку.

Я знаю, вам будет интересно посмотреть, как это работает, так что обновите ответ, чтобы показать механику этого чуть позже.

til then... (здесь ссылка на то, где я получил свое вдохновение, а затем подстроил это для своих нужд)

Маршрутизация и пути ASP.NET MVC - это файлы js

ok, здесь мой обработанный пример (простой проект mvc 2, содержащий необходимые помощники и классы) - наслаждайтесь:

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

Ответ 5

Отдельный файл для аккуратности как минимум. Чем меньше языков вы помещаете в каждый файл, тем легче будет читать, что он делает с первого взгляда.

Ответ 6

Здесь мои методы в ASP.NET MVC3 для завершения ответа @weirdlover, одна вещь, которую он пропустил, - это кодировка JSON, которая очень важна, когда вы хотите безопасно вводить данные в js.

Если данные не слишком большие и могут быть логически привязаны к элементу DOM, я использую один (или несколько) атрибут данных (не требуйте плагина jQuery и не оставляйте класс css) и класс css найти элементы из jQuery.

Глупый пример:

HTML:

<div class="text-widget" 
     data-options="@Json.Encode(new { url = Url.Action("Update", "Text", new { id = 3 }), uselessParam = true })">
  <input type="text" />
</div>

CoffeeScript:

class TextWidget
  constructor: (@element) ->
    @el = $ @element
    @options = @el.data 'options'
    @input = @el.find 'input'
    @input.change @update

  update: =>
     value = @input.val()
     $.post @options.url, 
       value: value
       , -> alert 'text saved'

$ ->
  new TextWidget element for element in $('.text-widget').get()

Немного gotcha с Json.Encode и jQuery.data: если вы используете его на простой строке, вы получите строку с кавычками в javascript: $(). data ('strattribute') == '' hello "'. Просто используйте Html.Encode в этом случае.

В любом случае я предпочитаю использовать один элемент с анонимным объектом, который я создаю в контроллере, его легче поддерживать: data-options="@Json.Encode(Model.Options)".

Если есть много данных, например список объектов, я перейду к ViewModels для knockoutjs, я использую <script> и var data = @(Html.Raw(Json.Encode(Model.MyData)));.

Я также использую namespacing и closures, чтобы избежать обхода глобального объекта.