使用<script>的方式有两种

使用<script>的方式有两种

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

使用<script>的方式有两种：直接在网页中嵌入JavaScript代码，在网页中引入外部JavaScript文件。

1.网页中嵌入JavaScript代码

1、使用方式

要嵌入行内JavaScript代码，直接把代码放在<script>标签中就行：

<script>
    function hello() {
        console.log("大前端之旅!!!");
    }
</script>

包含在<script>内的代码会被从上到下解释。在上面的代码中，被解释的是一个函数定义，并且该函数会被保存在解释器环境中。在<script>标签中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。

2、使用注意点

在使用行内JavaScript代码时，要注意代码中不能出现字符串</script>。比如，下面的代码会导致浏览器报错：

<script>
    function sayScript() {
        console.log("</script>");
    }
</script>

浏览器解析行内脚本的方式决定了它在看到字符串</script>时，会将其当成结束的</script>标签。想避免这个问题，只需要转义字符“\”即可：

<script>
    function sayScript() {
        console.log("<\/script>");
    }
</script>

这样修改之后，代码就可以被浏览器完全解释，不会导致任何错误。

2.网页中引入外部JavaScript文件

1、使用方式

要包含外部文件中的JavaScript，就必须使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件，比如：

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

以上代码在页面中加载了一个名为sample.js的外部文件。文件本身只需包含要放在<script>的起始及结束标签中间的JavaScript代码。与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。（阻塞时间也包含下载文件的时间。）在XHTML文档中，可以忽略结束标签，比如：

<script src="sample.js"/>

以上语法不能在HTML文件中使用，因为它是无效的HTML，有些浏览器不能正常处理，比如IE。

2、使用注意点

使用了src属性的<script>标签不应该再在<script>和</script>标签中包含其他JavaScript代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

3、可以解决跨域问题

关于<script>标签的一个最为强大、同时也备受争议的特性是，它可以包含来自外部域的JavaScript文件。跟标签很像，<script>标签的src属性可以是一个完整的URL，而且这个URL指向的资源可以跟包含它的HTML页面不在同一个域中，比如下面代码：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

浏览器在解析这个资源时，会向src属性指定的路径发送一个GET请求，以取得相应资源，假定是一个JavaScript文件。这个初始的请求不受浏览器同源策略限制，但返回并被执行的JavaScript则受限制。当然，这个请求仍然受父页面HTTP/HTTPS协议的限制。

来自外部域的代码会被当成加载它的页面的一部分来加载和解释。这个能力可以让我们通过不同的域分发JavaScript。不过，引用了放在别人服务器上的JavaScript文件时要格外小心，因为恶意的程序员随时可能替换这个文件。在包含外部域的JavaScript文件时，要确保该域是自己所有的，或者该域是一个可信的来源。<script>标签的integrity属性是防范这种问题的一个武器，但这个属性也不是所有浏览器都支持。

多个script标签时浏览器解释顺序

不管包含的是什么代码，浏览器都会按照<script>在页面中出现的顺序依次解释它们，前提是它们没有使用defer和async属性。第二个<script>标签的代码必须在第一个<script>标签的代码解释完毕才能开始解释，第三个则必须等第二个解释完，以此类推。

参考文章

《JavaScript高级程序设计》