Как вы структурируете свои веб-приложения, чтобы облегчить работу с AJAX и DHTML? - PullRequest
Новая
       21

Как вы структурируете свои веб-приложения, чтобы облегчить работу с AJAX и DHTML?

4 голосов
/ 01 декабря 2011

Учитывая эту структуру для веб-сайта 

<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"/>:

  1. Для того, чтобы заставить jQuery datepicer работать в первый раз, я должен звоните $('input.date').datepicker() в конце <body>, после внешних <script> объявлений.

  2. Если на странице загрузки частичных просмотров, где новые <input type="text" class="date"/> элементы, я должен положить вызов инициализации в представлении для AJAX вызовы.

Итак, я заканчиваю повторяющимся кодом, чего я не хочу, особенно в JS, где я не могу реорганизовать код так же легко, как в C #.

Это то, что сводит меня с ума на прошлой неделе, интересно, есть ли лучший способ сделать это? Лучшая техника или другой подход?

Как вы структурируете свои веб-приложения?

С уважением.

PS: Было бы неплохо иметь что-то вроде .live() или .delegate(), но не только с событиями, не так ли? Нет ли какого-либо события, которое jQuery / browser вызывает каждый раз, когда что-то добавляется в DOM?

Ответы [ 2 ]

1 голос
/ 09 декабря 2011

Это может быть только частичный ответ на ваш вопрос, если я правильно понимаю.

Что касается вашего примера с <input type="text" class="date" />, у нас возникла аналогичная проблема с нашими частичными представлениями форм, в которых используется ненавязчивая проверка jQuery.При загрузке их в браузер нам пришлось позвонить $.validator.unobtrusive.parse('a form selector');, чтобы получить правила проверки, которые будут применяться при следующей отправке формы.

Если ваша цель состоит в том, чтобы избежать повторения кода, вы можете сделать свои действия js ненавязчивыми, используя шаблон, как в библиотеке ненавязчивой проверки jq.Таким образом, вы получите HTML, который будет выглядеть примерно так: 

<input type="text" class="date" data-datepicker="true" />

Затем вы можете поместить логику инициализации в ненавязчивый метод синтаксического анализа.* Это решает вашу проблему наличия одного места для рефакторинга кода.Вы можете запустить его автоматически при первой загрузке страницы, а когда вы загружаете новый контент через ajax, вы можете применить правило ко всем соответствующим элементам, просто вызвав myAppNamespace.unobtrusive.parse('selector for the partial view content');

Обновить

Взгляните на файл jquery.validate.unobtrusive.js в вашей папке скриптов.Это на самом деле довольно умно, и если вы на самом деле не расширяете другой плагин jquery (например, validate), ваш код окажется намного тоньше.Если вы ищете полное разделение HTML и сценариев, использование ненавязчивых атрибутов данных HTML5 является хорошим решением imo.

0 голосов
/ 09 декабря 2011

Я пометил ответ @olivehour как правильный, поскольку в нем говорится о хорошем решении проблемы.

Что я наконец-то сделал, так это переместил файл jquery в заголовок и только файл jquery,остальные, такие как «jquery-ui», или пользовательские файлы js все еще находятся внизу.

Причина в том, что можно использовать $(document).ready или $(function(){}), поскольку при использовании этого в представлении код выполняетсяна «onload» или сразу, если «onload» уже была поднята, что идеально подходит для того, что я хочу.

Cheers.

...