JavaScript code

尽管 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
Back to Top