자바스크립트 코드

Django 코어의 대부분은 Python이지만 “admin” 및 “gis” 기여 앱에는 JavaScript 코드가 포함되어 있습니다.

Django에 포함하기 위해 JavaScript 코드를 작성할 때 이러한 코딩 표준을 따르십시오.

코드 스타일

  • “.editorconfig” 파일에 명시된 들여쓰기 스타일을 준수하십시오. 들여쓰기 및 공백 문제를 방지하려면 “EditorConfig”_ 지원 텍스트 편집기를 사용하는 것이 좋습니다. 대부분의 JavaScript 파일은 들여쓰기에 4개의 공백을 사용하지만 일부 예외가 있습니다.

  • 변수 이름을 지정할 때 “underscore_case” 대신 “camelCase”를 사용합니다. JavaScript 파일마다 다른 코드 스타일을 사용하는 경우가 있습니다. 각 파일의 코드 스타일을 준수하도록 하십시오.

  • Use the Biome code linter to check your code for bugs and style errors. Biome will be run by the pre-commit hooks. We also recommended installing a Biome plugin in your text editor.

  • 가능한 경우 나중에 JavaScript로 페이지 구조가 변경되더라도 작동하는 코드를 작성합니다. 예를 들어 클릭 핸들러를 바인딩할 때는 “$(selector)” 대신 “$(‘body’).on(‘click’, selector, func)”을 사용합니다.(func)’를 클릭합니다. 이렇게 하면 프로젝트가 JavaScript를 사용하여 Django의 기본 동작을 쉽게 확장할 수 있습니다.

JavaScript 패치

Django의 관리 시스템은 jQuery 프레임워크를 활용하여 관리 인터페이스의 기능을 향상시킵니다. 이와 함께 관리 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에서 지원하는 assertion 유형에 대한 정보는 QUnit 문서를 참고하세요.

테스트 실행

JavaScript 테스트는 웹 브라우저 또는 명령줄에서 실행할 수 있습니다.

 브라우저에서 테스트합니다.

웹 브라우저에서 테스트를 실행하려면 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
« previous | up | next »