超级机甲:源能觉醒 - 新版本资料库

JavaScript 代码的书写位置,3种JavaScript代码书写位置及其特点

JavaScript 代码可以写在多个位置,具体取决于你的使用场景和需求。以下是主要的代码书写位置及其特点:

1. HTML 文件内部

(1) 在 标签内

JavaScript 位置示例

​​特点​​:

代码会立即执行可能会阻塞页面渲染通常用于需要尽早执行的代码

(2) 在 标签内(推荐)

JavaScript 位置示例

​​特点​​:

代码在页面内容加载后执行不会阻塞页面渲染可以访问 DOM 元素

2. 外部 JavaScript 文件(最推荐)

JavaScript 位置示例

​​外部文件示例 (main.js)​​:

// 这里是外部 JavaScript 文件的内容

console.log("外部脚本执行");

document.addEventListener("DOMContentLoaded", function() {

console.log("DOM 已完全加载");

});

​​特点​​:

代码与 HTML 分离,易于维护可以被浏览器缓存,提高性能可以复用代码使用 defer 或 async 属性控制加载行为

3. HTML 元素的事件属性(不推荐)

链接

​​特点​​:

直接将 JavaScript 代码写在 HTML 元素的事件属性中不利于维护和代码复用违反了关注点分离原则现代开发中应避免使用

4. JavaScript URL(特殊用途)

点击执行JS

​​特点​​:

主要用于书签工具和小型脚本不适合常规开发

5. 现代模块化写法(ES6+)

​​模块文件示例 (main.js)​​:

import { helperFunction } from './helpers.js';

console.log("模块脚本执行");

helperFunction();

​​特点​​:

支持 ES6 模块系统可以使用 import 和 export默认启用严格模式有独立的作用域

最佳实践建议

​​优先使用外部 JavaScript 文件​​,将代码与 HTML 分离​​将