JavaScrip代码

虽然Django的核心是python，但是 admin 和 gis contrib应用程序包含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 有关以下类型的信息的文档 assertions supported by QUnit 。

运行试验

可以从Web浏览器或命令行运行javascript测试。

从Web浏览器测试

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

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

  • 执行 python -m http.server 从根目录（不是从内部 js_tests ）

  • 在Web浏览器中打开http://localhost:8000/js_tests/tests.html。

从命令行测试

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

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

$ npm install

...\> npm install

然后运行测试：

$ npm test

...\> npm test
« previous | up | next »