JS引入方式和基本属性是什么?

在Web开发中，JavaScript是一种常用的脚本语言，可以实现动态交互效果和复杂的前端逻辑。为了让JavaScript代码能够被浏览器正确执行，我们需要将其引入到HTML页面中。本文将详细介绍JavaScript的引入方式和一些基本属性。

一、JavaScript的引入方式

JavaScript的引入方式有两种常用方法：直接在页面中写入和引入外部JS文件。

1、在页面中直接写入

可以使用<script>标签将JavaScript代码直接写入HTML页面中，例如：

<script>
alert("Hello, World!");
</script>

2、引入外部JS文件

通过 src 引入，此时 script 标签内添加任何js代码都不起效果。

<script src="js/script.js"></script>

其中，src属性指定了外部JS文件的路径。

动态引入JS的四种方式：

1、使用document.write方法

document.write("<script src='test.js'><\/script>");

但这种方式会将当前页面全覆写掉，不推荐使用。

2、动态改变已有<script>的src属性

var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);

通过创建一个新的<script>元素，并修改其src属性，然后将其添加到<head>标签中，实现动态引入。

3、动态创建<script>元素

var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);

通过使用document.createElement方法创建一个新的<script>元素，然后设置其src属性，并将其添加到<head>标签中。

4、基于Ajax请求的（推荐）

function includeJS(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var script = document.createElement("script");
script.text = xhr.responseText;
document.head.appendChild(script);
}
};
xhr.send();
}
includeJS("test.js");

通过使用XMLHttpRequest对象发送GET请求获取JS文件的内容，然后创建一个新的<script>元素，设置其text属性为获取到的JS代码，并将其添加到<head>标签中。

二、引入JavaScript的基本属性

1、type属性

在<script>标签中，可以使用type属性指定引入的是JavaScript文件，但这是默认属性，可以省略不写。

<script src="index.js" type="text/javascript"></script>

2、async属性

使用async属性可以异步加载JS文件，即在加载JS文件过程中，页面会继续渲染和执行其他代码。默认情况下是同步加载（即阻塞加载，直到JS文件加载完成后再继续渲染和执行）。

<script src="index.js" async></script>

3、defer属性

使用defer属性可以延迟执行JS文件，即在页面加载完成后再执行JS代码。与async属性不同的是，defer保证了JS文件的执行顺序与其在页面中的顺序一致。

<script src="index.js" defer></script>

async和defer的区别：

async：异步加载，JS文件加载完成后立即执行，不影响页面渲染。多个async属性的JS文件的执行顺序不确定。
defer：延迟执行，JS文件在页面加载完成后按照其在页面中的顺序依次执行，不影响页面渲染。

例如：

<script src="index.js" async></script>
<script>
alert("First");
</script>
<script>
alert("Second");
</script>
<h1>Hello, World!</h1>
<script>
alert("Third");
</script>
<script>
alert("Fourth");
</script>