JavaScript¶

Style de code¶

• Veuillez respecter le style d’indentation défini dans le fichier .editorconfig. Nous recommandons d’utiliser un éditeur de texte avec prise en charge de EditorConfig pour éviter des problèmes d’indentation et d’espace. La plupart des fichiers JavaScript utilisent 4 espaces pour l’indentation, mais il y a quelques exceptions.
• Lors du nommage des variables, utilisez la notation camelCase plutôt que la séparation_par_soulignement. Il peut arriver que certains fichiers JavaScript utilisent un style de code différent. Merci de vous conformer au style de code de chaque fichier.
• Utilisez le vérificateur de code ESLint pour contrôler si votre code contient des bogues ou des erreurs de style. ESLint est lancé en même temps que les tests JavaScript. Nous recommandons également d’installer un greffon ESLint dans votre éditeur de texte.
• Lorsque c’est possible, écrivez du code qui fonctionnera même si la structure de la page est modifiée plus tard par du JavaScript. Par exemple, lors de l’inscription d’une fonction de clic, écrivez $('body').on('click', sélecteur, fonction) plutôt que $(sélecteur).click(fonction). Cela simplifie l’extension du comportement par défaut de Django avec JavaScript par d’autres projets.

Correctifs JavaScript¶

Django’s admin system leverages the jQuery framework to increase the capabilities of the admin interface. In conjunction, there is an emphasis on admin JavaScript performance and minimizing overall admin media file size. Serving compressed or « minified » versions of JavaScript files is considered best practice in this regard.

To that end, patches for JavaScript files should include both the original code for future development (e.g. foo.js), and a compressed version for production use (e.g. foo.min.js). Any links to the file in the codebase should point to the compressed version.

$ python django/contrib/admin/bin/compress.py

...\> py django\contrib\admin\bin\compress.py

Tests JavaScript¶

Les tests JavaScript de Django peuvent être lancés dans un navigateur ou à partir de la ligne de commande. Les tests sont situés dans un répertoire js_tests au premier niveau.

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