Question

Jak w pliku js wywołać funkcję z drugiego pliku np.

Plik pierwszy

function a()
{
      alert("alert");
}

Plik drugi

function b()
{
      plik1.a()
}

 

Comments

Przeglądarka czy node?

---

Przeglądarka

Answer 1

1. Global scope

Zdefiniuj funkcję w pliku A - w pliku B możesz ją wywołać. Ważne tylko, aby plik A był w kodzie HTML przez plikiem B (W ten sposób korzysta się z bibliotek ściąganych na przykład z CDN-ów)

+ Zerowy próg wejścia
- Można zaśmiecić global scope'a
- Kod ciężki w utrzymaniu / rozwijaniu

---

2. Moduły ES6 - przeglądarka

Dodaj do tagu script atrybut type="module". Moduły zaczynają działać.

+ Niski próg wejścia
+ Całkiem przyjemnie można zarządzać strukturą projektu
- Niewielkie wsparcie

---

3. Moduły ES6 - node + module bunlder

Lokalnie używasz bundlera aby połączyć moduły w jeden plik

+ W nodzie można zbudować potężne środowisko developerskie (hot-reloading, minifikacja zasobów, transpilacja ES6+ / JSX / vue / TS /... , testy, linting, itd...)
+ W prosty sposób można zoptymalizować plik wyjściowy
+ Dowolne* wsparcie przeglądarek, przy możliwości pisania nowoczesnego kodu.
- Nieograniczone możliwości - potrzeba sporej wiedzy, żeby to wszystko "ogarnąć"

Zachęcam do zapoznania się na przykład z webpackiem lub rollupem (gdzie podstawowy bundling wykonasz jedną komendą)

Są jeszcze natywne moduły node'a (commonJS), ale wypadają blado przy ES6

---

4. AMD

Asynchronous Module Definition - w sumie to już martwe, ale rozwiązują problem. (requireJS - chyba najpopularniejszy module loader) Zdecydowanie odradzam.

---

Jeśli zaczynasz naukę JS, polecam sposób pierwszy. Na chwilę rozwiązuje problem i sam przekonasz się, jakie są jego wady.

Obecnie świat webdevu stoi na sposobie numer 3 i - jeśli się tym interesujesz - tam bym dążył na Twoim miejscu : )

Answer 2

//plik1:
export default function a() {
    //ciało funkcji a
};

//plik2:
import a from './plik1' //oczywiście ścieżka taka w jakiej masz plik

function b() {
    a();
}

No i oczywiście transpilacja babel, np. z użyciem webpack lub innego narzędzia.

Comments

W obydwu plikach pojawia mi się Unexpected token export/import

---

Możesz to zrobić bez module bundlera, dodając do tagu script atrybut type="module". Pytanie tylko, czy wsparcie dla tego rozwiązania Cię zadowala.

---

A jest jakiś inny sposób? Najlepiej taki żeby działało na wszystkich popularnych przeglądarkach.

---

No to jeśli ma działać na wielu przeglądarkach to wg mnie najlepiej zrobić bundla np. z użyciem webpack + babel i zrobić transpilacje do ES5 i po problemie.

---

Chyba jednak sobie odpuszczę. Za dużo roboty szczególnie że chciałem tylko wyrzucić z jednego pliku kilka set linijek kodu.

---

z jednego pliku kilka set linijek kodu

To ja jednak dalej obstawiam przy swoim i proponuję zaprzyjaźnić się np. z webpack i babel :)

Tak duże pliki to z czasem tylko same problemy. Pomyśl, jak za pół roku będziesz chciał coś zmienić i musisz analizować te kilkaset jak nie kilka tysięcy linii. Lepiej pracować na małych plikach i po prostu łączyć je w bundla (jeśli mówimy o przeglądarkach).

---

matilogias, odpowiedź już chyba padła. Dla uściślenia, możesz napisać tak:

Plik1.js:

function a(){
   return 5;
}

Plik2.html:

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

<script>
console.log(a()); // return 5
</script>