Przekazywanie parametrów do zewnętrznego skryptu JavaScript — praktyczny przewodnik

W nowoczesnych aplikacjach webowych powszechnie stosuje się zewnętrzne pliki JavaScript, zamiast osadzać skrypty bezpośrednio w HTML. Często zachodzi jednak potrzeba przekazania pewnych parametrów (np. tokenu, identyfikatora użytkownika, ustawień aplikacji) bez modyfikowania samego pliku app.js.

Istnieje kilka sposobów przekazywania takich parametrów. Każdy z nich ma swoje wady, zalety i odpowiednie zastosowania.

1. Atrybuty data-* w tagu <script>

To jeden z najczystszych i najczęściej stosowanych sposobów przekazywania parametrów do skryptu ładowanego z osobnego pliku.

Przykład HTML

<script 
    src="app.js"
    data-token="UNIKATOWY_TOKEN_123"
    data-user-id="42"
    data-env="production"
></script>

Przykład w app.js

const scriptTag = document.currentScript;

const token = scriptTag.dataset.token;
const userId = scriptTag.dataset.userId;
const env = scriptTag.dataset.env;

console.log(token, userId, env);

Zalety

• Nie zmienia URL pliku → nie wymusza ponownego pobierania z serwera
• Czytelne, semantyczne
• Brak wpływu na caching
• Działa świetnie z wieloma parametrami
• Bardzo łatwe do utrzymania

Wady

• Wartości widoczne dla użytkownika (nie nadają się na poufne tokeny)
• Parametry są dostępne dopiero po załadowaniu skryptu

Kiedy stosować?

• Gdy chcesz przekazać ustawienia konfiguracyjne do skryptu
• Gdy zależy Ci na zachowaniu cache’owania

2. Parametry w URL skryptu (?param=value)

Przekazywanie parametrów poprzez query string jest prostą techniką:

Przykład HTML

<script src="app.js?token=ABC&env=production"></script>

JavaScript

const url = new URL(document.currentScript.src);
const token = url.searchParams.get("token");
const env = url.searchParams.get("env");

console.log(token, env);

Zalety

• Bardzo łatwa implementacja
• Parametry dostępne już podczas pobierania pliku

Wady

• Zmiana parametru = zmiana URL → wymusza pobranie nowej wersji pliku
• Parametry widoczne w logach, historii, serwerze
• Może utrudniać caching

Kiedy stosować?

• Gdy zależy Ci na „cache bustingu”
• Gdy skrypt musi być pobierany z parametrem, np. wersją

3. Globalne zmienne wstawione przed załadowaniem skryptu

Można przed załadowaniem skryptu ustawić zmienne globalne:

HTML

<script>
    window.config = {
        token: "AAA111",
        theme: "dark",
        debug: true
    };
</script>

<script src="app.js"></script>

app.js

console.log(window.config.token);

Zalety

• Bardzo elastyczne
• Można przekazać obiekty, funkcje, tablice
• Parametry dostępne od razu przy starcie skryptu

Wady

• Zanieczyszcza przestrzeń globalną (window.*)
• Bardziej podatne na konflikty nazw
• Nie nadaje się do poufnych danych

Kiedy stosować?

• Gdy parametry są złożone (tablice, obiekty)
• Gdy musisz korzystać z parametrów natychmiast

4. Meta tagi HTML

Bardzo netykietowe podejście preferowane w frameworkach typu React/Next/Nuxt.

HTML

<meta name="app-token" content="XYZ123">
<meta name="theme" content="dark">
<script src="app.js"></script>

app.js

const token = document.querySelector('meta[name="app-token"]').content;
const theme = document.querySelector('meta[name="theme"]').content;

console.log(token, theme);

Zalety

• Semantyczne i czyste
• Idealne dla konfiguracji aplikacji
• NIE ingeruje w URL (cache-friendly)

Wady

• Dostęp dopiero po załadowaniu DOM
• Tylko wartości tekstowe
• Widoczne dla użytkownika

Kiedy stosować?

• W aplikacjach z pre-renderingiem
• Gdy parametry są „informacyjne”

5. Osadzanie JavaScript bezpośrednio w HTML (alternatywa)

To metoda najprostsza, ale nie najlepsza.

Przykład:

<script>
    const token = "ABC123";
    console.log(token);
</script>

Zalety

• Skrypt ma bezpośredni dostęp do danych w HTML
• Brak potrzeby przekazywania parametrów

Wady

• Trudniejsze utrzymanie (HTML + JS w jednym)
• Gorsza modularność
• Brak automatycznego cache’owania skryptu
• Kod JS miesza się z warstwą widoku

Kiedy stosować?

• Tylko w bardzo małych projektach
• Tylko dla prostych snippetów

6. Porównanie metod

7. Którą metodę wybrać?

Najbardziej polecane:

• *Atrybuty `data-`** → jeśli chcesz prostoty + zachować cache
• Meta tagi → jeśli sterujesz ustawieniami aplikacji
• Globalny obiekt konfiguracyjny → jeśli parametry są złożone

Od czego trzymać się z daleka:

• Wstawianie dużych skryptów w HTML — niezgodne z dobrymi praktykami
• Przekazywanie poufnych tokenów do frontendu — zawsze niebezpieczne

Podsumowanie

Przekazywanie parametrów do zewnętrznego pliku JavaScript można zrealizować na wiele sposobów. Najbardziej uniwersalnym i czystym rozwiązaniem są *atrybuty `data-`**, które nie wpływają na cache, są czytelne i łatwe w użyciu. W przypadku bardziej złożonych ustawień warto rozważyć globalny obiekt konfiguracyjny.