ASP.NET MVC Html Helper Расширения и рендеринг их необходимых "include" - PullRequest
Новая
       33

ASP.NET MVC Html Helper Расширения и рендеринг их необходимых "include"

3 голосов
/ 03 мая 2010

Я создал собственное расширение Html Helper следующим образом: 

public static string DatePicker(this HtmlHelper helper, string name, string value)
{
        return string.Format(@"<script type='text/javascript'>
$(document).ready(function(){{
    $('#{0}').datepicker({{ 
        changeMonth: true, 
        changeYear:true, 
        dateFormat: 'd-M-yy', 
        firstDay: 1, showButtonPanel: 
        true, 
        showWeek: true 
    }});
}});
</script>
<input type='text' name='{0}' id='{0}' value='{1}'>", name, value);
}

Проблема в том, что теперь для этой страницы требуется "включить" следующее: 

<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.datepicker.min.js" type="text/javascript"></script>

И еще несколько предметов. Вопросы следующие:

  1. Есть ли серьезная обработка накладные расходы, если бы я должен был включить эти элементы на каждой странице (как в Site.Master например) таким образом отрицая необходимость в HtmlHelper организовать «включает» - учитывая, что в конечном итоге будет около 20 включает в себя все различные типы JQuery UI виджетов используется по всему сайту.

  2. Если HtmlHelper сортирует «включает», он будет добавлять один каждый время, когда используется этот DatePicker (часто на странице их два) есть способ определить, является ли или не пользователь уже оказал тот же тип контроля на страница, таким образом, не включая то же самое библиотеки JQuery, когда несколько экземпляры DatePicker (для пример) используются?

Ответы [ 4 ]

5 голосов
/ 14 июля 2011

Прямой ответ

1) Да, 20 запросов на скрипты на каждой странице значительно снизят производительность для клиентов - для получения дополнительной информации см. Документы Yahoo / Google по веб-оптимизации

Кэширование в браузере помогает, но его так легко сделать лучше.

2) Зачем накатывать свое собственное решение на зависимости?

Существует множество превосходных библиотек, которые делаютэто уже хорошо - с преимуществами?

По глубине:

Аналогично предложению от @Mare, но, думаю, с некоторыми приличными преимуществами - я бы рекомендовал немного изменить ваш подход.Refactor!

Рассмотрим следующие основные вопросы:

1) Зачем писать HTML в файлах .cs?

=> гораздо лучше сохранитьВаш HTML в файлах aspx / ascx (или другой движок представления) проверить редактор и шаблоны отображения, например,

Введение Брэда Уилсона в шаблоны

т.е. комментарий от @admsteck выше

2) зачем писать Javascript в файлах .cs?

=> гораздо лучше хранить ваш Javascript в файлах .js

3) Также обратите внимание - зачем использовать методы расширения HtmlHelper, если вы не используете какую-либо информацию о состоянии из класса HtmlHelper?

=> Для простого решенияпочему бы вместо этого просто использовать статический вспомогательный класс (не расширение HtmlHelper) см. этот ответ здесь

Но в основном:

4) ЕслиВы беспокоитесь о производительности, почему бы не минимизировать и не объединить все ваши скрипты (и CSS, пока вы на нем).

=>Тогда вы можете иметь один маленький CSS-файл и один JS-файл для всего вашего приложения.

Однако, 4) затем приводит к некоторым дополнительным вопросам:

a) Как выdebug комбинированный + минимизированный JS

б) Как эффективно работать с комбинированным + «минимизированным» CSS?

c) Чтобы сосредоточиться на исходном запросе о чистом способе обработки зависимостей, как убедиться, что он четко определяет, какой код зависит от какого кода, и как вы гарантируете, что код запрашивается только один раз, когда это необходимо?

Я обнаружил, что эта библиотека с открытым исходным кодом Client Dependency Framework является отличным дополнением к моему инструментарию для MVC, когда при отладке вы получаете отдельные файлы, при запуске вы получаете комбинированные файлы(для значительного увеличения производительности при работе).

Он также предоставляет отличный способ для ваших компонентов пользовательского интерфейса "регистрировать" свои зависимости , поэтому разработчикам становится ясно, что нужно, гдеи поэтому правильный js + правильный css попадает к клиенту (и запрашивается только один раз)!

3 голосов
/ 03 мая 2010

Возможно, что-то из этих фрагментов кода поможет вам составить представление об этом: 

private static readonly SortedList<int, string> _registeredScriptIncludes = new SortedList<int, string>();

    public static void RegisterScriptInclude(this HtmlHelper htmlhelper, string script)
    {
        if (!_registeredScriptIncludes.ContainsValue(script))
        {
            _registeredScriptIncludes.Add(_registeredScriptIncludes.Count, script);
        }
    }

    public static string RenderScript(this HtmlHelper htmlhelper, string script)
    {
        var scripts = new StringBuilder();
        scripts.AppendLine("<script src='" + script + "' type='text/javascript'></script>");
        return scripts.ToString();
    }

    public static string RenderScripts(this HtmlHelper htmlhelper)
    {
        var scripts = new StringBuilder();
        scripts.AppendLine("<!-- Rendering registered script includes -->");
        foreach (string script in _registeredScriptIncludes.Values)
        {
            scripts.AppendLine("<script src='" + script + "' type='text/javascript'></script>");
        }
        return scripts.ToString();
    }
1 голос
/ 03 мая 2010

Чтобы ответить на вопрос 2, вы можете сделать что-то вроде следующего 

<script type='text/javascript'>
    if (typeof jQuery == 'undefined') // test to see if the jQuery function is defined
        document.write("<script type='text/javascript' src='jquery.js'></script>");
</script>
0 голосов
/ 03 мая 2010

Относительно:

1: вообще никаких накладных расходов на обработку и значительных накладных расходов на размер (как в случае: файлы обычно загружаются браузером только первый раз). Я бы обычно так подходил.

2: понятия не имею, извините;) Думаю, кто-то еще поднимет это.

...