一、外链式
外链式即是在HTML文件中使用<script>标签来引入外部JS文件。语法如下:
<script type="text/javascript" src="script.js"></script>
其中type属性是非必需的，默认可以不填，而src属性是必需的，表示需要引入的JS文件路径。在使用外链式的时候，需要注意一下几点：
- src属性中的JS文件路径必须正确，否则无法引入成功；
- 最好把<script>标签放在<head>标签内，并且放在所有内容的前面；
- 如果JS文件的内容较大，可能需要使用defer或async属性，让页面的其他内容能够先加载出来，避免页面卡顿。
二、在HTML中引入JS的三种方法
1、<script>标签嵌入代码
<script>标签可以像这样嵌入一段JS代码：
<script type="text/javascript">
alert("Hello World!");
</script>
这种方式的优点是代码嵌入简单，代码量较少时比较方便。
缺点是代码耦合度比较高，可读性比较差，如果代码较长会影响页面的加载速度和用户体验。
2、内部脚本
内部脚本即是在HTML文件中使用<script>标签来嵌入JS代码。语法如下：
<script type="text/javascript">
function sayHello() {
alert("Hello World!");
}
</script>
这种方式的优点是代码可读性较好，适合小段代码和实现简单逻辑的功能，缺点是如果代码比较多，会使HTML文件变得比较臃肿
3、事件属性
事件属性即是在HTML标签上添加事件属性，来执行JS代码。语法如下：
<button type="button" onclick="alert('Hello World!')">Click me!</button>
这种方式的优点是可以直接在HTML标签上添加事件，逻辑简单，适合单一事件的JS代码实现。缺点是不易于维护和扩展，也不利于代码的重用。
三、使用ES6的模块化
ES6的模块化是一种比较先进的JS引入方式。通常会把JS代码写成模块，然后使用import和export语法来引入和导出模块。语法如下：
在声明模块时，需要用export关键字把模块中需要导出的对象进行导出：
// script.js
export function sayHello() {
alert("Hello World!");
}
在导入模块时，使用import关键字把需要导入的对象导入：
// index.js
import { sayHello } from "./script.js";
sayHello();
这种方式的优点是代码模块化，代码结构清晰，易于维护和重用，适合大型项目的开发。缺点是对于一些老旧的浏览器不支持。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/183260.html
微信扫一扫 
支付宝扫一扫 