Чи погана практика вбудовувати JavaScript у тіло HTML?

Question 1

Команда, над якою я працюю, узяла звичку використовувати <script>теги в довільних місцях в тілі наших HTML-сторінок. Наприклад:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

Я раніше цього не бачив. Здається, це працює в декількох браузерах, які я протестував. Але, наскільки мені відомо, невірно розміщувати теги скриптів у таких місцях.

Я помиляюся? Наскільки погано, що ми поміщаємо теги скриптів у такі теги div? Чи є проблеми зі сумісністю браузера, про які я повинен знати?

Question 2

Це цілком справедливо.

Ви не хотіли б розміщувати там великі великі блоки коду, змішані там у розмітці (краще використовувати зовнішні сценарії), але це може бути корисно для:

додати додаткову інформацію про прив’язку для поступового вдосконалення (де ці дані складно вписати в назву класу або інший підхід до приховування розширеної інформації в атрибутах); або
де необхідно якомога швидше розпочати вдосконалене сценарієм (а не чекати завантаження вікна / готовності до документа). Прикладом цього може бути автофокус, який може дратувати при занадто пізньому спрацьовуванні.

Можливо, ви думаєте про <style>елементи, які заборонені <body>(хоча більшість браузерів це дозволяють).

Question 3

Насправді, це досить часто. Наприклад , код відстеження аналітики Google використовує саме такий синтаксис:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Якщо це досить добре для Google ...

Question 4

Він дійсний, і, залежно від вашого серверного фреймворку та природи коду, іноді його дуже важко уникнути.

Question 5

Як згадували кілька людей, він дійсний, працює і широко використовується.

Найкращою практикою, наскільки семантика рекомендує (або принаймні використовується для рекомендації), є розміщення тегів сценаріїв усередині заголовка.

Більш сучасні найкращі практики, що враховують продуктивність, рекомендують розміщувати теги скриптів (зовнішні та вбудовані) внизу праворуч перед тегом тіла, щоб дозволити розмітку повністю відтворюватися перед виконанням будь-якого коду JavaScript.

Для полегшення розуміння та обслуговування коду рекомендується використовувати "ненав’язливий JavaScript", коли код знаходиться у зовнішньому файлі та пов’язує події з DOM (Google ненав’язливий JavaScript).

Одним з випадків, коли корисно мати вбудований JavaScript, є ініціалізація змінних зі значеннями, які існують лише на стороні сервера, які згодом будуть використовуватися зовнішнім кодом JavaScript.

Question 6

Я вважаю за краще вкладати в голову посилання на зовнішні сценарії та сценарії, які запускають процес та ініціалізують віджети та інше в тілі.

Проблема, з якою дуже легко зіткнутися, полягає в тому, що елемент сценарію в тілі не може отримати доступ до елементів, які з’являються після нього. Крім того, пов'язаною з цим неприємною проблемою сумісності браузера є той факт, що IE не дозволяє елементам сценарію змінювати елемент, в якому вони перебувають. Тож якщо у вас є це:

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

IE не збирається сподобатися вашій сторінці. Старі версії IE давали дуже загадкові повідомлення про помилки для цієї або навіть порожньої сторінки, але IE8, здається, давав описове повідомлення про помилку.

Поки ви переконуєтесь, що ваші сценарії отримують доступ лише до DOM, який є безпечним для доступу, я не думаю, що це погано вкладати елементи сценарію в тіло. Насправді, IMHO, розміщення скриптів, які ініціалізують віджети після відповідних елементів, може бути більш читабельним, ніж розміщення всього в одному місці (і я вважаю, що це може також змусити їх запуститися раніше, що змушує речі стрибати менше, коли сторінка завантажується).

Question 7

Це дійсно!

Ви можете використовувати:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

Не думаю, що ви можете сказати, чи це взагалі погана практика. Ви повинні сказати у справі. Але впевнений, що добре мати весь свій код JavaScript в одному місці. Це трохи брудно, якщо у вас є невеликі фрагменти коду JavaScript у всьому вашому файлі HTML.

Question 8

Я раніше цього не бачив. Здається, це працює в декількох браузерах, які я протестував. Але, наскільки мені відомо, невірно розміщувати теги скриптів у таких місцях.

Це дійсно, але не є хорошою (або рекомендованою) практикою.

Я помиляюся? Наскільки погано, що ми поміщаємо теги скриптів у такі теги div? Чи є проблеми зі сумісністю браузера, про які я повинен знати?

