{"title":"JavaScript 代码","version":"5.2","locale":"zh-hans","docname":"internals/contributing/writing-code/javascript","url":"/zh-hans/5.2/internals/contributing/writing-code/javascript/","canonical":"https://djangodocs.dev/zh-hans/5.2/internals/contributing/writing-code/javascript/","summary":"尽管 Django 核心大部分是 Python，但 admin 和 gis 附加应用包含 JavaScript 代码。","html":"<h1>JavaScript 代码<a class=\"heading-anchor\" href=\"#javascript-code\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h1>\n<p>尽管 Django 核心大部分是 Python，但 <code class=\"docutils literal notranslate\">admin</code> 和 <code class=\"docutils literal notranslate\">gis</code> 附加应用包含 JavaScript 代码。</p>\n<p>在编写用于包含在 Django 中的 JavaScript 代码时，请遵循以下编码标准：</p>\n<section id=\"code-style\">\n<h2>编码风格<a class=\"heading-anchor\" href=\"#code-style\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<ul class=\"simple\">\n<li><p>请遵循 <code class=\"docutils literal notranslate\">.editorconfig</code> 文件中指定的缩进样式。我们建议使用支持 <a class=\"reference external\" href=\"https://editorconfig.org/\">EditorConfig</a> 的文本编辑器，以避免缩进和空格方面的问题。大多数 JavaScript 文件使用 4 个空格进行缩进，但也有一些例外情况。</p></li>\n<li><p>在命名变量时，请使用 <code class=\"docutils literal notranslate\">camelCase</code> 而不是 <code class=\"docutils literal notranslate\">underscore_case</code>。不同的 JavaScript 文件有时使用不同的代码风格。请尽量遵循每个文件的代码风格。</p></li>\n<li><p>使用 <a class=\"reference external\" href=\"https://eslint.org/\">ESLint</a> 代码检查工具来检查你的代码是否有错误和风格问题。在运行 JavaScript 测试时将会运行 ESLint。我们还建议在你的文本编辑器中安装一个 ESLint 插件。</p></li>\n<li><p>在可能的情况下，编写的代码应该能够在以后通过 JavaScript 更改页面结构时仍然正常工作。例如，在绑定点击处理程序时，使用 <code class=\"docutils literal notranslate\">$('body').on('click', selector, func)</code> 而不是 <code class=\"docutils literal notranslate\">$(selector).click(func)</code>。这样可以更容易地通过 JavaScript 扩展 Django 的默认行为。</p></li>\n</ul>\n</section>\n<section id=\"javascript-patches\">\n<span id=\"id1\"></span><h2>JavaScript 补丁<a class=\"heading-anchor\" href=\"#javascript-patches\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Django 的管理系统利用 jQuery 框架来增强管理界面的功能。同时，强调管理 JavaScript 的性能和尽量减少整体管理媒体文件的大小。</p>\n</section>\n<section id=\"javascript-tests\">\n<span id=\"id2\"></span><h2>JavaScript 测试<a class=\"heading-anchor\" href=\"#javascript-tests\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Django 的 JavaScript 测试可以在浏览器中运行，也可以从命令行运行。测试位于顶级 <a class=\"extlink-source reference external\" href=\"https://github.com/django/django/blob/stable/5.2.x/js_tests\">js_tests</a> 目录中。</p>\n<section id=\"writing-tests\">\n<h3>编写测试<a class=\"heading-anchor\" href=\"#writing-tests\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>Django 的 JavaScript 测试使用 <a class=\"reference external\" href=\"https://qunitjs.com/\">QUnit</a>。以下是一个示例的测试模块：</p>\n<div class=\"code-block\" data-language=\"javascript\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">JavaScript</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"JavaScript code\"><code><span class=\"nx\">QUnit</span><span class=\"p\">.</span><span class=\"nx\">module</span><span class=\"p\">(</span><span class=\"s1\">&#39;magicTricks&#39;</span><span class=\"p\">,</span> <span class=\"p\">{</span>\n    <span class=\"nx\">beforeEach</span><span class=\"o\">:</span> <span class=\"kd\">function</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n        <span class=\"kd\">const</span> <span class=\"nx\">$</span> <span class=\"o\">=</span> <span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">;</span>\n        <span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;#qunit-fixture&#39;</span><span class=\"p\">).</span><span class=\"nx\">append</span><span class=\"p\">(</span><span class=\"s1\">&#39;&lt;button class=&quot;button&quot;&gt;&lt;/button&gt;&#39;</span><span class=\"p\">);</span>\n    <span class=\"p\">}</span>\n<span class=\"p\">});</span>\n\n<span class=\"nx\">QUnit</span><span class=\"p\">.</span><span class=\"nx\">test</span><span class=\"p\">(</span><span class=\"s1\">&#39;removeOnClick removes button on click&#39;</span><span class=\"p\">,</span> <span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">assert</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n    <span class=\"kd\">const</span> <span class=\"nx\">$</span> <span class=\"o\">=</span> <span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">;</span>\n    <span class=\"nx\">removeOnClick</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">);</span>\n    <span class=\"nx\">assert</span><span class=\"p\">.</span><span class=\"nx\">equal</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">length</span><span class=\"p\">,</span> <span class=\"mf\">1</span><span class=\"p\">);</span>\n    <span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">click</span><span class=\"p\">();</span>\n    <span class=\"nx\">assert</span><span class=\"p\">.</span><span class=\"nx\">equal</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">length</span><span class=\"p\">,</span> <span class=\"mf\">0</span><span class=\"p\">);</span>\n<span class=\"p\">});</span>\n\n<span class=\"nx\">QUnit</span><span class=\"p\">.</span><span class=\"nx\">test</span><span class=\"p\">(</span><span class=\"s1\">&#39;copyOnClick adds button on click&#39;</span><span class=\"p\">,</span> <span class=\"kd\">function</span><span class=\"p\">(</span><span class=\"nx\">assert</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n    <span class=\"kd\">const</span> <span class=\"nx\">$</span> <span class=\"o\">=</span> <span class=\"nx\">django</span><span class=\"p\">.</span><span class=\"nx\">jQuery</span><span class=\"p\">;</span>\n    <span class=\"nx\">copyOnClick</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">);</span>\n    <span class=\"nx\">assert</span><span class=\"p\">.</span><span class=\"nx\">equal</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">length</span><span class=\"p\">,</span> <span class=\"mf\">1</span><span class=\"p\">);</span>\n    <span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">click</span><span class=\"p\">();</span>\n    <span class=\"nx\">assert</span><span class=\"p\">.</span><span class=\"nx\">equal</span><span class=\"p\">(</span><span class=\"nx\">$</span><span class=\"p\">(</span><span class=\"s1\">&#39;.button&#39;</span><span class=\"p\">).</span><span class=\"nx\">length</span><span class=\"p\">,</span> <span class=\"mf\">2</span><span class=\"p\">);</span>\n<span class=\"p\">});</span>\n</code></pre></div>\n<p>请参考 <code class=\"docutils literal notranslate\">QUnit</code> 文档，了解 <a class=\"reference external\" href=\"https://api.qunitjs.com/assert/\">QUnit 支持的断言类型</a> 的信息。</p>\n</section>\n<section id=\"running-tests\">\n<h3>运行测试<a class=\"heading-anchor\" href=\"#running-tests\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>JavaScript 测试可以在网页浏览器或命令行中运行。</p>\n<section id=\"testing-from-a-web-browser\">\n<h4>通过网页浏览器进行测试<a class=\"heading-anchor\" href=\"#testing-from-a-web-browser\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<p>要从 Web 浏览器中运行测试，请在浏览器中打开 <a class=\"extlink-source reference external\" href=\"https://github.com/django/django/blob/stable/5.2.x/js_tests/tests.html\">js_tests/tests.html</a> 文件。</p>\n<p>在运行测试时测量代码覆盖率，您需要通过 HTTP 查看该文件。要查看代码覆盖率：</p>\n<ul class=\"simple\">\n<li><p>请在根目录下执行 <code class=\"docutils literal notranslate\">python -m http.server</code> 命令（而不是在 <code class=\"docutils literal notranslate\">js_tests</code> 目录内执行）。</p></li>\n<li><p>在您的网页浏览器中打开 <a class=\"reference external\" href=\"http://localhost:8000/js_tests\">http://localhost:8000/js_tests</a> /tests.html。</p></li>\n</ul>\n</section>\n<section id=\"testing-from-the-command-line\">\n<h4>通过命令行进行测试<a class=\"heading-anchor\" href=\"#testing-from-the-command-line\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h4>\n<p>要从命令行运行测试，你需要安装 <a class=\"reference external\" href=\"https://nodejs.org/\">Node.js</a>。</p>\n<p>安装完 <code class=\"docutils literal notranslate\">Node.js</code> 后，可以通过在 Django 检出的根目录中运行以下命令来安装 JavaScript 测试的依赖项：</p>\n<div class=\"console\" data-console><div class=\"console-panel\" data-platform=\"unix\"><p class=\"console-label\" id=\"console-0-unix-label\">Linux / macOS</p><div class=\"code-block\" data-language=\"console\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Shell</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Shell code\"><code><span class=\"gp\">$ </span>npm install\n</code></pre></div>\n</div><div class=\"console-panel\" data-platform=\"windows\"><p class=\"console-label\" id=\"console-0-windows-label\">Windows</p><div class=\"code-block\" data-language=\"doscon\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Windows</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Windows shell\"><code><span class=\"gp\">...\\&gt;</span> npm install\n</code></pre></div></div></div>\n<p>然后使用以下命令运行测试：</p>\n<div class=\"console\" data-console><div class=\"console-panel\" data-platform=\"unix\"><p class=\"console-label\" id=\"console-1-unix-label\">Linux / macOS</p><div class=\"code-block\" data-language=\"console\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Shell</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Shell code\"><code><span class=\"gp\">$ </span>npm <span class=\"nb\">test</span>\n</code></pre></div>\n</div><div class=\"console-panel\" data-platform=\"windows\"><p class=\"console-label\" id=\"console-1-windows-label\">Windows</p><div class=\"code-block\" data-language=\"doscon\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Windows</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Windows shell\"><code><span class=\"gp\">...\\&gt;</span> npm test\n</code></pre></div></div></div>\n</section>\n</section>\n</section>","rootId":"javascript-code","toc":[{"title":"编码风格","anchor":"code-style","children":[]},{"title":"JavaScript 补丁","anchor":"javascript-patches","children":[]},{"title":"JavaScript 测试","anchor":"javascript-tests","children":[{"title":"编写测试","anchor":"writing-tests","children":[]},{"title":"运行测试","anchor":"running-tests","children":[{"title":"通过网页浏览器进行测试","anchor":"testing-from-a-web-browser","children":[]},{"title":"通过命令行进行测试","anchor":"testing-from-the-command-line","children":[]}]}]}],"breadcrumbs":[{"docname":"internals/index","title":"Django内部","url":"/zh-hans/5.2/internals/"},{"docname":"internals/contributing/index","title":"为 Django 做贡献","url":"/zh-hans/5.2/internals/contributing/"},{"docname":"internals/contributing/writing-code/index","title":"贡献代码","url":"/zh-hans/5.2/internals/contributing/writing-code/"}],"prev":{"docname":"internals/contributing/writing-code/coding-style","title":"编码风格","url":"/zh-hans/5.2/internals/contributing/writing-code/coding-style/"},"next":{"docname":"internals/contributing/accessibility","title":"Accessibility","url":"/zh-hans/5.2/internals/contributing/accessibility/"},"formats":{"html":"/zh-hans/5.2/internals/contributing/writing-code/javascript/","markdown":"/zh-hans/5.2/internals/contributing/writing-code/javascript.md","json":"/zh-hans/5.2/internals/contributing/writing-code/javascript.json"},"source":"https://github.com/django/django/blob/stable/5.2.x/docs/internals/contributing/writing-code/javascript.txt","official":"https://docs.djangoproject.com/zh-hans/5.2/internals/contributing/writing-code/javascript/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0"],"inLocales":["en","sv","zh-hans","ga","fr","ja","id","it","pt-br","ko","es","el","pl"]}