JavaScript-kodLink to this heading#

Kod för stilLink to this heading#

• Följ den indragningsstil som anges i filen .editorconfig. Vi rekommenderar att du använder en textredigerare med stöd för EditorConfig för att undvika problem med indrag och blanksteg. De flesta JavaScript-filer använder 4 blanksteg för indragning, men det finns några undantag.

• När du namnger variabler, använd camelCase istället för underscore_case. Olika JavaScript-filer använder ibland en annan kodstil. Försök att följa kodstilen för varje fil.

• 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.

• Om möjligt, skriv kod som fungerar även om sidstrukturen senare ändras med JavaScript. Till exempel, när du binder en klickhanterare, använd $('body').on('click', selector, func) istället för $(selector).click(func). Detta gör det enklare för projekt att utöka Djangos standardbeteende med JavaScript.

JavaScript-uppdateringarLink to this heading#

Djangos adminsystem utnyttjar jQuery-ramverket för att öka funktionerna i admingränssnittet. I samband med detta läggs tonvikten på JavaScript-prestanda för admin och minimering av den totala filstorleken för adminmedia.

JavaScript-testerLink to this heading#

Djangos JavaScript-tester kan köras i en webbläsare eller från kommandoraden. Testerna finns i en katalog på högsta nivån js_tests.

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