怎么在代码里加js

在代码里加JS的方法主要包括：内联脚本、内部脚本、外部脚本。 内联脚本是将JavaScript代码直接嵌入HTML标签中，内部脚本是将JavaScript代码写在HTML文件的<script>标签之间，外部脚本是将JavaScript代码保存在独立的.js文件中并在HTML文件中引用。推荐使用外部脚本，因为这样可以提高代码的可维护性和复用性。

一、内联脚本

内联脚本是将JavaScript代码直接嵌入到HTML标签的属性中，例如onclick、onmouseover等事件属性。虽然这种方式简单直接，但不推荐在实际项目中广泛使用，因为它会导致HTML和JavaScript代码混杂在一起，影响代码的可读性和可维护性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Script Example</title>
</head>
<body>
    <button onclick="alert('Hello, World!')">Click Me</button>
</body>
</html>

二、内部脚本

内部脚本是将JavaScript代码写在HTML文件的<script>标签之间。这种方式可以避免内联脚本的混杂问题，但仍然会导致HTML和JavaScript代码在同一个文件中，不利于代码复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Script Example</title>
    <script>
        function showAlert() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

三、外部脚本

外部脚本是将JavaScript代码保存在独立的.js文件中，并在HTML文件中通过<script>标签引用。这种方式不仅可以提高代码的可维护性和复用性，还可以通过浏览器缓存机制提高页面加载速度。

1. 创建外部JavaScript文件

首先，创建一个名为script.js的文件，并在其中写入JavaScript代码。

// script.js
function showAlert() {
    alert('Hello, World!');
}

2. 在HTML文件中引用外部JavaScript文件

然后，在HTML文件的<head>或<body>标签中，通过<script>标签引用script.js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script Example</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

推荐使用外部脚本，因为这种方式可以使HTML和JavaScript代码分离，提高代码的可维护性和复用性。

四、使用模块化脚本

现代Web开发中，模块化脚本可以提高代码的组织性和可维护性。使用ES6模块可以将JavaScript代码划分为不同的模块，每个模块可以独立开发和测试。

1. 创建模块文件

首先，创建一个名为module.js的文件，并在其中定义模块代码。

// module.js
export function showAlert() {
    alert('Hello from Module!');
}

2. 在主文件中引用模块

然后，在HTML文件的<script>标签中，通过type="module"属性引用模块文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Script Example</title>
    <script type="module">
        import { showAlert } from './module.js';
        document.querySelector('button').addEventListener('click', showAlert);
    </script>
</head>
<body>
    <button>Click Me</button>
</body>
</html>

五、使用JavaScript框架和库

在实际项目中，使用JavaScript框架和库可以大大简化开发工作，提高开发效率和代码质量。以下是一些常用的JavaScript框架和库：

jQuery：一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。
React：一个用于构建用户界面的JavaScript库，允许开发者以声明的方式构建交互丰富的用户界面。
Vue.js：一个渐进式JavaScript框架，用于构建用户界面，特别适合用于单页面应用（SPA）开发。
Angular：一个由Google维护的前端框架，用于构建动态的Web应用。

1. 使用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                alert('Hello, World with jQuery!');
            });
        });
    </script>
</head>
<body>
    <button>Click Me</button>
</body>
</html>

2. 使用React

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Example</title>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function App() {
            return (
                <button onClick={() => alert('Hello, World with React!')}>Click Me</button>
            );
        }
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

六、总结

在代码里加JS的方法主要包括：内联脚本、内部脚本、外部脚本。 推荐使用外部脚本，因为这种方式可以使HTML和JavaScript代码分离，提高代码的可维护性和复用性。此外，现代Web开发中，使用模块化脚本和JavaScript框架（如React、Vue.js、Angular）可以大大简化开发工作，提高开发效率和代码质量。在实际项目中，选择适合的方式和工具，以提高代码的可维护性和复用性为目标，是每个开发者应当遵循的原则。