js怎么写在外面

在JavaScript开发中，将JavaScript代码写在外部文件中可以提高代码的可维护性、可读性和加载性能。将JavaScript代码放在外部文件中的步骤包括：创建一个单独的.js文件、在HTML文件中通过script标签引入、确保文件路径正确。以下是详细的步骤和一些建议：

一、创建外部JavaScript文件

首先，创建一个新的JavaScript文件。例如，可以命名为script.js。在这个文件中，你可以编写所有的JavaScript代码。

// script.js
function sayHello() {
    alert("Hello, World!");
}

二、在HTML文件中引用外部JavaScript文件

在你的HTML文件中，通过<script>标签引入外部的JavaScript文件。确保将<script>标签放在<body>标签的底部，这样可以确保HTML内容先加载，避免潜在的加载问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <button onclick="sayHello()">Click Me</button>
    <script src="script.js"></script>
</body>
</html>

三、确保文件路径正确

确保在<script>标签中的src属性值正确指向外部JavaScript文件的路径。如果JavaScript文件和HTML文件在同一目录下，只需使用文件名即可；如果在不同目录下，需要使用相对路径或绝对路径。

四、多个外部JavaScript文件的引用

如果需要引用多个JavaScript文件，可以在HTML文件中添加多个<script>标签。浏览器会按照顺序加载和执行这些文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <button onclick="sayHello()">Click Me</button>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
</body>
</html>

五、使用模块化的JavaScript

对于大型项目，使用模块化的JavaScript可以提高代码的组织性和可维护性。ES6引入了模块化语法，可以通过import和export关键字进行模块化开发。

// module.js
export function greet(name) {
    return `Hello, ${name}!`;
}

// main.js
import { greet } from './module.js';
console.log(greet('World'));

在HTML文件中，需要使用type="module"属性来引入模块化的JavaScript文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <script type="module" src="main.js"></script>
</body>
</html>

六、总结

将JavaScript代码写在外部文件中是一种良好的开发实践，它能提高代码的可维护性、可读性和加载性能。通过正确引用外部JavaScript文件、确保路径正确、并使用模块化开发，可以使你的项目更加高效和易于管理。

可维护性是指代码分离后，可以更方便地进行更新和调试。例如，当需要修改某个功能时，只需更新对应的JavaScript文件，而不需要在HTML中查找和修改代码。这种分离还允许多个开发人员同时工作，分工明确，提高开发效率。

希望这篇文章能够帮助你更好地理解和应用外部JavaScript文件的使用方法。