JavaScript 代码

虽然大部分 Django 核心是 Python，但admin和gis 贡献应用程序包含 JavaScript 代码。

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

代码风格

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

  • 命名变量时，请使用camelCase而不是underscore_case。不同的 JavaScript 文件有时会使用不同的代码风格。请尝试符合每个文件的代码风格。

  • 使用ESLint 代码 linter 检查代码中的错误和样式错误。运行 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 浏览器或命令行中运行。

在 Web 浏览器中进行测试

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

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

从命令行进行测试

要在命令行中运行测试，需要安装Node.js。

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

$ npm install

...\> npm install

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

$ npm test

...\> npm test
代码风格
提交代码
返回顶部