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