Как расположение тега script на странице влияет на определенную в нем функцию JavaScript?
Я прочитал, что вы должны определить свои функции JavaScript в <head> тег, но как влияет расположение <script> (будь то в <head>, <body>или любой другой тег) влияет на функцию JavaScript.
В частности, как это влияет на область действия функции и откуда ее можно вызвать?
9 ответов
Говоря людям, чтобы добавить <SCRIPT> только в голове это звучит разумно, но, как говорили другие, есть много причин, почему это не рекомендуется или даже не практично - в основном скорость и способ динамического создания HTML-страниц.
Вот что говорит спецификация HTML 4:
Элемент SCRIPT помещает скрипт в документ. Этот элемент может появляться любое количество раз в заголовке или теле документа HTML.
И некоторый пример HTML. Разве это не выглядит красиво все отформатировано здесь:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>
И что-то с нетерпением жду в HTML 5:
Новый асинхронный атрибут в <SCRIPT>:
Примечание: есть способы [sic] выполнения скрипта:
Атрибут async имеет значение "true": сценарий будет выполняться асинхронно с остальной частью страницы, поэтому сценарий будет выполняться, пока страница продолжает анализ.
Атрибут async имеет значение "false", но атрибут defer имеет значение "true": сценарий будет выполнен после завершения анализа страницы.
Нормальные правила игры все еще стоят; не используйте вещи, пока они не определены.:)
Кроме того, обратите внимание, что рекомендация "положить все на дно" - не единственное правило в книге - в некоторых случаях это может оказаться неосуществимым, а в других случаях может иметь смысл размещать сценарий в другом месте.
Основная причина размещения сценария в нижней части документа заключается в производительности: сценарии, в отличие от других HTTP-запросов, не загружаются параллельно, то есть они замедляют загрузку остальной части вашей страницы. Другая причина размещения сценариев в нижней части состоит в том, что вам не нужно использовать какие-либо функции 'DOM ready'. Поскольку тег script находится ниже всех элементов, DOM будет готов для манипуляций!
РЕДАКТИРОВАТЬ: Читать это: http://developer.yahoo.com/performance/rules.html
Одним из аспектов размещения является производительность. Посмотрите эту прекрасную статью в обсуждении YSlow, чтобы узнать, почему иногда рекомендуется размещать их внизу документа.
Что касается вопросов области видимости, то обычные правила видимости для Javascript (переменные, определенные внутри или вне функций, локальные, глобальные, замыкания и т. Д.), Насколько я знаю, не затрагиваются.
Положение тега скрипта имеет значение. Если вы связываете функцию с элементом документа, тогда элемент документа должен быть загружен в первую очередь, прежде чем мы реализуем функцию. предположим, что getTeachers() является функцией в файле getTeachers.js. Это даст вам ошибку:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<span id="results" /></span>
</body>
</html>
Выдает ошибку до первой загрузки head и не может найти элемент с указанным идентификатором. Код ниже является исправлением:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
<span id="results" /></span>
</body>
</html>
Если ваш скрипт ссылается на идентификатор на странице, и страница не была обработана (т. Е. Скрипт выполняется до HTML, или ваш скрипт выполняется с помощью onload, а не DOM готов), вы также можете получить ошибку.
Это не так. Большинство сценариев программирования разбросаны по всей странице. Из-за этого я редко видел проблемы (и только из старых браузеров).
Если вы извлекаете Javascripts через XMLHttpRequest, как сказал Диодей, это, вероятно, не будет работать. В моем случае ошибки не было, браузер просто игнорирует новые скрипты.
Я закончил тем, что использовал это, не очень изящно, но работает для меня до сих пор:
http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/
Как использовать execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/
Примечание: следите за < в этой строке: for(var i=0;i<st.length; i++)
Если у вас есть встроенный скрипт (внешние функции), расположенный перед функциями, которые он может вызывать, вы можете получить сообщение об ошибке, поскольку они могут быть еще недоступны. Не говоря уже о том, что так будет всегда, просто так может быть в зависимости от типа браузера или версии.
Правила области видимости Javascript похожи на perl - вы можете вызывать любую функцию на текущем или любом более высоком уровне области видимости. Единственное ограничение заключается в том, что функция должна быть определена во время ее вызова. Позиция в источнике не имеет значения - имеет значение только позиция во времени.
Вы должны избегать помещения скриптов в <head> если возможно, так как это замедляет отображение страницы (см. ссылку, размещенную Аланом).