JavaScript 程式碼

雖然 Django 的核心大部分是 Python，但 admin 和 gis contrib 應用程式包含 JavaScript 程式碼。

在編寫要包含在 Django 中的 JavaScript 程式碼時，請遵循這些程式碼標準。

程式碼風格

  • 請符合 .editorconfig 檔案中規定的縮排風格。我們建議使用支援 EditorConfig 的文字編輯器，以避免縮排和空格問題。大多數 JavaScript 檔案使用 4 個空格進行縮排，但也有一些例外情況。

  • 在命名變數時，請使用 camelCase 而不是 underscore_case。不同的 JavaScript 檔案有時會使用不同的程式碼風格。請盡量符合每個檔案的程式碼風格。

  • 使用 ESLint 程式碼檢查工具來檢查您的程式碼是否存在錯誤和風格錯誤。當您執行 JavaScript 測試時，將會執行 ESLint。我們也建議在您的文字編輯器中安裝 ESLint 外掛程式。

  • 在可能的情況下，編寫即使稍後使用 JavaScript 變更頁面結構也能運作的程式碼。例如，在繫結點擊處理常式時，使用 $('body').on('click', selector, func) 而不是 $(selector).click(func)。這使得專案更容易使用 JavaScript 擴展 Django 的預設行為。

JavaScript 修補程式

Django 的管理系統利用 jQuery 框架來增強管理介面的功能。同時，也強調管理 JavaScript 的效能並盡量減少整體管理媒體檔案的大小。

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 文件，以了解 QUnit 支援的斷言類型的資訊。

執行測試

JavaScript 測試可以從網頁瀏覽器或命令列執行。

從網頁瀏覽器測試

若要從網頁瀏覽器執行測試，請在您的瀏覽器中開啟 js_tests/tests.html。

若要測量執行測試時的程式碼涵蓋率，您需要透過 HTTP 來檢視該檔案。若要檢視程式碼涵蓋率

從命令列測試

若要從命令列執行測試，您需要安裝 Node.js。

安裝 Node.js 之後，從您的 Django 簽出根目錄執行以下命令，安裝 JavaScript 測試相依性

$ npm install

...\> npm install

然後使用以下命令執行測試

$ npm test

...\> npm test
程式碼風格
提交程式碼
返回頂部