怎么页面加载就执行js

一、页面加载就执行JS的方式

页面加载就执行JS的方式有以下几种：在HTML中直接嵌入JS代码、使用window.onload事件、使用DOMContentLoaded事件、利用外部JS文件和模块化加载。 其中，使用window.onload事件是最常见和推荐的方式之一，因为它确保所有页面资源（如图片、样式表等）都已完全加载，再执行JS代码。

window.onload事件在页面完全加载后才执行，这包括所有图片、样式表和子框架等资源。相比之下，DOMContentLoaded事件在DOM树构建完成后就会触发，不必等到所有资源加载完毕。具体选择哪种方式，需要根据实际需求决定。

二、在HTML中直接嵌入JS代码

直接在HTML文档中嵌入JS代码是最基础的方式。我们可以在或标签中插入引入。这种方式有助于代码的模块化和可维护性。

1、在标签中引入外部JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

2、在标签中引入外部JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script src="script.js"></script>
</body>
</html>

六、模块化加载

现代前端开发中，模块化加载（如使用Webpack、Rollup等打包工具）越来越普遍。模块化加载能更好地管理依赖关系，并提高代码的可维护性。

1、使用ES6模块

ES6引入了模块系统，可以通过import和export关键字实现模块化加载。

// module.js
export function sayHello() {
    console.log('Hello World!');
}
// main.js
import { sayHello } from './module.js';
window.onload = function() {
    sayHello();
};

2、使用CommonJS模块

CommonJS模块系统常用于Node.js环境，但也可以通过打包工具在浏览器中使用。

// module.js
exports.sayHello = function() {
    console.log('Hello World!');
};
// main.js
const { sayHello } = require('./module.js');
window.onload = function() {
    sayHello();
};

七、项目团队管理系统的推荐

在开发过程中，合理的项目团队管理系统可以大大提高工作效率。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这两个系统能够提供全面的项目管理功能，帮助团队高效协作。

1、PingCode

PingCode是一款专为研发团队设计的项目管理工具，提供了从需求管理、迭代管理到缺陷管理的全流程解决方案。其强大的功能和灵活的配置，使得团队能够更好地管理和追踪项目进展。

2、Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队。它提供了任务管理、日程安排、文件共享等多种功能，帮助团队成员更好地协作和沟通。

八、总结

页面加载就执行JS的方式有多种选择，包括在HTML中直接嵌入JS代码、使用window.onload事件、使用DOMContentLoaded事件、利用外部JS文件和模块化加载等。不同的方式适用于不同的场景，开发者需要根据实际需求选择合适的方式。同时，合理使用项目团队管理系统如PingCode和Worktile，可以有效提高团队的工作效率和项目管理水平。