자바스크립트¶

코드 스타일¶

• “.editorconfig” 파일에 명시된 들여쓰기 스타일을 준수하십시오. 들여쓰기 및 공백 문제를 방지하려면 “EditorConfig”_ 지원 텍스트 편집기를 사용하는 것이 좋습니다. 대부분의 JavaScript 파일은 들여쓰기에 4개의 공백을 사용하지만 일부 예외가 있습니다.
• 변수 이름을 지정할 때 “underscore_case” 대신 “camelCase”를 사용합니다. JavaScript 파일마다 다른 코드 스타일을 사용하는 경우가 있습니다. 각 파일의 코드 스타일을 준수하도록 하십시오.
• ESLint_code linter를 사용하여 코드에 버그와 스타일 오류가 있는지 확인합니다. ESLint는 JavaScript 테스트를 실행할 때 실행됩니다. 또한 텍스트 편집기에 ESLint 플러그인을 설치하는 것이 좋습니다.
• 가능한 경우 나중에 JavaScript로 페이지 구조가 변경되더라도 작동하는 코드를 작성합니다. 예를 들어 클릭 핸들러를 바인딩할 때는 “$(selector)” 대신 “$(‘body’).on(‘click’, selector, func)”을 사용합니다.(func)’를 클릭합니다. 이렇게 하면 프로젝트가 JavaScript를 사용하여 Django의 기본 동작을 쉽게 확장할 수 있습니다.

JavaScript 패치¶

Django의 관리 시스템은 jQuery 프레임워크를 활용하여 관리 인터페이스의 기능을 향상시킵니다. 이와 함께 관리 JavaScript 성능을 강조하고 전체 관리 미디어 파일 크기를 최소화합니다.

자바스크립트 테스트¶

Django’s JavaScript tests can be run in a browser or from the command line. The tests are located in a top level js_tests directory.

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);
});

$ npm install

...\> npm install

$ npm test

...\> npm test