JavaScript — Django 文档
JavaScript
虽然大部分 Django 核心是 Python,但 admin
和 gis
贡献应用程序包含 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 查看该文件。 查看代码覆盖率:
- 从根目录(不是从
js_tests
内部)执行python -m http.server
。 - 在 Web 浏览器中打开 http://localhost:8000/js_tests/tests.html。
从命令行测试
要从命令行运行测试,您需要安装 Node.js。
安装 Node.js
后,通过从 Django checkout 的根目录运行以下命令来安装 JavaScript 测试依赖项:
然后运行测试: