Web.Requre - client script dependency framework

Что это?

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.

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