---
title: "JavaScript 代码"
version: 6.1
locale: zh-hans
source: https://docs.djangoproject.com/zh-hans/6.1/internals/contributing/writing-code/javascript/
canonical: https://djangodocs.dev/zh-hans/6.1/internals/contributing/writing-code/javascript/
---
# JavaScript 代码

尽管 Django 核心大部分是 Python，但 `admin` 和 `gis` 附加应用包含 JavaScript 代码。

在编写用于包含在 Django 中的 JavaScript 代码时，请遵循以下编码标准：

## 编码风格

- 请遵循 `.editorconfig` 文件中指定的缩进样式。我们建议使用支持 [EditorConfig](https://editorconfig.org/) 的文本编辑器，以避免缩进和空格方面的问题。大多数 JavaScript 文件使用 4 个空格进行缩进，但也有一些例外情况。
- 在命名变量时，请使用 `camelCase` 而不是 `underscore_case`。不同的 JavaScript 文件有时使用不同的代码风格。请尽量遵循每个文件的代码风格。
- Use the [Biome](https://biomejs.dev/) code linter to check your code for bugs and style errors.
  Biome will be run by the pre-commit hooks. We also recommended installing
  a Biome plugin in your text editor.
- 在可能的情况下，编写的代码应该能够在以后通过 JavaScript 更改页面结构时仍然正常工作。例如，在绑定点击处理程序时，使用 `$('body').on('click', selector, func)` 而不是 `$(selector).click(func)`。这样可以更容易地通过 JavaScript 扩展 Django 的默认行为。

## JavaScript 补丁

Django 的管理系统利用 jQuery 框架来增强管理界面的功能。同时，强调管理 JavaScript 的性能和尽量减少整体管理媒体文件的大小。

## JavaScript 测试

Django 的 JavaScript 测试可以在浏览器中运行，也可以从命令行运行。测试位于顶级 [js\_tests](https://github.com/django/django/blob/stable/6.1.x/js_tests) 目录中。

### 编写测试

Django 的 JavaScript 测试使用 [QUnit](https://qunitjs.com/)。以下是一个示例的测试模块：

```javascript
QUnit.module('magicTricks', {
    beforeEach: function() {
        const $ = django.jQuery;
        $('#qunit-fixture').append('<button class="button"></button>');
    }
});

QUnit.test('removeOnClick removes button on click', function(assert) {
    const $ = django.jQuery;
    removeOnClick('.button');
    assert.equal($('.button').length, 1);
    $('.button').click();
    assert.equal($('.button').length, 0);
});

QUnit.test('copyOnClick adds button on click', function(assert) {
    const $ = django.jQuery;
    copyOnClick('.button');
    assert.equal($('.button').length, 1);
    $('.button').click();
    assert.equal($('.button').length, 2);
});
```

请参考 `QUnit` 文档，了解 [QUnit 支持的断言类型](https://api.qunitjs.com/assert/) 的信息。

### 运行测试

JavaScript 测试可以在网页浏览器或命令行中运行。

#### 通过网页浏览器进行测试

要从 Web 浏览器中运行测试，请在浏览器中打开 [js\_tests/tests.html](https://github.com/django/django/blob/stable/6.1.x/js_tests/tests.html) 文件。

在运行测试时测量代码覆盖率，您需要通过 HTTP 查看该文件。要查看代码覆盖率：

- 请在根目录下执行 `python -m http.server` 命令（而不是在 `js_tests` 目录内执行）。
- 在您的网页浏览器中打开 [http://localhost:8000/js\_tests](http://localhost:8000/js_tests) /tests.html。

#### 通过命令行进行测试

要从命令行运行测试，你需要安装 [Node.js](https://nodejs.org/)。

安装完 `Node.js` 后，可以通过在 Django 检出的根目录中运行以下命令来安装 JavaScript 测试的依赖项：

```console
$ npm install
```

*Windows*

```doscon
...\> npm install
```

然后使用以下命令运行测试：

```console
$ npm test
```

*Windows*

```doscon
...\> npm test
```