Что это?

Web.Require - небольшая библиотечка, для облегчения подключения скриптов в ваше Web-приложение.

Давай примеры!

<head>
    <title>@ViewBag.Title</title>
    @Html.RequireStyleSheet(
        Url.Content("~/Content/reset.css"),
        Url.Content("~/Content/Site.less"),
        Url.Content("~/Content/themes/base/minified/jquery.ui.all.min.css"))

    @Html.RequireScript(
        Url.Content("~/Scripts/jquery-1.6.4.min.js"), 
        Url.Content("~/Scripts/jquery-ui-1.8.16.min.js"))

    @Html.OutputRequiredStyleSheets()
    @Html.OutputRequiredScripts()
</head>

Что тут происходит? Все очень просто: мы подключаем три css и два js файла. Что нам дает такой подход? Почему просто нельзя подключить скрипты в лоб?

Давайте представим, что какой-то контрол, например ваш кастомный диалог или, datepicker требует для своей работы отдельного скрпта? Как быть?

Первый вариант - просто в контроле написать <script src=.../>. А если этот контрол на странице используется несколько раз?

Второй вариант - просто включить этот скрипт в <head>. А если этот скрпит очень большой и прожорливый и используется не везде?

Все очень просто: с помощью Web.Require совместим оба варианта и решим их проблемы: скрипт подгружается только один раз и только тогда, когда это необходимо. Например:

<!--DateTimePicker.cshtml-->
@Html.RequireScript(
    Url.Content("~/Scripts/jquery-1.6.4.min.js"),
    Url.Content("~/Scripts/jquery-ui-1.8.16.min.js"),
    Url.Content("~/Scripts/jquery.ui.datepicker-ru.js"),
    Url.Content("~/Scripts/DateTimePicker.js"))

В итоге DateTimePicker.js добавиться в тэг и наступит всеобщее счастье;)

Как установить?

PM> Install-Package Web.Require

P.S.

В будущем ожидаются следующие фишки:

Асинхронное подключение js
Конкатенация и минификация js и css + кэширование

P.P.S.

Пример использования можно посмотреть здесь

9 коммент.:

ShurikEvOct 9, 2011 07:41 PM
>скрипт подгружается только один раз и только тогда, когда это необходимо
Не совсем очевидно, что подразумевается под "когда это необходимо". Но первый взгляд скрипт будет подключаться всегда
ОтветитьУдалить
hazzikOct 9, 2011 08:35 PM
@ShurikEv имеется ввиду скрипт "DateTimePicker.js", который подключится, только если этот контрол используется.
ОтветитьУдалить
ShurikEvOct 9, 2011 09:05 PM
@hazzik а где показана связь, что скрипт "DateTimePicker.js" используется нашим котролом? Т.е. если на странице есть наш контрол, то надо использовать скрипт "DateTimePicker.js".
ОтветитьУдалить
hazzikOct 9, 2011 10:37 PM
@ShurikEv, во втором снипете.
ОтветитьУдалить
ShurikEvOct 9, 2011 11:46 PM
А ну ясно. Сорри. Предлагаю тогда топик немного подправить, чтобы сильно догадываться не пришлось. Кстати, в MVC4 это обещают из коробки.
Я правильно понимаю, что все @Html.RequireStyleSheet() и @Html.RequireScript() собираются/компилируются из всех компонентов? Например, в мастер-странице укажем что нужен скрипт1, а в контроле, что нужен скрипт2, в итоге страница подгрузить и скрипт1 и скрипт2?
ОтветитьУдалить
hazzikOct 10, 2011 01:08 AM
@ShurikEv, да, все верно. Про MVC4 не в курсе, еще не смотрел что у него есть вкусного внутри. Вечером поправлю, чтоб было понятнее.
ОтветитьУдалить
hazzikOct 10, 2011 01:17 AM
@ShurikEv посмотрел на MVC4 и с наскоку не нашел подобной функциональности. Где можно почитать об этом?
ОтветитьУдалить
ShurikEvOct 10, 2011 04:17 AM
@hazzik
По ссылкам из этих статей можно найти:
1. http://www.gotdotnet.ru/blogs/XaocCPS/10823/
2. http://habrahabr.ru/blogs/net/128499/
Про упаковку скриптов и стилей я там нашел. Про описанную Вами функциональность с наскока пока не нашел :) Но есть точно, т.к. читал где-то. Помню точно, что в какой-то технологии от MS это скоро будет. Вроде говорилось про MVC
ОтветитьУдалить
hazzikOct 10, 2011 09:03 PM
Нашел, это делается через http://nuget.org/List/Packages/microsoft.web.optimization
ОтветитьУдалить

Добавить комментарий

Ещё