Вопросы Теги

Ответ Ajax: Данные (JSON, XML) или отрывок HTML? [закрытый]

Согласно спецификации есть определенные вещи, которые вы никогда не должны делать в конструкторе:

При создании пользовательских конструкторов элементов авторы связаны следующими требованиями соответствия: [ 1115]

  • Безпараметрический вызов super () должен быть первым оператором в теле конструктора, чтобы установить правильную цепочку прототипов и это значение, прежде чем будет запущен какой-либо дополнительный код.

    [ 117]

  • Оператор return не должен появляться где-либо внутри тела конструктора, если только он не является простым ранним возвратом (возврат или возврат этого).

  • Конструктор не должен использовать методы document.write () или document.open ().

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

  • Элемент не должен иметь никаких атрибутов или дочерних элементов , поскольку это нарушает ожидания потребителей, которые используют методы createElement или createElementNS.

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

  • В общем случае конструктор следует использовать для установки начального состояния и значений по умолчанию, а также для настройки прослушивателей событий и, возможно, теневого корня.

Некоторые из этих требований проверяются во время создания элемента, прямо или косвенно, и их несоблюдение приведет к созданию пользовательского элемента, который не может быть реализован синтаксическим анализатором или API DOM.

blockquote>

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

Если вы измените свой код на это: 

customElements.define('test-element', class extends HTMLElement {
  constructor() {
    super()
    setTimeout(() => {
        this.setAttribute('foo', 'bar')
    }, 100)
  }
})
test

Тогда это работает, потому что setTimeout получает Вы вышли из конструктора.

12
задан parxier 14 May 2009 в 19:00
поделиться

5 ответов

В большинстве сценариев вам нужно отправлять только JSON (или XML, в зависимости от ситуации, я использую JSON в качестве примера).

  • Если вы отправляете данные, такие как котировки акций, используйте JSON.
  • Если вы хотите, чтобы сетевой уровень был очень компактным, отправьте чистые данные JSON и позвольте клиенту выполнить тяжелую работу по добавлению разметки.
  • Если клиентская страница является постоянной, отправьте JSON. Затем клиент может отправить приветствие в Person.Name. Он может обновлять Person.Score или отображать форму для редактирования Person.Status, причем все они имеют дело только с одним объектом Person.
  • Если вы открываете веб-API, очевидно, используйте JSON, чтобы клиент мог делать с ним все, что захочет.

] Итак, я действительно не люблю создавать HTML из JavaScript. Это кошмар обслуживания, и мне просто не нравится их смешивать. Так как же избежать создания HTML в JavaScript, если все, что вы отправляете, - это JSON? Если вы имеете дело с объектом Person (s), при первом рендеринге страницы вы должны отрендерить его как таковой: 

...
<div class="person display">
    <div class="name"></div>
    <div class="status"></div>
    <div class="score"></div>
</div>
...

Когда вы получаете данные о человеке через AJAX, просто заполните указанную выше структуру DOM.

Если вы вы хотите отображать информацию для нескольких лиц, тогда вместо того, чтобы напрямую заполнять структуру DOM, вы должны сделать ее клон, а затем заполнить ее. Таким образом, ваш шаблон останется неизменным, и вы сможете использовать его повторно.

вы должны сделать его клон, а затем заполнить его. Таким образом, ваш шаблон останется неизменным, и вы сможете использовать его повторно.

вы должны сделать его клон, а затем заполнить его. Таким образом, ваш шаблон останется неизменным, и вы сможете использовать его повторно.

11
ответ дан 26 October 2019 в 10:46
поделиться

Это во многом зависит от чего собирается использовать данные :

Для мэшапов и веб-сервисов

Для данных, которые будут использоваться в вашем приложении и извне, никогда не используйте HTML: сложно проанализировать, сложно разместить его в другой структуре .

Если речь идет о небольшом количестве данных, например, обновленных для виджета, используйте JSON, потому что он быстрый и простой в использовании.

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

Только для внутреннего использования

Не беспокойтесь об использовании чистого XML. В любом случае пакетный анализ всегда будет выполняться перед выводом.

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

Используйте HTML, если вы знаете, что данные не нужно будет обрабатывать впоследствии, и если макет сложный. Написание сложного HTML на стороне сервера намного проще, чем использование DOM.

6
ответ дан 26 October 2019 в 10:46
поделиться

Для меня не существует "идеального" пути. Работа с чистыми JSON и jTemplates для рендеринга на стороне клиента с помощью jQuery, когда мне нужна разбивка на страницы, а у меня уже есть шаблон на стороне клиента.

Также с помощью JSON, когда мне нужно реализовать простой вызов сервера: autocomplete, in- место редактирования, сохранение черновиков и т. д.

Когда мне нужен новый фрагмент страницы, я использую рендеринг HTML: загрузка шаблонов, добавление панелей на страницу, рендеринг пользовательских элементов управления.

кстати, когда я могу предпочесть json, потому что мы может переключаться на манипуляции с объектами на стороне клиента вместо того, чтобы просто иметь "панель обновлений".

0
ответ дан 26 October 2019 в 10:46
поделиться

Если вы возвращаете много HTML-кода, лучше всего собрать его на стороне сервера и просто загрузить на страницу.

Если вы возвращаете что-то вроде связки ключей- пары значений для обновления