JavaScript — Django 文档

来自菜鸟教程
Django/docs/3.1.x/internals/contributing/writing-code/javascript
跳转至:导航、​搜索

JavaScript

虽然大部分 Django 核心是 Python,但 admingis 贡献应用程序包含 JavaScript 代码。

在编写 JavaScript 代码以包含在 Django 中时,请遵循这些编码标准。

代码风格

  • 请遵循 .editorconfig 文件中规定的缩进样式。 我们建议使用支持 [X38X]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 文件被认为是最佳实践。

为此,JavaScript 文件的补丁应该包括用于未来开发的原始代码(例如 foo.js) 和用于生产的压缩版本(例如 foo.min.js)。 代码库中文件的任何链接都应指向压缩版本。

压缩 JavaScript

为了简化提供优化 JavaScript 代码的过程,Django 包含一个方便的 Python 脚本,用于创建“缩小”版本。 运行它:

在幕后,compress.py 是 Google 用 Java 编写的 Closure Compiler 的前端。 Closure Compiler 库未与 Django 捆绑,但会由 npm 自动安装。 Closure Compiler 库需要 Java 7 或更高版本。

在提交 Django 的 JavaScript 补丁时,请不要忘记运行 compress.py 并包含缩小脚本的 diff


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 浏览器运行测试,请在浏览器中打开 js_tests/tests.html

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


从命令行测试

要从命令行运行测试,您需要安装 Node.js

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

然后运行测试: