Including libraries with Script tags

Eine Bibliothek kann über einen <script>-Tag eingebunden werden. Wenn man diesen Ansatz nutzt, muss die Bibliothek vor dem Haupt-JavaScript-File eingebunden werden:

<script src="library.js"></script>
<script src="main.js"></script>

Solcherart eingebundene Bibliotheken haben denselben global scope wie die Haupt-JavaScript-Datei. Wenn die Bibliothek globale Variable enthält, sind diese auch im Haupt-JS-File zugänglich. Das wollen wir eigentlich nicht, weil es sonst unweigerlich zu Namenskonflikten mit anderen Bibliotheken oder mit dem Haupt-JS-File kommt. Wenn man einen <script>-Tag verwendet, dann muss der Code eingekapselt werden, damit er nicht in den global scope reicht.

How to encapsulate

Es gibt drei Wege, Bibliotheken einzukapseln:

1. mit einem block scope
2. mit einer Funktion
3. mit einer IIFE

// block scope
{
  // your code goes here
}

// or IIFE
;(function () {
  // your code goes here
})();

Wenn wir eine manuelle Bibliothek bauen, müssen wir den Code in einer Funktion einschließen. Benutzer müssen die Funktion aufrufen können und den zurückgegebenen Wert (wenn einer zurückgegeben wird) einer Variable zuweisen können.

library.js

function libraryName() {
  // your code goes here
}

main.js

// Activates library
const result = libraryName();