# Django 5.2.8 documentation

# JavaScript 代码

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

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

## 编码风格

- 请遵循 `.editorconfig` 文件中指定的缩进样式。我们建议使用支持 EditorConfig 的文本编辑器，以避免缩进和空格方面的问题。大多数 JavaScript 文件使用 4 个空格进行缩进，但也有一些例外情况。

- 在命名变量时，请使用 `camelCase` 而不是 `underscore_case`。不同的 JavaScript 文件有时使用不同的代码风格。请尽量遵循每个文件的代码风格。

- 使用 ESLint 代码检查工具来检查你的代码是否有错误和风格问题。在运行 JavaScript 测试时将会运行 ESLint。我们还建议在你的文本编辑器中安装一个 ESLint 插件。

- 在可能的情况下，编写的代码应该能够在以后通过 JavaScript 更改页面结构时仍然正常工作。例如，在绑定点击处理程序时，使用 `$('body').on('click', selector, func)` 而不是 `$(selector).click(func)`。这样可以更容易地通过 JavaScript 扩展 Django 的默认行为。

## JavaScript 补丁

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

## JavaScript 测试

Django 的 JavaScript 测试可以在浏览器中运行，也可以从命令行运行。测试位于顶级 js_tests 目录中。

### 编写测试

Django 的 JavaScript 测试使用 QUnit。以下是一个示例的测试模块：

    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 支持的断言类型 的信息。

### 运行测试

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

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

要从 Web 浏览器中运行测试，请在浏览器中打开 js_tests/tests.html 文件。

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

- 请在根目录下执行 `python -m http.server` 命令（而不是在 `js_tests` 目录内执行）。

- 在您的网页浏览器中打开 http://localhost:8000/js_tests /tests.html。

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

要从命令行运行测试，你需要安装 Node.js。

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

/ 

    $ npm install

    ...\> npm install

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

/ 

    $ npm test

    ...\> npm test