html的script标签如何引入js文件?

说实话，当我第一次接触网页时，我对这三种写法确实很困惑。
内联样式？ 嵌入式？ 外部链接？ 这让我头疼。

老实说，内联样式相当方便。
比如我写了一个按钮，想点击的时候弹出“hello”，就可以在<button onclick=alert('hello')">点击我弹出hello</button>中写alert('hello')即可。
当代码量很小的时候，这真的很酷。
代码和HTML混合在一起，一眼就能看出它在做什么。
但后来项目变大了，几十万行JS代码全部用HTML写了。
网页变得一片混乱。
要更改需求，我必须遍历整个 HTML 文件才能找到相应的 JS。
当时我真想把电脑砸了。

内置的更好。
后来接触了一个项目。
老板要求代码要标准化，于是他单独取出JS代码，放在[xss_clean]标签中。
像这样：
<脚本> 函数 sayHello() { 警报（'你好'）； } document.getElementById('myButton').onclick = sayHello; [xss_clean]
可以放在<head>中，也可以放在<body>的末尾。
这种代码和HTML分离的编写方式，页面加载速度确实更快，因为浏览器不需要先加载JS再解析HTML。
而且你看，JS 代码是它自己的系统，更容易修改。
但有一个坑，就是多个页面使用同一个JS，就得复制粘贴，效率不高。

最常用的是外部链接类型。
说白了，这是现在9 9 %的网站都采用的方法。
您可以将 JS 代码放入一个单独的文件中，例如 myScript.js，然后在 HTML 中使用 [xss_clean][xss_clean] 链接它。
我有一个项目，其中数百个页面使用相同的 common.js。
每次更新只需要更改一个文件，所有页面都会自动生效。
这种编写代码的方式具有极高的可重用性，并且维护它是一场噩梦变成了天堂。
当然，前提是你要保证JS文件确实存在，并且路径不能写错，否则浏览器会给你一个4 04 惊喜。

归根结底，这三种方法各有各的缺陷。
直插式适合超简单场景，内置式适合小型项目，外链式是大型厂商的标配。
不过，现在前端框架正在兴起，很多地方已经不再使用这种老式的写法了，但是了解清楚至少可以让你明白别人写的代码是做什么的。

html文件中怎样正确引入JavaScript文件

上周一位客户问我如何将 JavaScript 文件插入 HTML 文件。
嗯，这实际上很简单。
首先，您需要在 HTML 页面上找到放置此脚本的正确位置。

一般来说，有两个常见的地方可以插入JavaScript代码。
第一个位于页面顶部。
插入它。
如果要加载内容后运行，请将其添加到<body>末尾。

接下来您需要在适当的位置添加此代码：
[xss_clean][xss_clean]
这里使用 src 属性来指定 JavaScript 文件的路径。
将 JavaScript 文件放置在与 HTML 文件相同的目录中可以简化文件名的路径。
例如，如果您的 JavaScript 文件名为 script.js，则代码为：
[xss_clean][xss_clean]
另一种方法是直接在 HTML 文档中编写 JavaScript 代码，而不使用外部文件。
可以直接在[xss_clean]标签中写入：
<脚本> JavaScript 代码 </脚本>
这适用于非常简单或您只想测试的脚本。
但是，如果您有复杂的脚本，最好将它们保存在单独的文件中，以便于管理和维护。

引入外部JavaScript文件后，浏览器会自动加载并执行这些代码。
为确保一切顺利进行，请记住以下几点提示：
1 将所有外部脚本文件放在页面底部，这样它们就不会阻止页面内容加载。
2 . 可以使用async或defer属性异步加载脚本或延迟执行，使页面渲染不被阻塞。
3 . 请务必检查 JavaScript 文件的路径以确保其正确。

这允许您的 HTML 页面正确合并 JavaScript 文件，从而改进页面的功能和用户体验。
无论如何，这取决于你，但记住这些小细节总是好的。
我仍在思考这个问题，并且将来可能会分享更多的 Web 开发技巧。