JS基础：js的2种基本用法，4个属性详解-CSDN博客

本文链接：https://blog.csdn.net/u013179804/article/details/138475866

本文介绍了HTML<script>标签的两种基本用法，内联JavaScript和外部JavaScript文件，强调了使用外部文件的代码复用、维护和性能优势。同时详细讲解了src属性的相对路径和绝对路径选择，以及async和defer属性对脚本加载和执行的影响。

摘要由CSDN通过智能技术生成

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

300篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端基础路线”可获取前端基础学习路线

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

今天我们来看看 <script> 标签的一些写法和属性吧。

1、内联 JavaScript：直接在 <script> 标签内部编写 JavaScript 代码。

代码如下：

<script>
  // JavaScript 代码放在这里
  document.getElementById('title').innerHTML = 'hello world!'
</script>

2、外部 JavaScript 文件：是将 JavaScript 代码存储在一个单独的文件中，然后在 HTML 文档中使用<script>标签的src属性来引入这个文件。

比如，下面的写法，引入相对路径 js 文件夹下面的 script.js 文件，外部文件的写法就是内联方式标签里的内容。

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

2者相比，最好使用 src 外部引入，它的优势如下几点：

代码复用：将 JavaScript 代码存储在一个单独的文件中，可以方便地在多个页面中复用这些代码。

代码维护：将 JavaScript 代码存储在一个单独的文件中，可以方便地进行代码的维护和修改。

提高性能：将 JavaScript 代码存储在一个单独的文件中，可以提高页面的加载速度。

需要注意的是，<script> 标签可以放在 HTML 文档的任何位置，但是为了保证代码的可读性和可维护性，最好将<script>标签放在<body>标签的底部，或者放在<head>标签中。

接下来，我们来看看它的 4 个属性。

一、 src：指定外部 JavaScript 文件的路径。

路径有相对路径和绝对路径两种。

（1）相对路径。是指相对于当前 HTML 文档的路径，也最为常见，它的写法有3种，比如：

（2）绝对路径。是指从根目录开始的完整路径。绝对路径的写法是/path/to/file.js，其中path/to/file.js是要引入的 JavaScript 文件的完整路径。

其实这个路径，我们和前面超链接HTML基础：超链接那篇文的写法是一样的，可以看看。

那在外部引入 JavaScript 文件时，最好用哪种呢？我认为最好是使用相对路径，它有以下几个好处：

可移植性：相对路径是相对于当前 HTML 文件的位置，而不是固定的绝对路径。这意味着，如果你将整个项目移动到其他位置或服务器上，相对路径仍然有效，而无需修改 JavaScript 文件的路径。这样可以提高项目的可移植性，使其更容易在不同环境中运行。
简洁性：相对路径通常比绝对路径更简洁，因为它们不包含完整的文件系统路径。这使得代码更易于阅读和理解，尤其是在项目结构复杂的情况下。
避免依赖于特定的服务器配置：绝对路径可能会受到服务器配置的影响，例如服务器的根目录位置或虚拟主机设置。使用相对路径可以避免这种依赖，确保代码在不同的服务器环境中都能正常工作。
团队协作方便：在团队开发中，使用相对路径可以减少因为文件路径不一致而导致的问题。

然而，在某些情况下，绝对路径可能也是合适的，例如：

总的来说，在大多数情况下，使用相对路径是一个更好的选择。但具体使用哪种路径方式，还需要根据实际情况来决定。

二、 type：指定脚本的 MIME 类型，默认为 text/javascript。所以，基础学习中，我们不写 type 也没问题。

<script type="text/javascript">  // 不写type属性也可以
  // JavaScript 代码放在这里
</script>

三、 async：表示脚本将异步加载，浏览器会并行下载脚本，不阻塞页面的解析，但会阻塞文档的加载和渲染直到脚本执行完毕。

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

四、 defer：表示脚本将在文档解析完成后，且在 DOMContentLoaded 事件触发前执行。多个带有 defer 属性的脚本会按照它们在文档中出现的顺序执行。适用于脚本依赖于文档的解析，并且希望在文档解析完成后再执行脚本。

那假设你有一个外部 JavaScript 文件 app.js，你想在文档加载完毕后再执行它，可以这样写：

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

如果你需要立即执行内联脚本，可以这样写：

<body onload="console.log('页面开始加载');">
  <!-- 页面内容 -->
  <script>
    // 页面加载时立即执行的脚本
  </script>
</body>

使用时候，需要注意以下 2 点：

OK，本文完。