Как вы структурируете свои веб -приложения, чтобы облегчить AJAX и DHTML?
-
27-10-2019 - |
Вопрос
Учитывая эту структуру для веб -сайта
<html>
<head>
<!-- CSS at the beginning-->
<link/>
</head>
<body>
<div id="mainContainer">
<div id="side"></div>
<div id="content">
<!-- DHTML awesomeness happens here -->
</div>
</div>
<!-- Scripts at the end -->
<script/>
<script>
/* code that attach the JS logic to the HTML items */
</script>
</body>
</html>
Используя обычную веб -навигацию, страница полностью отображается в HTML, и, следуя подходу прогрессивного улучшения, в конце я ищу некоторые конкретные идентификаторы или классы, и я даю им динамическое поведение с использованием JavaScript и специально JQUERY. Этот код улучшения происходит в самом конце тела после загрузки внешних сценариев.
В #content
, происходит много взаимодействий jQuery Ajax, некоторые из них получают другие частичные представления от сервера и вставляют их на странице, но тогда я должен снова искать эти идентификаторы и классы и прикрепить объекты JavaScript к этим новым элементам.
Это может быть очень громоздко, так как вы не хотите повторно применить контроллеры, обработчики событий или что -то в этом роде для объектов, у которых их уже есть.
До сих пор единственное решение, которое я нашел, - это приведено в мои частичные взгляды:
@if(Request.IsAjaxRequest())
{
<script>
/* code that attach the JS controllers to the HTML items of this view */
</script>
}
Я думаю, что подобная проблема происходит, например, когда вы хотите $('input.date').datepicker()
и вы добавляете новый <input type="text" class="date"/>
Элементы динамично, у новых не есть выборщик даты, если вы не зарегистрируете предложение jQuery.
Например, учитывая это в #content
у меня есть <input type="text" class="date"/>
:
Для того, чтобы заставить jQuery DatePicer работать в первый раз, я должен позвонить
$('input.date').datepicker()
в конце<body>
, после внешнего<script>
декларации.Если страница скачать частичные представления, где новые
<input type="text" class="date"/>
Элементы, я должен поместить вызов инициализации в представление для вызовов Ajax.
Поэтому я заканчиваю повторяющимся кодом, чем я не хочу специально в JS, где я не могу рефакторировать код так же легко, как в C#.
Это то, что сводит меня с ума на прошлой неделе, задаваясь вопросом, есть ли лучший способ сделать это? Лучшая техника или другой подход?
Как вы структурируете свои веб -приложения?
С уважением.
PS: было бы неплохо иметь что -то вроде .live()
или же .delegate()
Но не только связано с событиями, не так ли? Нет ли нет никакого события, которое JQuery/Browser поднимает каждый раз, когда что -то добавляется в DOM?
Решение
Это может быть только частичным ответом на ваш вопрос, если я правильно его понимаю.
Что касается вашего примера с <input type="text" class="date" />
, Мы столкнулись с аналогичной проблемой с нашими частичными видами форм, которые используют ненавязчивую проверку jQuery. При загрузке их в браузер мы должны были позвонить $.validator.unobtrusive.parse('a form selector');
Чтобы получить правила проверки применять в течение следующей подчинения формы.
Если ваша цель состоит в том, чтобы избежать повторного кода, вы можете сделать свои действия JS ненавязчивыми, используя образец, как в JQ ненавязчивой валидации Lib. Таким образом, вы получите HTML, который больше похож на это:
<input type="text" class="date" data-datepicker="true" />
Затем вы можете поместить логику инициализации в неправильный метод анализа.
parse: function(selector) {
$(selector).find(':input[data-datepicker=true]').each(function() {
$(this).datepicker();
}
};
}
Это решает вашу проблему иметь одно место для рефакторирования кода. Вы можете запустить его автоматически при первой загрузке страницы, и когда вы загружаете новый контент через AJAX, вы можете применить правило ко всем соответствующим элементам, просто вызывая myAppNamespace.unobtrusive.parse('selector for the partial view content');
Обновлять
Посмотрите на файл jquery.validate.unobtrusize.js в папке сценариев. Это действительно довольно умно, и если вы на самом деле не расширяете другой плагин jQuery (например, Validate), ваш код в конечном итоге станет намного стройнее. Если вы ищете полное разделение HTML и сценария, использование ненавязчивых данных HTML5- хорошее решение.
Другие советы
Я пометил ответ @olivehour как правильный, поскольку в нем говорится хорошее решение для проблемы.
То, что я наконец сделал,-это перемещение файла jQuery в голову, а только файл jQuery, остальные, такие как «jquery-ui», или пользовательские файлы JS все еще находятся внизу.
Причина в том, чтобы использовать $(document).ready
или же $(function(){})
, С момента использования этого в представлении код выполняется на «Onload» или сразу, если «Onload» уже поднят, что идеально подходит для того, что я хочу.
Ваше здоровье.