自己写的js怎么用

使用自己编写的JavaScript代码的方法包括：通过HTML文件引入、使用浏览器控制台调试、创建独立的JavaScript文件、通过模块化方式管理代码。 其中，通过HTML文件引入是最常见和基础的方式，适用于大部分前端开发需求。你可以通过在HTML文件的<head>或<body>标签中使用<script>标签来引入JavaScript代码，从而在网页加载时执行这些脚本。

一、通过HTML文件引入

在HTML文件中引入JavaScript代码是最常见的使用方式。你可以将JavaScript代码直接嵌入到HTML文件中，也可以将其放在独立的.js文件中，然后在HTML中进行引用。

1.1、内联JavaScript

内联JavaScript是将脚本直接嵌入到HTML文件的<script>标签中。这种方法适用于简单的脚本或临时代码调试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        document.querySelector('h1').textContent = 'Hello, JavaScript!';
    </script>
</body>
</html>

1.2、外部JavaScript文件

将JavaScript代码放在独立的.js文件中是更好的做法，尤其是对于较大的项目。这种方法提高了代码的可维护性和可读性。

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

然后在script.js文件中编写JavaScript代码：

document.querySelector('h1').textContent = 'Hello, JavaScript!';

二、使用浏览器控制台调试

浏览器控制台是开发者调试JavaScript代码的利器。你可以在控制台中直接编写和执行JavaScript代码，观察其效果和调试问题。

2.1、打开浏览器控制台

在大多数浏览器中，你可以通过按下F12键或右键点击页面并选择“检查”来打开开发者工具，然后进入“控制台”标签。

2.2、执行JavaScript代码

在控制台中，你可以直接输入JavaScript代码并按回车键执行。例如：

console.log('Hello, Console!');

控制台会立即显示输出结果，这对于调试和测试代码非常有用。

三、创建独立的JavaScript文件

为你的JavaScript代码创建独立的文件有助于保持代码整洁和模块化。你可以将不同功能的代码分散在多个文件中，然后在HTML中通过多个<script>标签进行引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiple JavaScript Files Example</title>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在script1.js和script2.js中分别编写不同的JavaScript功能：

// script1.js
document.querySelector('h1').textContent = 'Hello from Script 1!';

// script2.js
console.log('Script 2 is loaded!');

四、通过模块化方式管理代码

随着项目规模的扩大，管理复杂的JavaScript代码变得愈发重要。模块化代码可以提高代码的可维护性和重用性。现代JavaScript通过ES6模块化语法（import和export）提供了强大的模块化支持。

4.1、创建模块

你可以将代码分成多个模块文件，每个模块文件导出其功能。

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

4.2、引入模块

在需要使用这些模块的文件中，通过import语句引入它们。

// main.js
import { add, subtract } from './math.js';
console.log(add(2, 3));       // 5
console.log(subtract(5, 2));  // 3

4.3、在HTML中引入模块

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Modules Example</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <h1>Check the console for output</h1>
</body>
</html>

五、使用JavaScript框架和库

在实际开发中，你可能会使用各种JavaScript框架和库来简化工作和提高效率。以下是一些常见的JavaScript框架和库：

5.1、jQuery

jQuery是一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        $(document).ready(function() {
            $('h1').text('Hello, jQuery!');
        });
    </script>
</body>
</html>

5.2、React

React是一个用于构建用户界面的JavaScript库。它通过组件化的方式简化了复杂UI的开发。

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    return <h1>Hello, React!</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));

你可以使用工具如Create React App来快速搭建React项目。

5.3、Vue.js

Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它可以轻松地与其他库或现有项目集成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            }
        });
    </script>
</body>
</html>

六、在项目中使用项目管理工具

在开发过程中，使用项目管理工具可以帮助团队更有效地协作、跟踪任务和管理项目进度。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。

6.1、PingCode

PingCode是一个专为研发团队设计的项目管理系统，提供了需求管理、缺陷跟踪、迭代计划和代码审查等功能。它可以帮助研发团队更好地管理项目进度和质量。

6.2、Worktile

Worktile是一款通用项目协作软件，适用于各种类型的项目管理。它提供了任务管理、时间跟踪、文件共享和团队沟通等功能，有助于团队高效协作和项目成功交付。

七、总结

使用自己编写的JavaScript代码可以通过多种方式实现，包括内联JavaScript、外部JavaScript文件、浏览器控制台调试、模块化管理和使用JavaScript框架和库。根据项目需求选择合适的方法，可以提高代码的可维护性和开发效率。同时，在项目开发过程中，使用项目管理工具如PingCode和Worktile，可以有效地管理项目进度和团队协作。