- Измените ваш виджет, чтобы использовать ненавязчивые методы JavaScript, чтобы можно было сканировать весь DOM на наличие экземпляров вашего виджета.Полагайтесь на классы, а не на идентификаторы.
- Используйте инструмент, подобный Chirpy, чтобы упаковать все ваши CSS-файлы и файлы Javascript в один библиотечный файл (один .js и один .css), который вы можете добавить вверху и внизу(соответственно) вашей мастер-страницы / макета.
- Используйте HTML Helper для создания вашего виджета HTML.Если хотите, помощник HTML может визуализировать частичное представление, чтобы сохранить код представления HTML в файле представления.Поскольку вы используете ненавязчивый javascript, нет необходимости создавать какие-либо скрипты в строке.Просто позвольте JavaScript-коду виджета сканировать DOM на наличие экземпляров вашего виджета.
Шаг 1
В исходном примере уже используются некоторые ненавязчивые методы javascript, но вот как вы можете расширить этот шаблонБолее того, как показано в , это jsfiddle .
Widget.cshtml
<div class="date-range-widget">
<h2>Create a date range</h2>
<div>
<label for="startDate">Start:</label>
<input id="startDate" class="date start-date" name="startDate" type="text" />
</div>
<div>
<label for="endDate">End:</label>
<input id="endDate" class="date end-date" name="endDate" type="text" />
</div>
<p class="output"></p>
<button class="create-date-range">Create</button>
</div>
Widget.js
$(function () {
// This line could probably be done generally, regardless of whether you're
// in the widget.
$("input.date").datepicker();
$("div.date-range-widget").each(function(){
var $t = $(this);
var startBox = $t.find("input.start-date");
var endBox = $t.find("input.end-date");
var output = $t.find("p.output");
$t.find("button.create-date-range").click(function () {
output.html(startBox.val() + " to " + endBox.val());
});
});
});
Обратите внимание, как вы можете теперьиметь несколько экземпляров этого виджета, присутствующего на вашей странице, с различными значениями id и name, и они будут функционировать независимо друг от друга.
Когда отсутствует data-range-widget, javascript будетвсе еще ищите DOM, не можете найти и двигаться дальше.Однако стоимость этой операции обычно довольно незначительна по сравнению с выполнением отдельного обхода для другого файла javascript.Хранение CSS и javascript в отдельных статических файлах позволяет браузеру кэшировать эти файлы, что означает, что он в среднем передает меньше данных по проводам (поскольку только HTML изменяется от одного запроса к следующему).
Шаг 2
Я лично счел целесообразным объединить мой javascript и CSS в один файл, поэтому браузер должен извлечь только один javascript и один файл css для данной загрузки страницы (и оба будуткэшируется после загрузки первой страницы).Если у вас очень большой файл javascript, который используется только на определенных страницах, вы можете хранить его отдельно и загружать его только на определенных страницах.
Несмотря на это, ваш javascript должен быть написан таким образом, чтобы вы может загружать все файлы javascript на вашем сайте одновременно, не наступая друг другу на ноги.
Шаг 3
Должен быть довольно понятным.