Какова хорошая стратегия для работы с большим кодом JavaScript в проектах asp.net MVC? - PullRequest
Новая
       6

Какова хорошая стратегия для работы с большим кодом JavaScript в проектах asp.net MVC?

3 голосов
/ 28 июля 2010

Я пытаюсь найти лучший способ управления моим кодом JavaScript для моего проекта MVC.Несколько страниц моего сайта очень тяжелые с JavaScript для пользовательского интерфейса из-за рабочего процесса страниц.

Чтобы упростить разработку и отладку, я разделил весь свой javascript на четыре файла .js, Initializations.js, который имеет все функции для обработки любых форм управления jquery и инициализации полей, DataRetrieval.js, который имеет всефункции для извлечения и отображения данных через ajax, DataModification.js, который имеет все функции для отправки изменений данных на сервер через ajax, и Utilities.js, которые имеют вспомогательные функции, чтобы помочь.

Его структурирование помогло моей работе по разработке не только того факта, что я знаю, какой файл содержит конкретную функцию, в зависимости от того, что делает функция, но и того, что мои файлы JavaScript были меньше.Это также помогает в отладке, потому что я могу видеть сценарии прямо из отладчика chrome, выбирать, какой файл и легко находить функцию, которая мне нужна для отладки.Из того, что я читаю, это также помогает, так как большинство браузеров могут загружать несколько файлов .js одновременно и, таким образом, загружать страницу быстрее.Это также облегчает минимизацию в более позднее время.

Проблема, которую я замечаю, заключается в том, что при использовании файлов .js я не могу вставлять в них код C #, поскольку они не являются представлениями.Это означает, что все мои URL-адреса должны иметь магические строки для них (поэтому, если я изменю маршруты позже, мне придется изменить все URL-адреса вручную), и я не могу использовать константы, которые я настроил в C #, чтобы сделать все управляемым по всем направлениям (если я изменяю константу, например, что означает целое число, проект не опубликован, мне придется искать все ссылки в моих файлах javascript и менять их вручную, что может привести к ошибкам).

Теперь я подумал о том, чтобы превратить мои файлы JavaScript в частичные представления.Тем не менее, это все еще усложняет отладку страницы в веб-браузере, так как исходный код страницы будет завален javascript.Это также затрудняет минимизацию JavaScript в более позднее время.

Так, какие другие стратегии я могу использовать, чтобы управлять моим JavaScript и поддерживать его в соответствии с частями сайта c # / MVC, и не нужно нарушатьСУХОЙ, когда мне нужно внести изменения?

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

Ответы [ 4 ]

0 голосов
/ 29 июля 2010

В конце я пойду с решением, связанным с Увитой в комментариях ( в этом посте ). Пока, похоже, он работает хорошо, он позволяет мне выполнять минимизацию, а также позволяет мне легко организовывать мой JavaScript так же, как я организовываю свои взгляды. В целом это кажется самым чистым способом управления активами и интеграции MVC в мои файлы JavaScript.

0 голосов
/ 28 июля 2010

То, что я сделал, и, возможно, это не лучший способ, но он работает для меня, я использую Asset Manager.Не пытаюсь рекламировать, но я использую Telerik WebAssetManager в их продукте MVC.Существует менеджер ресурсов с открытым исходным кодом, который я использовал в прошлом, который также может работать здесь:

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

Имея это в своем распоряжении, я структурирую свои активы следующим образом:1007 *

Главная страница, и представления указывают, какие файлы JavaScript им необходимы для работы, а затем менеджер активов собирает их все вместе и комбинирует с версией для кэширования.Как я уже сказал, я не знаю, идеально ли это, но все довольно просто.

Что касается динамических переменных внутри js-файлов.Я просто объявляю маршрут, который указывает на ~ \ Scripts \ Dynamic.js, который позволяет мне вставлять любые динамические переменные в нужный мне JavaScript.

0 голосов
/ 29 июля 2010

Вы должны проверить приложение под названием 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.Он остается чистым, минимизированным и сжатым для рабочих выпусков, и в процессе разработки мы можем быть уверены, что файлы НИКОГДА не кэшируются, что избавляет от некоторых головных болей.

0 голосов
/ 28 июля 2010

Держите свой JS структурированным таким, какой он есть, но передайте ему важные вещи вместо использования магических строк.

Напишите помощника HTML, чтобы передать как можно меньше данных в JS, и использовать их на своем Site.Master, например. Вот действительно упрощенный пример. 

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>");
}

Эта техника хороша тем, что имеет тенденцию ограничивать сумму, которую вы проходите.

...