Немає проблем розмістити знак <script>під будь-якими іншими елементами (але він повинен бути всередині <head>або <body>). Також немає проблем щодо сумісності браузерів, однак вбудовування JS-скриптів на веб-сторінках має серйозні недоліки (як / чому вони вважаються поганими) :

Додає ваги сторінки
Складність (або, можливо, неможлива) для мініфікації
Неможливо перенести або використовувати для інших сторінок
Неможливо кешувати (потрібно завантажувати кожного разу, коли сторінка завантажується)
Відсутність поділу проблем (важче підтримувати)

Question 9

Однак це також добре тим, що ви знаєте, що код JavaScript, необхідний для розділу HTML, буде там для нього. Замість того, щоб доводити стверджувати та створювати певне включення у верхній частині файлу.

Отже, замість "якщо ви збираєтеся використовувати цей HTML, переконайтеся, що ви імпортуєте xyz.js", ви можете просто включити HTML і закінчити з ним.

Отже, це не обов’язково жахливе зло. Можливо, не надзвичайно дивовижний, але не зовсім страшний. Це як би залежить від наміру.

Question 10

Див. Користувальницький інтерфейс Yahoo для кращих практик: http://developer.yahoo.com/performance/rules.html (JavaScript внизу сторінки)

Question 11

Це, звичайно, законно; Я бачив це на кількох сторінках тут на Exforsys .

Зараз це навчальний сайт, що демонструє основи HTML та JavaScript, тому в цьому контексті це цілком зрозуміло. Однак я не хотів би бачити це у виробничому коді для чогось більшого, ніж просте твердження чи два. Не бачачи того, що ви замінили, // Some JavaScript code hereя не хотів би коментувати.

Однак із цим не повинно виникати проблем із браузером.

Question 12

Допустимо додати <script> в body , але Internet Explorer це насправді не любить. Тому, щоб бути в безпечнішій стороні, переконайтесь, що ваші сценарії містяться всередині тегу <head>.

Це справді створювало хаос (особливо для Internet Explorer) у проекті, над яким ми працюємо.

Question 13

Я припускаю, що ваша команда робить це або тому, що вони хочуть динамічно вставити сценарій, або що вони пишуть сценарій, який запускатиметься під час завантаження сторінки.

Я б не сказав, що в цьому є щось погане, коли АБСОЛЮТНО НЕОБХІДНО (поки це знаходиться в блоці CDATA), але поза цим я рекомендую вашій команді використовувати бібліотеку скриптів, як Prototype або jQuery, і зберігати сценарії, зовнішні для сторінки. Зазвичай це чистіше, і бібліотеки іноді примушують трохи чистоти до коду, чого я б, впевнений, зараз не відбувається.

Я також не запускав би трудомістких функцій у вбудованих тегах скриптів, оскільки це відбувається при завантаженні сторінки, і, як сказав Джейсон вище, це може уповільнити завантаження сторінки. Усі бібліотеки сценаріїв мають охайні функції, які дозволяють робити щось під час завантаження сторінки та дають вам можливість, коли при завантаженні сторінки їх запускати, наприклад, після завантаження DOM.

Question 14

Це одна з багатьох, багатьох найкращих практик, яка стосується як покращення продуктивності, так і вдосконалення вашого підходу до програмування.

Врешті-решт у веб-розробці, вихід продукту має найбільше значення!

Question 15

Він цілком дійсний, хоча може зашкодити ремонтопридатності. Див. Також Де слід розміщувати теги <script> у розмітці HTML? і чому виклик цієї функції jQuery не вдається у Firefox? .

Question 16

Часто вказувана рекомендація щодо збереження скриптів у заголовку полягає у забезпеченні завантаження сценарію перед його викликом. Це питання лише для певних обробників подій. Для інших типів сценаріїв це не має значення, а для деяких типів (наприклад, document.write) це не має ніякого сенсу.

Question 17

Якщо у вас є редактор, який може одночасно обробляти як синтаксис HTML, так і JavaScript. І якщо ви хочете спочатку прочитати кілька рядків HTML, а потім JavaScript cpde ... звичайно. Дій.

Question 18

Кілька речей:

Це повністю дійсний код.
Це абсолютно не рекомендується.

Це значно уповільнює завантаження вашої сторінки, оскільки код JavaScript повинен виконуватися, перш ніж будь-яка інша частина сторінки зможе відтворити. Якщо ви багато працюєте з цим кодом JavaScript, ваш браузер може зависнути. Спробуйте (коли це можливо) завантажувати код JavaScript динамічно та в кінці сторінки (бажано перед </body>тегом).

Придбайте та прочитайте високопродуктивний JavaScript . Це змінить спосіб написання коду JavaScript.