Почему загрузка встроенного JavaScript в представлениях с помощью AJAX плоха? - PullRequest
Новая
       26

Почему загрузка встроенного JavaScript в представлениях с помощью AJAX плоха?

11 голосов
/ 16 июня 2010

У нас есть интерфейс с вкладками, внутри одной из этих вкладок находится форма конфиденциальности. Эта форма конфиденциальности, а также использование внешнего файла JavaScript для основной части своей работы также использует встроенный JavaScript, поскольку в настоящее время он использует динамический код (на языке сервера).

Оболочка formTabs (вкладки ajax без функций обратного вызова) 

...
<script type ="text/javascript">
    var messagingTabset = ProjectName.Tabset.init({
        'tabID': 'preferences-tabset',
        'ajaxUrl0': '<%=Url.Action("PreferencesMainForm", "Profile")%>',
        'ajaxUrl1': '<%=Url.Action("ProfileImageForm", "Profile")%>',
        'ajaxUrl2': '<%=Url.Action("InterestsForm", "Profile")%>',
        'ajaxUrl3': '<%=Url.Action("PrivacyForm", "Profile")%>',
        'ajaxUrl4': '<%=Url.Action("PasswordForm", "Profile")%>',
        'ajaxUrl5': '<%=Url.Action("CustomUrlForm", "Profile", new {userId = Model.UserId})%>',
        'defaultAjaxUrl': '<%=Url.Action(Model.PartialName, "Profile")%>'
    });
</script>
...

представление PrivacyForm (более встроенный JavaScript с серверным кодом) 

...
<script type = "text/javascript">
    var preferencesPrivacyForm = new ProjectName.AJAX.Form({
        "ajaxFormID": "preferences-privacy-form",
        "actionUrl": '<%= Url.Action("SavePrivacy","Profile") %>',
        "dataReturnType":"json"
    });
</script>
...

Бэкэнд-разработчик : «Код JavaScript конфигурации для этой формы должен оставаться в режиме PrivacyForm»

Разработчик внешнего интерфейса : «Хм, я уверен, что я читал, что это не способ сделать это - ненадежно, весь JavaScript должен быть внутри HTML-страницы, которая содержит оболочку вкладок , внутри функции обратного вызова этой вкладки загружаются. Вы действительно должны: а) предоставить мне логику получения динамических данных внутри tabs-wrapper или б) позволить мне получить эти динамические переменные через обход DOM "

Бэкэнд-разработчик : «Оба эти метода - большая работа без реальной выгоды! Первый пример плох, потому что это означает, что мне придется изменить способ его построения (и работает нормально.) Это, вероятно, будет означать дублирование. Второй пример является хитрым, так как разметка может измениться, поэтому кто-то, работающий над кодом, может забыть редактировать методы обхода DOM в tabs-wrapper. Это еще один уровень абстракции, который мы не нужно. Если вы предоставите мне некоторые доказательства того, почему это действительно очень плохо, я это проверю, но в противном случае я не могу оправдать то, что нашел время "

Разработчик интерфейса : «Ну, я уже потратил несколько дней впустую, исправляя проблемы с загруженным AJAX JavaScript, помещая их в обратные вызовы своих оболочек, но да, теперь вы думаете об этом, хороший Ссылка на подобные вещи была бы очень хороша, потому что вы правы, на данный момент приложение работает без проблем. '

Это один из многих примеров в большом приложении, где мы загружаем встроенный JavaScript с помощью Ajax.

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

Ответы [ 4 ]

5 голосов
/ 16 июня 2010

Это на самом деле не «плохо», если оно служит цели (например, загружает контент с других сайтов, таких как панель управления WordPress), но выполнение всех дополнительных вызовов на сервер - пустая трата ресурсов, если только абсолютно необходимо это сделать.

Обычно самый простой ответ - самый правильный. В этом случае это означает, что не нужно добавлять все дополнительные служебные данные, чтобы избежать легкого перекодирования серверной части.

5 голосов
/ 16 июня 2010

Я бы порекомендовал прочесть Дейл Карнеги «Как заводить друзей и оказывать влияние на людей».

Кажется, разработчики постоянно попадают в такую ​​ситуацию, когда они знают, что лучше всего делать, но не получают никакой покупки отдругие разработчики или менеджмент.

Эту книгу определенно стоит прочитать;Абсолютный ДОЛЖЕН читать для этой профессии.

1 голос
/ 24 июня 2010

Это основа аргумента о том, почему ненавязчивый Javascript (UJS) хорош.Я никогда не понимал его достоинств, потому что не знал, как решать проблемы без встроенного Javascript.В конце концов я узнал.

Прежде всего, UJS хорош, потому что он разделяет ваш код переднего плана следующим образом:

  1. HTML - чистый HTML предназначен для структурирования вашей информации.
  2. CSS - CSS используется для оформления и оформления вашего документа.
  3. Javascript - Javascript используется для определения поведения вашей страницы.

Чтобы заставить их работать вместе, файл HTML загружается во внешние файлы CSS для определения стилей, а внешние файлы Javascript для определения поведения.Кроме того, вам нужны хорошо известные символы в вашем HTML (такие как идентификаторы, имена классов и теги), в CSS (идентификаторы и правила классов), чтобы ваш Javascript мог манипулировать структурой, макетом и стилем в соответствии с реализацией поведения.

С помощью инфраструктуры Javascript, такой как jQuery, вы можете динамически связывать обработчики javascript с событиями в ваших различных объектах HTML DOM.Это позволяет вам не делать это встроенным в HTML.

Я работал с кодом, который четко разделен (структура, стиль / макет, поведение), и кодом, который представляет собой собачий завтрак из HTML, CSS и Javascript, включая код HTML / JS, который был сгенерирован динамическииспользуя ERB.Оба были трудны для понимания по разным причинам.Первый был трудным, потому что мне нужно было понять, что находится в каждом из файлов, в то время как смешанный код было трудно понять, потому что мне нужно было понять, что такое JS, что такое HTML, что такое CSS, что инициализировалось, когда и чтобыл создан.Однако, как только я поехал по кривой обучения, разработка четко разделенного кода стала менее трудоемкой и простой в тестировании.

Для сгенерированного Javascript (например, с помощью ERB) вы обычно можете структурировать код, где у вас есть статический javascript, управляемый некоторыми пользовательскими или контекстно-зависимыми данными.Как предложил предыдущий человек, вы можете просто установить значения для этих данных в разделе HEAD, а затем использовать статические файлы Javascript.Вы также можете использовать вызов AJAX, чтобы получить те же данные с сервера.

С точки зрения краткосрочной перспективы, бэк-энд прав.Если это работает, не исправляйте это.С точки зрения среднесрочной перспективы вашей команде будет дороже развивать и поддерживать ваш код, если вы не будете четко отделять HTML, CSS и Javascript от UJS.С точки зрения вашего бизнеса, вам будет больно поддерживать и развивать код, как сегодня.С точки зрения бизнеса бэк-энда, это будет стоить ему дороже, если он сделает что-то кроме того, что работает сегодня.т. е. руководителю вашей команды и архитектору необходимо сбалансировать различные бизнес-перспективы, чтобы определить, каким образом структурировать код

0 голосов
/ 21 июня 2010

Из примера не ясно, зачем вам нужен AJAX.Почему бы просто не поместить 

<script type ="text/javascript">
    var userId = "<<<<= userId >>>>"
</script>

прямо в заголовок HTML?Это быстрее для пользователя, проще на сервере, и вы избегаете всяческих проблем с синхронизацией и обработкой ошибок для неудачных запросов.

...