Обычно вы используете раздел Scripts
для управления местоположением, в котором ваши сценарии отображаются в документе.Как работают браузеры, они будут интерпретировать HTML сверху вниз.Если они встретят тег <script>
, они приостановят рендеринг HTML и сначала интерпретируют JavaScript.Для внешних файлов JavaScript это означает, что они будут сначала включены и интерпретированы (если они не помечены как defer
или async
).
Таким образом, обычной практикой является добавление JavaScript в концетега <body>
.Таким образом, сценарии не будут препятствовать визуализации документа в первую очередь, но они также будут выполняться достаточно рано, чтобы иметь возможность немедленно получить эффект.Кроме того, поскольку они выполняются после того, как большая часть <body>
уже интерпретирована, они могут напрямую обращаться к элементам DOM.Поэтому вам обычно не нужно сначала прослушивать другое событие DOM, прежде чем вы сможете что-то сделать с DOM.
Например, это будет работать просто отлично:
<body>
<div id="foo"></div>
<script>
var foo = document.getElementById('foo');
</script>
</body>
Однако, еслиу вас было <script>
до <div>
(или внутри <head>
), сценарий не смог бы найти элемент foo
просто потому, что он еще не добавлен в DOM.
Для ASP.NET Core это означает, что вы должны убедиться, что ваш раздел Scripts
добавлен в конец вашего тега <body>
внутри вашего файла макетов.Таким образом, это должно выглядеть так:
<!-- (The rest of the layout) -->
@RenderSection("Scripts", required: false)
</body>
</html>
Вы также можете добавить теги сценария перед вызовом RenderSection
, чтобы убедиться, что эти сценарии доступны на всех страницах, но загружены до других сценариев.,Например, если вы используете Bootstrap и хотите использовать jQuery, возможно, имеет смысл включить это глобально для всех страниц.Но поскольку он у вас есть до других сценариев, он доступен для других сценариев.
Что касается зависимостей между сценариями, убедитесь, что сценарии включены в том порядке, в котором они должны выполняться.Поэтому, если у вас есть сценарий B, который зависит от функций в сценарии A, обязательно включите A перед B. Но тогда, без использования defer
или async
, просто включение их должно работать нормально.