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>
  • 使用async属性加载index.js,将会有5次弹窗,首先是”First”,然后是”Second”,接着是页面中的内容,最后是index.js中的代码。
  • 如果改为使用defer属性加载index.js,则会先弹出”First”、”Second”、页面内容,最后是index.js中的代码。
© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容