Mainīgo konflikti JavaScript

Pieņemsim, ka mums ir HTML lapa index.html, kurā script tagā jūs izveidojat mainīgo str un izvadāt to uz ekrāna:

index.html<html>
  <head>
    <script>
      let str = 'script text';
      alert(str); // izvadīs 'script text'
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Pieņemsim, ka mums ir arī fails script.js, kurā arī tiek definēts mainīgais str:

script.jslet str = 'file text';

Pieņemsim, ka tagad mūsu fails script.js tiek pievienots lapai index.html šādā veidā:

html<html>
  <head>
    <script>
      let str = 'script text';
    </script>
    <script src="script.js"></script>
    <script>
      alert(str);
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Tā kā mainīgais str pastāv gan failā index.html, gan failā script.js, tad radīsies konflikts, kurā uzvarēs tas mainīgais, kurš ir uzrakstīts zemāk, tas ir, mainīgais no faila script.js. Tas ir, mūsu kods izvadīs 'file text', nevis 'script text', kā mēs gaidām.

Problēma patiesībā ir ļoti nopietna. Reālā vietnē jums visbiežāk būs vairāki faili ar jūsu skriptiem, turklāt, jūs pievienosiet dažādas trešo pušu spraudņus. Šajā gadījumā viena faila mainīgie un funkcijas var konfliktēt ar cita faila mainīgajiem un funkcijām.