JavaScript 代码的书写位置,3种JavaScript代码书写位置及其特点
JavaScript 代码可以写在多个位置,具体取决于你的使用场景和需求。以下是主要的代码书写位置及其特点:
1. HTML 文件内部
(1) 在
标签内// 这里的 JavaScript 代码会在页面加载时立即执行
console.log("head 中的脚本执行");
特点:
代码会立即执行可能会阻塞页面渲染通常用于需要尽早执行的代码
(2) 在
标签内(推荐)// 这里的 JavaScript 代码会在页面内容加载后执行
console.log("body 中的脚本执行");
特点:
代码在页面内容加载后执行不会阻塞页面渲染可以访问 DOM 元素
2. 外部 JavaScript 文件(最推荐)
外部文件示例 (main.js):
// 这里是外部 JavaScript 文件的内容
console.log("外部脚本执行");
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM 已完全加载");
});
特点:
代码与 HTML 分离,易于维护可以被浏览器缓存,提高性能可以复用代码使用 defer 或 async 属性控制加载行为
3. HTML 元素的事件属性(不推荐)
特点:
直接将 JavaScript 代码写在 HTML 元素的事件属性中不利于维护和代码复用违反了关注点分离原则现代开发中应避免使用
4. JavaScript URL(特殊用途)
特点:
主要用于书签工具和小型脚本不适合常规开发
5. 现代模块化写法(ES6+)
模块文件示例 (main.js):
import { helperFunction } from './helpers.js';
console.log("模块脚本执行");
helperFunction();
特点:
支持 ES6 模块系统可以使用 import 和 export默认启用严格模式有独立的作用域
最佳实践建议
优先使用外部 JavaScript 文件,将代码与 HTML 分离将