实现js的方式

内联脚本

在HTML文件中直接使用<script>标签编写JavaScript代码。适用于简单脚本或快速测试。

<script>
  console.log("内联脚本示例");
</script>

外部脚本文件

将JavaScript代码保存在独立的.js文件中，通过<script>标签的src属性引入。便于代码复用和维护。

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

DOM事件属性

在HTML元素的事件属性（如onclick、onload）中直接编写JavaScript代码。通常用于简单交互。

<button onclick="alert('按钮被点击')">点击</button>

动态脚本加载

通过JavaScript动态创建<script>元素并插入到DOM中。适用于按需加载脚本。

const script = document.createElement('script');
script.src = 'dynamic.js';
document.body.appendChild(script);

模块化导入（ES6）

使用import/export语法组织模块化代码，需在<script>标签中设置type="module"。

<script type="module" src="module.js"></script>

Web Worker

通过Worker API在后台线程运行脚本，避免阻塞主线程。

const worker = new Worker('worker.js');
worker.postMessage('数据');

框架/库集成

借助React、Vue等框架的组件化机制嵌入JavaScript逻辑。例如Vue的单文件组件：

<script setup>
  const message = 'Hello Vue';
</script>
<template>{{ message }}</template>